dayoungc-Project-02-Variable-Face

sketch

//Dayoung Chung
//Section E
//dayoungc@andrew.cmu.edu
//Project-02

var eyeSize = 30; 
var faceWidth = 200; 
var faceHeight = 180; 
var noseSize = 15; 
var mouthSize = 30; 
var background1 = (194); 
var background2 = (94);
var background3 = (150); 
var nose= 200
var earSize= 200

function setup() {
    createCanvas(500, 620);
}

function draw() {
    background(background1, background2, background3);
    background(mouseX,mouseX,mouseY,mouseY)
    ellipse(mouseX, mouseY,0,0); 

    //face
    noStroke(0); 
    fill(107,104,100); 
    ellipse(width /2 , height /2 +30, faceWidth*1.2, faceHeight*1.1);
    var eyeLX = width / 2 - faceWidth * 0.3; 
    var eyeRX = width / 2 + faceWidth * 0.3; 

    //eyes
    fill(238,232,219); 
    ellipse(eyeLX, height / 2, eyeSize, eyeSize+10);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize+10);

    //pupil 
    fill(64, 60, 58); 
    ellipse(eyeLX, height/2-5.5, eyeSize-3 , eyeSize-2);
    ellipse(eyeRX, height/2-5.5, eyeSize-3, eyeSize-2);

    //mouth 
    stroke(0);
    strokeWeight(3);
    noFill();
    arc(width/2 ,height/2+80 ,mouthSize+10,mouthSize-10,0,PI);
    

    //nose
    noStroke(0);
    fill(0);
    ellipse(width/2,height/2+10,nose/7,nose/3);

    //nostrills
    noStroke(0);
    fill(255);
    ellipse(width/2-6,height/2+35,noseSize-10,4)
    ellipse(width/2+6,height/2+35,noseSize-10,4)

    //body 
    noStroke(0);
    fill(107,104,100);
    ellipse(width/2, height*3/4+100,180,300);
    fill(238,232,219);
    ellipse(width/2, height*3/4+150,100,300)

    //ear 

    beginShape();
    fill(107,104,100)
    curveVertex(180, 290);
    curveVertex(180,290);
    curveVertex(150, 160);
    curveVertex(125,  140);
    curveVertex(100,  240);
    curveVertex(140,  280);
    curveVertex(160,290);
    curveVertex(160,290);
    endShape();

   //ear2
    beginShape();
    fill(107,104,100)
    curveVertex(310, 290);
    curveVertex(310, 290);
    curveVertex(340, 160);
    curveVertex(365, 140);
    curveVertex(390,  240);
    curveVertex(360,  280);
    curveVertex(340,290);
    curveVertex(340,290);
    endShape();
}

    function mousePressed() {
    // when the user clicks, these variables are reassigned
    faceWidth = random(140, 200);
    faceHeight = random(180, 150);
    eyeSize = random(14, 40);
    nose = random(120,300);
    mouthSize = random(10,30); 
    background1 = random(0, 255); 
    background2 = random(0, 255); 
    background3 = random(0, 255); 

}

For this project, I made a character with my favorite animal, which is koala. I sketched first before starting with actual p5js. In the end, I decided to use “curveVertex” forming the ears, and arc for the lips. I had fun learning how to use variables and why they are used.

Enwandu-Project-02-Variable-Face

Variable Face

/*  Emmanuel Nwandu
    enwandu@andrew.cmu.edu
    Section D
    Project-02-Variable-Face
*/
var faceWidth = 420;
var faceHeight = 420;
var eyeSize = 82;
var eyePatchH = 176;
var eyePatchW = 111;
var mouthStroke = 7;
var earWidth = 173;
var earHeight = 195;
var blushWidth = 45;
var blushHeight = 27;
var blushRed = 253;
var blushGreen = 216;
var blushBlue = 201;

function setup() {
    createCanvas(480, 640);
    background(256);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
    background(256);

    //ears
    fill(0);
    ellipse(97, 170, earWidth, earHeight);
    ellipse(388, 170, earWidth, earHeight);

    //inner ears
    fill(blushRed, blushGreen, blushBlue);
    ellipse(97, 170, earWidth - 78, earHeight - 91);
    ellipse(388, 170, earWidth - 78, earHeight - 91);

    //head
    noStroke();
    fill(256);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyepatches
    noStroke();
    fill(0);
    ellipse(130, 337, eyePatchW, eyePatchH);
    ellipse(353, 337, eyePatchW, eyePatchH);


    //eyes including pupil and highlights
    noStroke();
    fill(256)
    ellipse(136, 355, eyePatchW - 29, eyePatchW - 29);
    ellipse(359, 355, eyePatchW - 29, eyePatchW - 29);
    fill(0);
    ellipse(136, 355, 62, 62);
    ellipse(359, 355, 62, 62)

    fill(256)
    //Defines edge conditions
    //Allows the highlights to follow the mouse within the boundary
    var leftEdgeR = 120;
    var rightEdgeR = 147;
    var leftEdgeL = 343;
    var rightEdgeL = 370;

    var xcR = constrain(mouseX, leftEdgeR, rightEdgeR);
    var xcL = constrain(mouseX, leftEdgeL, rightEdgeL);

    ellipse(xcR, 337, 33, 33);
    ellipse(130, 356, 12, 12);
    ellipse(xcL, 337, 33, 33);
    ellipse(353, 356, 12, 12);

    //nose
    fill(0);
    ellipse(243, 413, 50, 20);
    ellipse(243, 419, 27, 20);

    //blush
    fill(blushRed, blushGreen, blushGreen);
    ellipse(132, 452, blushWidth, blushHeight);
    ellipse(356, 452, blushWidth, blushHeight);

    //mouth
    noFill();
    stroke(0);
    strokeWeight(mouthStroke);
    arc(243, 425, 75, 60, HALF_PI, PI);

}
//When the mouse is pressed variables are randomized
function mousePressed() {
    mouthStroke = random(1, 10);
    faceWidth = random(360, 420);
    faceHeight = random(360, 420);
    earWidth = random(100, 180);
    earHeight = random(120, 200);
    eyePatchW = random(65, 150);
    eyePatchH = random(150, 200);
    blushWidth = random(40, 85);
    blushHeight = random(20, 35);
    blushRed = random(150, 260);
    blushGreen = random(200, 220);
    blushBlue = random(175, 210);

}

Inspired by my love of pandas, I coded the image with the intent of playing with figure ground relationships, negative and positive space, and how it can inform the clarity of the image.

I started by coding the base image that is seen first, and through trial and error began coding the randomized variations.

Project 2, odh

odh-variables

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 02
    
var headX = 200;
var headY = 300;
var earX = 60;
var earY = 100;
var eyeX = 50;
var eyeY = 50;
var eyeU = 25;
var eyeV = 25;
var musX = 100;
var musY = 80;

function setup() {
    createCanvas(640, 480);
    
}

function draw() {

    background(64, 64, 154);
    noStroke(0);

//body
    fill(200, 0, 0)
    arc(320, 480, 150, 100, PI, PI);
    
//neck
    fill(247, 231, 197);
    rect(300 ,340 ,40 , 100);

//ears
    ellipse(200, 230, earX, earY);
    ellipse(440, 230, earX, earY);

//head
    ellipse(320, 260, headX, headY);

//eyes
    fill(255);
    ellipse(275, 220, eyeX, eyeX);
    ellipse(365, 220, eyeY, eyeY); 

//pupils
    fill(0, 0, 0);
    ellipse(275, 220, eyeU, eyeU);
    ellipse(365, 220, eyeV, eyeV);   

//mustache
    fill(120, 100, 60)
    arc(320, 310, musX, musY, PI, PI)

}

function mousePressed(){

    earX = random(50, 100);
    earY = random(80, 120);
    headX = random(200, 250);
    headY = random(300, 350);
    eyeX = random(40, 75);
    eyeY = random(40, 75);
    eyeU = random(6, 36);
    eyeV = random(6, 36);
    musX = random(80, 120);
    musY = random(75, 85);

}

I worked primarily with simpler geometries while experimenting with the variables. I played with using the same variables for both the “x” and “y” of certain shapes, like the eyes and pupils, allowing them to change independent of each other.

hdw – Looking Outwards 2

Matthieu Regout is a designer who proposed an identity redesign for the city of Brussels. He wrote generative code to create a blue polygon and a red polygon, overlapped as a series of forms to show the hybrid nature of the city.

The algorithm that generated the work was built on a series of rotated views of a perspective pyramid. Regout took two perspectives of the generated forms from complimentary angles, and used opposing colors to show the duality. The final product created a clean and simple series of designs, which is appropriate for the branding system the image exists in. The series of two forms coming together to create a single image served to emphasize the hybrid nature of which Regout meant to bring out. The simplicity of the forms acted together to form a system of the printed posters and booklets for the city’s visual identity.

Matthieu’s process work:

Final poster:

Identity system:

Matthieu posted his project, “Brussels – The Hybrid City” on Behance in December, 2013.

elizabew-Project-02-Variable-Face

sketch

// Elizabeth Wang
// elizabew@andrew.cmu.edu
// Project - 02: variable faces; face variables

var eyeSize = 40;
var whiteeyes = 55;
var faceWidth = 250;
var faceHeight = 250;
var cheeks = 50;
var x = 300;
var y = 300;
var mouth = 80;
var ears = .2;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(89,117,133);
    noStroke();

//hair
fill (0);
  rect(.5*x, .38*y, x, 1.5*y, 90);


//ears
fill (255,234,201);
  ellipse( .6*x, y, x*ears, x*ears);
  ellipse( 1.40*x, y, x*ears, x*ears);

//neck
fill (214,197,169);
  rect(.9*x, 1.2*y, .2*x, .5*y, 90);

//head
fill (255,234,201);
  ellipse( x, y, faceWidth,  faceHeight);


//body
fill (250);
  rect(.55*x, 1.5*y, .9*x, 2*y, 120);

//bangs
fill(0);
  rect(.6*x, .45*y, .65*x, .4*y, 30 ,30, 30, 30);

//mouth
fill (0);
  rect(.86*x, 1.17*y, mouth, .09*mouth);

//cheeks
fill (237,106,90);
noStroke();
  ellipse( .7*x, 1.15*y, cheeks, cheeks);
  ellipse( 1.3*x, 1.15*y, cheeks, cheeks);

//eyes
fill(250);
  ellipse( .81*x, y, whiteeyes, whiteeyes)
  ellipse( 1.2*x, y, whiteeyes, whiteeyes);
fill (0);
  ellipse( .81*x, y, eyeSize, eyeSize);
  ellipse( 1.2*x, y, eyeSize, eyeSize);

//nose
fill (255,123,83);
  triangle(x, y, 1.05*x, 1.1*y, .95*x, 1.1*y);


}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    eyeSize = random(20, 40);
    whiteeyes = random (20, 60);
    x = random(250, 300);
    y = random(250, 350);
    cheeks = random(20, 60);
    mouth = random (40, 90);
}

Reflection

Initially, when I began this project, I did not exactly know where to start, so I decided to base the face off of my self portrait—with minor changes to the overall design.

(portrait from Project 01)

While I do enjoy the overall result of my program (the outputted faces look very funny and show a lot of personality despite a consistently flat mouth), I do wish I put in more time to make a simplified version of my program using functions, instead of ‘strange’ numbers that multiply with other ‘strange’ numbers. However I did learn a lot from this, and I can say that the next time a approach a program similar to this, I know what steps I need to take before jumping into writing the code instead of diving in headfirst.

jamieh-Project-02-Variable-Face

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 02
*/

 // Simple beginning template for variable face.
 var eyeSize = 20;
 var faceWidth = 100;
 var faceHeight = 150;
 var eyebrowSize = 30;
 var eyebrowThickness = 1.5;
 var noseWidth = 4;
 var noseHeight = 25;
 var neckWidth = faceWidth/4;
 var neckHeight = neckWidth/2;


 width = 640;
 height = 480;

 var shirtW = 150;
 var shirtH = 100;
 var shoulder = 50;
 var buttonSize = 5;
 var handSize = 30;



 function setup() {
    createCanvas(640, 480);

 }

 function draw() {
    noStroke();
    background(229, 242, 255);
    
//Hair (Behind)
    noStroke();
    fill(0, 0, 0);
    rect(width/2-faceWidth/2, height/2, faceWidth*1.08, faceHeight);

//Neck
    noStroke();
    fill(255, 235, 217);
    rect(width/2-neckWidth/2, height/2+faceHeight/2-5, neckWidth, neckHeight*1.25);

//Shirt
    noStroke();
    fill(256, 256, 256);
    rect(width/2-shirtW/2, height/2+faceHeight/2.1+neckHeight, shirtW, shirtH, shoulder, shoulder, 0, 0);

//NeckTriangle
    fill(255, 235, 217);
    triangle(
        width/2-neckWidth/2, height/2+faceHeight/2.1+neckHeight,
        width/2-neckWidth/2+neckWidth, height/2+faceHeight/2.1+neckHeight,
        width/2, height/2+faceHeight/2.1+neckHeight*2.1);

//Face Colour
    fill(255, 242, 230);
    
//Face shape
    ellipseMode(CENTER);
    ellipse(width/2, height/2, faceWidth, faceHeight);
 
//Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(width/2, height/2+height/12, faceWidth/3, faceHeight/8);
    fill(255, 242, 230);
    ellipse(width/2, height/2+height/14, faceWidth/2, faceHeight/8);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(1);
    arc(width/2, height/2+height/12, faceWidth/3, faceHeight/8, 0, PI);


//Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Outer (white)
    noStroke();
    fill(256, 256, 256);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Middle (Light brown)
    fill(153, 90, 0);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);

    //Inner (Dark brown)
    fill(51, 25, 0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);

//Eyebrows
    noFill();
    stroke(0, 0, 0);

    strokeWeight(eyebrowThickness);
    arc(eyeLX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(eyeRX, height/2, eyebrowSize, eyebrowSize, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

//Nose (does not change atm)
	//252, 234, 208 AND 255, 238, 215

    stroke(255, 229, 204);
    strokeWeight(3);
    line(width/2, height/2-noseWidth, width/2+noseWidth, height/2+noseHeight); 
    strokeWeight(1.5);
    line(width/2+noseWidth, height/2+noseHeight, width/2-noseWidth*1.2, height/2+noseHeight*1.2);

    //Nose shadow
    stroke(255, 243, 230);
    strokeWeight(4);
    line(width/2+noseWidth, height/2-noseWidth, width/2+noseWidth*2, height/2+noseHeight); 
    strokeWeight(2);
    line(width/2+noseWidth*2, height/2+noseHeight, width/2, height/2+noseHeight*1.2);

    //Nostril
    strokeWeight(3);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);
    line(width/2-noseWidth*2, height/2+noseHeight, width/2-noseWidth*3, height/2+noseHeight*1.1);


//Hair
	noStroke(51, 17, 0);
	strokeWeight(2);  
    
    fill(51, 17, 0);
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);             //Anchor point 1
    bezierVertex( 
                 width/2+faceWidth/8, height/2-faceHeight/3,        //Control point 1
                 width/2+faceWidth, height/2+faceHeight/8,          //Control point 2
                 width/2+faceWidth/3, height/2+faceHeight*1.25);    //Anchor point 2
    bezierVertex(
                 width/2+faceWidth/1.5, height/2+faceHeight,
                 width/2+faceWidth*1.1, height/2-faceHeight/2,
                 width/2-faceWidth/8, height/2-faceHeight/2);
    endShape();
    
    beginShape();
    vertex(width/2-faceWidth/6, height/2-faceHeight/4);              //bottom hair top point 
    bezierVertex(
                 width/2-faceWidth/1.25, height/2+faceHeight/8,      //bottom hair control point
                 width/2-faceWidth/6, height/2+faceHeight*1.5,       //bottom hair control point
                 width/2-faceWidth/2, height/2+faceHeight);
    bezierVertex(
                 width/2-faceWidth/3, height/2+faceHeight*0.8,
                 width/2-faceWidth, height/2-faceHeight/3,
                 width/2-faceWidth/8, height/2-faceHeight/2);        //top hair top point
    endShape();


//Shirt Buttons
    noStroke();
    fill(0, 0, 0);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize, buttonSize);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize, buttonSize);

    fill(217, 217, 217);
    ellipse(width/2, height/2+faceHeight*0.75, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*0.90, buttonSize*0.75, buttonSize*0.75);
    ellipse(width/2, height/2+faceHeight*1.05, buttonSize*0.75, buttonSize*0.75);

//Table
    fill(102, 51, 0);
    rect(0, height/2+faceHeight/2.1+neckHeight+shirtH, width, height-(height/2+faceHeight/2.1+neckHeight+shirtH));

//Hand
    fill(255, 235, 217);
    ellipse(width/2-shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    ellipse(width/2+shirtW/2.5, height/2+faceHeight/2.1+neckHeight+shirtH, handSize, handSize);
    //thumb
    ellipse(width/2-shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);
    ellipse(width/2+shirtW/3, height/2+faceHeight/2.1+neckHeight+shirtH, handSize/3, handSize/2);

}

 function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 175);
    eyeSize = random(10, 30);
    eyebrowThickness = random(1, 5);
    eyebrowSize = random(25, 35);
    noseWidth = random(2, 5);
    noseHeight = random(15, 20);
    shirtW = random(100, 300);
    shoulder = random(25, 100);
    buttonSize = random(5, 10);

}

This project is inspired by freshmen 15. Through writing this code, I understand the purpose of using variables and how it makes the code cleaner.

aerubin-Project-02-Variable-Face-Section-C

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-02

var eye = 10;
var pupil = 15;
var eyebrow = 1;
var eyelines = 0;
var n = 10; //n for nose
var ear = 1;
var lip = 0;
var ll = 1; //ll for lip length
var jaw = 1;
var chin = 10;
var skull = 1;
var eyebrowcolor = 1;
var lipcolor = 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(254, 247, 244);

    //Jaw Line
    noFill();
    stroke(1);
    beginShape();
    curveVertex(600*jaw, 400*jaw);
    curveVertex(500, 365);
    curveVertex(310, 380);
    curveVertex(300, 300);
    curveVertex(16*chin, 27*chin);
    endShape();

    //Lower Lip
    fill(222+lipcolor, 157+lipcolor, 160+lipcolor);
    beginShape();
    curveVertex(70, 100);
    curveVertex(350, 260);
    curveVertex(300, 300);
    curveVertex(300*ll, 280-lip);
    curveVertex(360, 270);
    endShape();

    //Upper Lip
    beginShape();
    curveVertex(180, 230);
    curveVertex(353, 270);
    curveVertex(300, 260);
    curveVertex(300*ll, 280-lip);
    curveVertex(350, 260);
    curveVertex(110, 140);
    endShape();
    
    fill(254, 247, 244);
    noStroke();
    triangle(350, 252, 329, 264, 360, 271);

    //Cupids Bow
    stroke(1);
    line(300, 260, 30.4*n, 24.0*n);

    //nose
    noFill();
    arc(30.8*n, 22.4*n, 30, 30, 100.3, 96);
    arc(29.1*n, 23.0*n, 70, 20, 120, 91);
    arc(26.9*n, 22.0*n, 40, 34, 90, 79.2);
    arc(25.2*n, 2.6*n, 7.0*n, 36.5*n, 102.05, 95.8);
    line(26.1*n, 20.2*n, 301, 148);

    //nose bridge
    arc(299, -34, 70, 365, 102.01, 95.8);
    
    //Top of Head
    arc(458, 151, 290, 300*skull, 3.29, 4);
    arc(454, 145, 300, 270*skull, 4, 6.5);

    //Back of Neck
    arc(782, 300, 400, 600, 90, 79.2);

    //jaw curve
    arc(490, 337.5, 80, 55, 100.33, 95.7);

    //front of neck
    arc(358, 595, 200, 430, 99, 97);

    //eye
    arc(35.5*eye, 14.4*eye, 45, 45, 90.5, 79.2);

    line(33.6*eye, 13.0*eye, 38.0*eye, (14.2*eye)+eyelines);
    line(33.7*eye, 15.6*eye, 38.0*eye, (14.2*eye)+eyelines);

    //pupil
    fill(100+pupil, 126+pupil, 35+pupil);
    ellipse(33.8*eye, 14.4*eye, 10, 18);
    fill(0);
    ellipse(33.4*eye, 14.4*eye, 5, 10);

    //ear
    noFill();
    arc(480*ear, 188*ear, 80, 95, 98.6, 96);
    arc(470*ear, 188*ear, 80, 75, 99, 94.3);

    //eyebrow
    fill(122/eyebrowcolor, 55/eyebrowcolor, 22/eyebrowcolor);
    noStroke();
    rect(335*eyebrow, 110*eyebrow, 30, 10);
    triangle(365*eyebrow, 110*eyebrow, 365*eyebrow, 120*eyebrow, 389*eyebrow, 125*eyebrow);
}

function mousePressed() {
    pupil = random(0, 100);
    eyebrow = random(.97, 1.03);
    eye = random(9.7, 10.5);
    eyelines = random(-4, 10);
    n = random(9.4, 10.6);
    ear = random(.94, 1.06);
    lip = random(-8, 9);
    ll = random(.97, 1.02);
    jaw = random(.84, 1.1);
    chin = random(6, 14);
    skull = random(.9, 1.06);
    eyebrowcolor = random(.5, 1.4);
    lipcolor = random(-40, 70);
}

Since I drew a face shown in the frontal view last week, I decided to try to draw the profile view for this assignment. My work began on a piece of paper to draw out the outline of the face (shown below). Then I brainstormed the different ways of which I could make the complex outline of the human profile utilizing code. I came to the conclusion that “curveVertex” would be useful in forming the jawline and lips, and I could use a combination of arcs and lines for the majority of the remainder.

I was inspired by the vast variations of faces we see everyday and I tried to emulate the uniqueness of each individual’s profile by changing features such as placement of the ear, placement of the eye, the strength of the jaw line, and many more. In order to emphasize the effect placement of facial features has on facial identification, hair was not necessary as it covers up the natural shape of the skull which contains a multitude of variations in itself. All in all, I am very satisfied with the product and how dramatically the face changes when clicked.

Isabelle LookingOutwards-02

Mario Klingemann:

Artificial Neural Artmaking Networks

Video and Audio generated by Klingemann’s program

Image Generated by Klingemann’s program

Klingemann uses machines to generate art, he does this by feeding visual information into the code of generative adversarial networks, which can teach themselves how to create digital images that look like ones a human would create. What immediately struck me were the the pieces created by the machine. The embedded video struck me as particularly haunting (the program generated the music as well). Also the quality exceeded my expectations of computer generated content, before seeing this work I imagined pieces of this nature to follow grid structures/patterns.The algorithm mimics a neural network which responds to images by learning and creating. All of the works displayed follow a surrealist style with darker undertones. Since Klingemann did some of his work in continued collaboration with Google I am excited to see what the future holds for his work with the resources made available by Google.

Source: https://www.wired.com/story/neurographer-puts-the-art-in-artificial-intelligence/

mjeong1-Looking Outwards-02-SectionA

An algorithm generates numerous interlocking objects

Computer-generated interlocking 3D joinery, inspired by Japanese joinery by a researcher at University of Applied Arts in Vienna, Aryan Shahabian.

Japanese wood joinery is widely known for its complexity and delicacy. Japanese carpenters have been making this beautiful wood joinery, known as Daiku, from generation to generation. Their exceptionally advanced joinery skill makes not only a wonderful decorative feature, but also a functional piece of design.

Even though this Japanese joinery has long been admired by people, it was almost impossible for normal people to make their own joinery design since it requires a impressive artistic craft. However, the algorithm that Aryan Shahabian created made possible for people without those skills to design their own Daiku. The algorithm handles complex geometry of joinery and organic form of the final object through software.

Furthermore, it might be more interesting if the algorithm could generate curvilinear shape instead of rectangular joinery. It might require additional geometrical solution.

Link to original

Link to archdaily original

elizabew-LookingOutwards-02-SectionE

Tentasho, created by Austrian artist Lia, is an installation that can be interactive using a touch screen. However, it can also be autonomous by exploring its’ parameter space.What I also find clever is how the installation will move on its own if there is no one interacting with it, most likely peaking the interest of those who might walk by it, and hopefully welcoming people to interact with it.

What I admire about this project and the work it produces is how every piece that comes out is incredibly unique and beautiful—invoking different visual feelings from the viewers. Some come out looking delicate, almost floral, whereas some come out looking dark and menacing.

While the installation does achieve the minimalistic approach it strives for, I personally would like to have seen what the outcomes would look like if the program integrated brighter colors into it. However, it does inspire me to look into unique programs and algorithms that would draw in an audience with both an interactive aspect and a unique output.

The algorithm used to generate this installation was made with a minimalistic approach—using only a single algorithm.