Category: SectionC

Project 02: Variable Faces

jen project 02 sketch copy

//Jennifer Kim
//Class section: C

var eyeSize = 40;
var Type = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var faceWidth = 275;
var pupilWidth = 40;
var pupilHeight = 30;
var faceHeight = 250;
var faceColorA = 0;
var faceColorB = 255;
var faceColor = 2;
var hairclipStyle = 0;

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(229,204,255);
    
    //hair
    fill(51,25,0);
    arc(240, 340, 300, 380, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);

    
    //face
    if (faceColor>1) {
       fill(255,229,204);
   } else if (faceColor<=1) {
       fill(241,200,124);
   }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes 
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //pupils
    fill(153,76,0);
    ellipse(width/2-50,height/2,pupilWidth-15,pupilHeight-15);
    ellipse(width/2+50,height/2,pupilWidth-15,pupilHeight-15);
    
    //circle nose
    fill(241,194,125);
    ellipse(width/2,height/2+30,15,15);

    //straight mouth
    if (Type <= 1.25){ 
    fill(255,213,255);
    rect(width/2-25, height/2+60,50,5);
    
    //triangle nose
    } else if (Type <= 2.5){ 
    fill(241,194,125); 
    triangle(width/2 - 15, height/2 + 40, width/2 + 15, height/2 + 40, width/2, height/2);
    }
    
    //hair accessories
    if (hairclipStyle <= 0.8){ 
        fill(76,0,153);
        circle(width/3, height/3, 60); 
        circle(width - (width/3), height/3, 60);
        
    } else { //attempt at using curve vertex
        fill(76,0,153);
        beginShape(); 
        curveVertex(310, 280);
        curveVertex(350, 300);
        curveVertex(390, 250);
        curveVertex(290, 210);
        curveVertex(270, 310);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(220, 230);
    faceHeight = random(240, 250);
    eyeSize = random(30, 40);
    Type = random(0,3);
    pupilWidth=random(30,35);
    pupilHeight=random(30,35);
    faceColorA = random(30, 150);
    faceColorB = random(70,200);
    hairclipStyle = random(0, 3);
}

Figuring out how to shape and position with the curveVertex() was tricky, but I was eventually able to create what I was going for. It was also interesting to put my new knowledge from lecture about if/else statements to use.

Looking Outwards 02: Generative Art

Project Title: Ten Thousand Cents

Year of Creation: 2008

Artists: Aaron Koblin and Takashi Kawashima

Ten thousand individual digital paintings were collected and arranged to create an image of the one hundred dollar bill.

Koblin’s artistic sensibilities manifest in the algorithm or more so through the resources used, such as Mechanical Turk; many of Koblin’s projects depend on collective effort, so it makes sense that the tech used works with/is for community driven stories. I admire how the project represents that despite being separated, people are able to stay connected through technology and work together to build something. This message inspires me because it makes me feel a bit less dissociated from the rest of the world. I admire how when looking at each individual part, it’s hard to understand what’s occurring or what the goal is, but when you view the bigger picture it is very clear. I find this admirable because it reminds me to step back and look for the real reasons behind why I do what I do in my everyday life. I know that the work was generated using a “custom drawing tool.” The interfaces were done with Flash and they also used Processing. As likely intended by the creators, the project suggests the possibilities for telling meaningful stories through interfaces, especially as we collect more personally relevant data.

Looking Outwards – Generative Art

A generative art project that I really admire is one by Leonardo Solaas called “Walking in Color Space”. With this project, he has taken famous art pieces, such as the Mona Lisa and has used code in order to create a 3D axis in which the most dominant colors in the piece are displayed. It breaks down exactly what colors are in the piece, and at what magnitude. Generative art allows people to create code that then creates art or produces ideas within seconds. I believe that for this specific project, Solaas must have used code which programs the computer to identify the colors within an artwork, and uses a scale or range to display how often colors are shown or used in a piece. The axis also produces a shape in which the colors occur. Along with the colors and the magnitude, they also show the position of the colors on the piece, created another piece of art itself, which I think is remarkable, as it does both analyze art while creating art at the same time.

Da Vinci in rgb

LO: Generative Art

“Hommage à Paul Klee”, Frieder Nake, 1965

Something in particular that I enjoy about this project is the fact that while from far away, it looks like a hand-drawn drawing, when you look more closely, the generated aspect is apparent in the perfectly straight lines and perfect ellipses– blending those generative codes to create something that mimics that of a human hand, and pointing to the human art artistic thought that went into the code itself. On a website, I actually found a list of some of the variables that Nake coded to determine the generative code: the width of the horizontal lines, the amount, radius, and position of the circles, whether a quadrilateral is to be left empty, or filled by vertical or triangular lines, and more. Although the art is technically generated by code, the artwork still innately reflects Nake’s own artistic sensibilities in that it reveals his style of drawing, what kind of a drawing he is trying to create with the code, and which variables he determined to create these artworks he calls his own.

Project 02: Variable Faces

sketchDownload
var pot = 3;
var plant = 1;
var eyebrows = 3;
var eyes = 3;
var mouth = 3;

function setup() {
    createCanvas(400, 400);
}
 
function draw() {
    background(251, 166, 156);
    noStroke();
    fill(255,202,196);
    rect(0,300,400,100);
    if(plant<=1) { //spiky
        noStroke();
        fill(43, 92, 48);
        triangle(140,200,110,120,190,200); //1
        fill(50, 136, 58);
        triangle(155,200,120,70,200,200); //2
        fill(65, 167, 75 );
        triangle(200,200,290,70,260,200); //5
        fill(77, 144, 84 );
        triangle(190,200,220,35,250,200); //4
        fill(57, 116, 62);
        triangle(175,200,160,30,220,200); //3
    }
    else if(plant<=2) { //flower
        noFill();
        stroke(143, 167, 65);
        strokeWeight(6)
        bezier(155,110,185,130,210,200,188,200); //leftstem
        stroke(143, 167, 65);
        strokeWeight(6)
        bezier(250,53,180,130,200,200,200,200); //rightstem
        noStroke();
        fill(178, 123, 210); //lightpurple
        ellipse(140,95,20);
        fill(178,123,210);
        ellipse(155,100,20);
        fill(178,123,210);
        ellipse(150,115,20);
        fill(178,123,210);
        ellipse(135,110,20); //end of flower left
        fill(178, 123, 210);
        ellipse(245,45,20);
        fill(178,123,210);
        ellipse(260,50,20);
        fill(178,123,210);
        ellipse(255,65,20);
        fill(178,123,210);
        ellipse(240,60,20); //endof flower right
        noStroke();
        fill(223, 186, 244);
        ellipse(249,55,10) //topflowermiddle
        fill(223, 186, 244);
        ellipse(145,105,10); //bottomflowermiddle
        noStroke();
        fill(143,167,65);
        arc(197,150, 80, 80, 0, PI/2, OPEN); //rightleafright
        fill(143,167,65);
        arc(237,190, 80, 80, PI,-PI/2, OPEN); //rightleafleft
        noStroke();
        fill(143,167,65);
        arc(154,190, 80, 80, -PI/2, 0,OPEN); //leftleafright
        fill(143,167,65);
        arc(194,150, 80, 80, PI/2, PI, OPEN); //leftleafleft
    }
    else if(plant<=3) { //cactus
        noStroke();
        fill(34, 72, 13);
        ellipse(200,85,90);
        noStroke();
        fill(34, 72, 13);
        rect(155,85,90,110);
        noFill();
        strokeWeight(30);
        stroke(34,72,14);
        bezier(130,80,130,100,120,120,160,120); //rightarm
        noFill();
        strokeWeight(30);
        stroke(34,72,14);
        bezier(275,100,275,120,280,150,240,145); //leftarm
    }


    if(pot<=1) {
        noStroke();
        fill(209,164,96);
        quad(100,200,300,200,250,360,150,360); //pot1
        fill(194, 140, 55);
        rect(90,190,220,35); //pottop1
        fill(160, 118, 53 );
        triangle(144,340,148,352,155,321); //crack
        triangle(153,329,155,321,142,310);
        triangle(141,310,144,313,143,292);
    }
    else if(pot<=2) {
        noStroke();
        fill(178, 123, 210);
        ellipse(200,280,180);
        fill(152, 104, 180);
        rect(105,190,190,35); //pottop1
        fill(132, 83, 161);
        triangle(220,368,233,364,240,330);
        triangle(240,330,237,340,270,317);
        triangle(270,317,263,320,275,300);
    }
    else if(pot<=3) {
        noStroke();
        fill(104, 180, 153);
        ellipse(200,270,180,180);
        fill(104, 180, 153);
        quad(110,180,290,180,230,350,170,350);
        fill(73, 146, 120);
        triangle(260,180,270,180,245,215);
        triangle(245,215,250,204,269,238);
        triangle(269,238,265,232,260,267);
    }

    if(eyes<=1) { //opencircleeyes
        fill(65, 49, 21);
        ellipse(175,280,5,8);
        ellipse(225,280,5,8); //righteye
    }
    else if(eyes<=2) { //closed
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(220,280,220,290,235,290,235,280);
        stroke(65, 49, 21);
        bezier(180,280,180,290,165,290,165,280);
    }
    else if(eyes<=3) { //squint
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        line(180,280,168,275)
        line(180,280,168,285)
        line(220,280,232,275)
        line(220,280,232,285);
    }

    if(mouth<=1) { //openmouth
        noStroke();
        fill(108, 32, 55);
        ellipse(200,312,18,20);
    }
    else if (mouth<=2) { //smile
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(190,310,190,325,210,325,210,310);
    }
    else if (mouth<=3) { //sidemouth
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(200,320,210,325,218,320,225,310);
    }

    if(eyebrows<=1) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(225,253,230,265,238,265,240,265);
        bezier(175,253,170,265,162,265,160,265);
    }
    else if(eyebrows<=2) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        bezier(225,253,230,250,238,260,240,265);
        bezier(175,253,170,250,162,260,160,265);
    }
    else if(eyebrows<=3) {
        noFill();
        strokeWeight(3);
        stroke(65, 49, 21);
        line(220,260,230,255);
        line(180,260,170,255);
    }
    strokeWeight(3); //cheeks
    stroke(255, 158, 147);
    line(238,295,245,290);
    line(246,295,253,290);
    line(162,295,155,290);
    line(154,295,147,290);

fill(255);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("2 CORINTHIANS 4:7",333,390);
}

 
function mousePressed() {
    pot = random(0, 3);
    plant = random(0, 3);
    eyebrows = random(0,3);
    eyes = random(0,3);
    mouth = random(0,3);
}

Project 2: Variable Faces

sketch-beansDownload
//Yeon Lee, Section C
//Project-02: Variable Faces; Face Variables

var backgroundR = 180;
var backgroundG = 200;
var backgroundB = 255;
var head = 190;
var hoodieColorR = 253;
var hoodieColorG = 253;
var hoodieColorB = 150;
var headWidth = 150;
var headHeight = 150;
var eyeSize = 24;
var blushSize = 25;
var mouth =  1
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //ears + head (back)
    var w = 330;
    var h = 250;
    var earSize = 80;
    var earY = h - 0.5 * head;
    var leftEarX = w + 0.45 * head; //hoodie size changes every time you click
    var rightEarX = w - 0.45 * head;

    fill(hoodieColorR, hoodieColorG, hoodieColorB); //hoodie color changes every time you click
    noStroke();
    ellipse(leftEarX, earY, earSize, earSize); //head with hoodie
    ellipse(rightEarX, earY, earSize, earSize);
    ellipse(w, 220, head, 1 * head); //cheek shape on the bottom
    ellipse(w, 280, 35 - head, head / 2);

    //head (front)
    fill(255, 255, 255);
    ellipse(w, h - 10, head / 1.2, head / 1.2); //face
    ellipse(w, h + 30, 45 - head, head / 2); //cheek shape on the bottom

    //eyebrows + eyes
    var leftEyeX = w - headWidth * 0.3; //eye size changes every time you click
    var rightEyeX = w + headWidth * 0.3;

    fill(45, 34, 25); 
    arc(leftEyeX, h - 40, 10, 5, PI, 0); //eyebrows
    arc(rightEyeX, h - 40, 10, 5, PI, 0);
    ellipse(leftEyeX, h, eyeSize, eyeSize); //eyes
    ellipse(rightEyeX, h, eyeSize, eyeSize);

    fill(255, 255, 255); //white part of eyes
    ellipse(leftEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
    ellipse(rightEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5); 
    ellipse(leftEyeX, h + 15, eyeSize, eyeSize / 4); //smiling eyes
    ellipse(rightEyeX, h + 15, eyeSize, eyeSize / 4);

    //nose
    var noseX = w;
    var noseY = head * 0.05 + 245; //nose size changes every time you click
    var noseSize = head / 45;
    fill(255, 182, 193);
    ellipse(noseX, noseY, noseSize, noseSize - 2);

    //blush
    var mouthSize = head / 35;
    var mouthW = noseSize * 3;
    var leftBlushX = w - mouthW * 5;
    var rightBlushX = w + mouthW * 5;

    fill(255, 139, 139, 50);
    ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);
    ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);

    //mouth
    var mouthX = w;
    var mouthY = head * 0.05 + 253;

    if (mouth < 2){ //mouth changes to either a smile or surprised every time you click 

        //smile
        fill(255, 106, 106);
        arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);

    } else if (mouth < 3) {
        //surprise
        fill(255, 106, 106);
        ellipse(mouthX, mouthY + 10, 15, 20);
    }

}
 
function mousePressed() {
    // when you click, these variables are reassigned
    // to random values within specified ranges
    backgroundR = random(100, 150);
    backgroundG = random(100, 150);
    backgroundB = random(200, 250);    
    head = random(180, 300);
    hoodieColorR = random(220, 255);
    hoodieColorG = random(220, 255);
    hoodieColorB = random(130, 180);
    headWidth = random(100, 200);
    headHeight = random(100, 250);
    eyeSize = random(24, 34);
    blushSize = random(25, 30);
    mouth = random(1, 3);
}

At first, it was challenging to work with positioning locations, but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.

LO: Generative Art

Refik Anadol’s “Machine Hallucinations” represent his most recent synesthetic reality experiments using projections.

Refik Anadol’s “Machine Hallucinations” is an generated A/V Performance and Installation art that uses Archive and Machine Learning algorithms to project 100 million photographic memories of New York City. The installation provides such cinematic experiences by multilayering and generating a vast, dynamic visual archive of the city. I found it absolutely intriguing how Anadol used artificial intelligence machine to produce photographs in motion to reflect the memories of the city. By creating a hallucinative imagery, it almost feels like another reality revealed in front of us. I also admire how the projection aspect makes even the audience like a part of the work as it illuminates and spotlights the people. In his work, Anadol attempts to represent the “reality, totality, and the depth of human imagination,” and unearth novel connections between collective consciousness and visual narrative using machine intelligence.

Reference: https://refikanadolstudio.com/projects/machine-hallucination/

Project-02: Variable Faces

Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var …=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working. 
siyunw-Generative faces
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var hairWidth =350;
var hairHeight =350;
var neckWidth = width / 2;
var neckHeight= 4*neckWidth / 3;
var mouthSize= 40;
var mouthHeight = 30;
var backgroundR=250;
var backgroundG=150;
var backgroundB=100;

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

function draw() {
    background(backgroundR,backgroundG,backgroundB);

    fill(255,204,153);
    circle((width-hairWidth) / 2,height / 2,50);  
    circle(width-(width-hairWidth) / 2,height / 2,50);//ears

    fill(255,153,51);
    ellipse(width / 2, height / 2, hairWidth, hairHeight);
    rect((width-hairWidth) / 2,(height / 2),hairWidth,4*(hairHeight / 2) / 3);//face
    
    var eyeLX = width / 2 - faceWidth * 0.15;
    var eyeRX = width / 2 + faceWidth * 0.15;
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//eyes


    fill(0);
    ellipse(width/2,3*height / 4,mouthSize,mouthHeight);
    //mouse

}

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.
    backgroundR=random(200,300);
    backgroundG=random(100,200);
    backgroundB=random(50,150);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    hairWidth = random(300,400)
    hairHeight = random(300,400);
    neckWidth = random(150,250);
    mouthSize = random(35,80);
    mouthHeight = random(25,70);
}

Project 2: Variable Faces

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 15;
var noseHeight = 15;
var mouthWidth = 20;
var mouthHeight = 20;
var eyebrowHeight = 20;
var eyebrowWidth = 40;
var fillFaceR = 200
var fillFaceG = 200
var fillFaceB = 200
var filleyeR = 200
var filleyeG = 200
var filleyeB = 200
var fillMouthR = 200
var fillMouthG = 200
var fillMouthB = 200
var fillBrowR = 200
var fillBrowG = 200
var fillBrowB = 200
var fillHairR = 200
var fillHairG = 200
var fillHairB = 200


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

function draw() {
    background(255, 242, 242);
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    strokeWeight(0);
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(166, 83, 83)
    ellipse(width/2, 250, noseWidth, noseHeight);
        //nose
    fill(fillMouthR, fillMouthG, fillMouthB);
    ellipse(width/2, 280, mouthWidth, mouthHeight);
        //mouth function
    fill(fillBrowR, fillBrowG, fillBrowB);
    var eyebrowLX = width / 2 - faceWidth * 0.5 
        //Left eyebrow variable thing
    var eyebrowRX = width / 2 + faceWidth * 0.52
        //Right eyebrow variable thing
    rect(eyebrowLX, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Left Eyebrow
    rect(eyebrowRX - 40, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Right Eyebrow
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    rect(width / 2 - 17, 265, 35, 15)
        //this is the rectangle that makes the mouth into a smile
    strokeWeight(0);
    fill(fillHairR, fillHairG, fillHairB);
    ellipse(width / 2, height / 3 + 10, 40, 40)
        //this is the hair bun



}

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.
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseWidth = random(5, 12);
    noseHeight = random(5, 12);
    mouthWidth = random(15, 35);
    mouthHeight = random(5, 25);
    eyebrowHeight = random(6, 20);
    eyebrowWidth = random(30, 45);
    fillFaceR = random(70, 255);
    fillFaceB = random(70, 150);
    fillFaceG = random(70, 150);
    filleyeR = random(10, 100);
    filleyeG = random(10, 100);
    filleyeB = random(10, 100);
    fillMouthR = random(150, 255);
    fillMouthG = random(1, 50);
    fillMouthB = random(1, 50);
    fillBrowR = random(0, 100);
    fillBrowG = random(0, 100);
    fillBrowB = random(0, 1255);
    fillHairR = random(0, 255);
    fillHairG = random(0, 100);
    fillHairB = random(0, 255);
}

My main challenges were trying to place the eyebrows correctly, and getting the colors correct. I think starting was also a bit difficult, but once I got use to using global variables a bit more it got easier.

LO: Generative Art

A piece of generative art that I admire is “Differential Lattice” created by artist Anders Hoff. From a visual perspective, I think it is extremely beautiful. The small components coming together to create a very intricate lattice is very interesting. I also admire it because I am extremely interested in the process the artist had to go through to produce it. This course is my first introduction to code as well as computational art, and I think that it has been so interesting to see how the language of the code interacts with the visual art. I am just so curious as to how Hoff had to harness that code in order to create this very intricate piece. The artist said that they used Cython to produce this piece. When going into depth about his process, he talked about how he used a lot of differential meshes and systems to create the piece. It seems as though, there is a pattern of nodes being plotted, and the computer keeps using that program to create similar patterns and move throughout the canvas. I think that you can tell that the artist has an appreciation for additive pieces. In some of the ones I saw on their website, there was a start in the middle of the canvas, and then growth coming out from that point into the canvas.

https://inconvergent.net/generative/differential-lattice/