Category: SectionB

Project: Variable Faces

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

sketchDownload
var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

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

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}

project 02-face

face
var eyeSize = 20;
var eyebrowWidth = 40;
var eyebrowHeight = 10; 
var eyeLX = 80;
var eyeRX = 215;
var eyeHeight = 100;
var blushLX = 80;
var blushRX = 215;
var blushY = 138;
var blushWidth = 65;
var blushHeight = 20;
var mouthLX = 110;
var mouthRX = 178;
var mouthY = 175;
var R = 250;
var G = 100;
var B = 60;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R, G, B);
    strokeWeight(5);
    point(280, 70);
    point(150, 40);
    point(50, 60);
    point(35, 100);
    point(20, 150);
    point(90, 260);
    point(180, 255);
    point(250, 270);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(250, 270);
    curveVertex(250, 270);
    curveVertex(280, 70);
    curveVertex(150, 40);
    curveVertex(50, 60);
    curveVertex(35, 100);
    curveVertex(20, 150);
    curveVertex(90, 260);
    curveVertex(180, 255);
    curveVertex(250, 270);
    curveVertex(250, 270);

    endShape(); //shape of the face
    fill(139, 69, 19);
    ellipse(80, 85, eyebrowWidth, eyebrowHeight);
    fill(139, 69, 19);
    ellipse(215, 85, eyebrowWidth, eyebrowHeight); //eyebrow
    fill(0, 0, 0);
    circle(eyeLX, eyeHeight, eyeSize);
    fill(0, 0, 0);
    circle(eyeRX, eyeHeight, eyeSize); //eyes
    fill(250, 128, 114);
    ellipse(blushLX, blushY, blushWidth, blushHeight);
    fill(250, 128, 114);
    ellipse(blushRX, blushY, blushWidth, blushHeight); //blushes
    strokeWeight(5);
    point(mouthLX, mouthY);
    point(148, 200);
    point(mouthRX, mouthY);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(mouthLX, mouthY);
    curveVertex(mouthLX, mouthY);
    curveVertex(148, 200);
    curveVertex(mouthRX, mouthY);
    curveVertex(mouthRX, mouthY);
    endShape(); //mouth
}
 
function mousePressed() {
    eyeSize = random(10, 20);
    eyebrowWidth = random(25, 45);
    eyebrowHeight = random(5, 15); 
    eyeLX = random(60, 80);
    eyeRX = random(200, 220);
    eyeHeight = random(100, 115);
    blushLX = random(70, 95);
    blushRX = random(205, 225);
    blushY = random(130, 140);
    blushWidth = random(30, 70);
    blushHeight = random(20, 35);
    mouthLX = random(100, 140);
    mouthRX = random(170, 210);
    mouthY = random(170, 250); 
    R = color(random(0,255),random(0,255),random(0,255));
    G = color(random(0,255),random(0,255),random(0,255));
    B = color(random(0,255),random(0,255),random(0,255));
    
}

Project 2 – Variable Faces

Click on the hamster and see its mood evolve as it eats and chews!

sketch
/*
 * Michelle Kim
 * Section B
 */

var faceWidth = 170;
var faceHeight = 150;
var leftCheekWidth = 85;
var leftCheekHeight = 70;
var rightCheekWidth = 85;
var rightCheekHeight = 70;
var eyeWidth = 15;
var eyeHeight = 20;
var noseWidth = 40;
var noseHeight = 25;
var leftEarWidth = 40;
var leftEarHeight = 50;
var rightEarWidth = 40;
var rightEarHeight = 50;
var bodyWidth = 240;
var bodyHeight = 200;
var footWidth = 50;
var footHeight = 30;
var leftMouthStop = 1.57;
var rightMouthStart = 1.57;

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

function draw() {
    var canvasCenter = width / 2;
    var footX = bodyWidth * 0.3;
    var footY = bodyHeight * 0.45;
    var bodyCenterY = height * 0.65;
    var faceY = bodyCenterY - (bodyHeight * 0.8);
    var earX = faceWidth * 0.25;
    var earY = faceY - (faceHeight * 0.45);
    var cheekY = faceY + (faceHeight * 0.25);
    var eyeX = faceWidth * 0.2;
    var eyeY = faceHeight * 0.1;
    var blushX = leftCheekWidth * 0.45;
    var handX = bodyWidth * 0.1;
    var mouthX = noseWidth * 0.25;
    var mouthY = faceY + (noseHeight * 0.8);
    var noseY = faceY + eyeY - (noseHeight * 0.2);
    var leftBlushX = leftCheekWidth * 0.3;
    var leftBlushY = leftCheekHeight * 0.2;
    var rightBlushX = rightCheekWidth * 0.3;
    var rightBlushY = rightCheekHeight * 0.2;

    background(204, 238, 245);
    noStroke();
    fill(218, 205, 141);
    //left foot
    ellipse(canvasCenter - footX, bodyCenterY + footY, footWidth, footHeight);
    //right foot
    ellipse(canvasCenter + footX, bodyCenterY + footY, footWidth, footHeight);

    fill(246, 231, 153);
    //yellow body
    ellipse(canvasCenter, bodyCenterY, bodyWidth, bodyHeight);
    //left yellow ear
    ellipse(canvasCenter - earX, earY, leftEarWidth, leftEarHeight);
    //right yellow ear
    ellipse(canvasCenter + earX, earY, rightEarWidth, rightEarHeight);

    fill(161, 154, 118);
    //left brown ear
    ellipse(canvasCenter - earX, earY, leftEarWidth / 2, leftEarHeight / 2);
    //right brown ear
    ellipse(canvasCenter + earX, earY, rightEarWidth / 2, rightEarHeight / 2);

    fill(246, 231, 153);
    //yellow face
    ellipse(canvasCenter, faceY, faceWidth, faceHeight);

    fill(242, 234, 183);
    //white body
    ellipse(canvasCenter, bodyCenterY, bodyWidth * 0.7, bodyHeight);

    fill(245, 239, 213);
    //left cheek
    ellipse(canvasCenter - earX, cheekY, leftCheekWidth, leftCheekHeight);
    //right cheek
    ellipse(canvasCenter + earX, cheekY, rightCheekWidth, leftCheekHeight);
    //snout
    ellipse(canvasCenter, cheekY, faceWidth * 0.35, faceHeight * 0.45);

    fill(81, 80, 72);
    //left eye
    ellipse(canvasCenter - eyeX, faceY - eyeY, eyeWidth, eyeHeight);
    //right eye
    ellipse(canvasCenter + eyeX, faceY - eyeY, eyeWidth, eyeHeight);

    noFill();
    stroke(100);
    strokeWeight(2);
    //left mouth
    arc(canvasCenter - mouthX, mouthY, 20, 40, 0, leftMouthStop);
    //right mouth
    arc(canvasCenter + mouthX, mouthY, 20, 40, rightMouthStart, 3.14);

    fill(218, 205, 141);
    stroke(210, 198, 138);
    //left hand
    arc(canvasCenter - handX, bodyCenterY, 20, 60, 0, 3.49);
    //right hand
    arc(canvasCenter + handX, bodyCenterY, 20, 60, 5.93, 3.14);

    noStroke();
    fill(141, 136, 102);
    //brown nose
    ellipse(canvasCenter, faceY + eyeY, noseWidth, noseHeight);

    fill(225, 223, 208);
    //white nose
    ellipse(canvasCenter - mouthX, noseY, mouthX, noseHeight * 0.25);

    fill(235, 192, 216);
    //left blush
    ellipse(canvasCenter - blushX, faceY + eyeY, leftBlushX, leftBlushY);
    //right blush
    ellipse(canvasCenter + blushX, faceY + eyeY, rightBlushX, rightBlushY);
}

function mousePressed() {
    leftCheekWidth = random (85, 100);
    leftCheekHeight = random (60, 110);
    rightCheekWidth = random (85, 100);
    rightCheekHeight = random (60, 110);
    eyeWidth = random (10, 20);
    eyeHeight = random (15, 25);
    leftEarHeight = random (25, 50);
    rightEarHeight = random (25, 50);
    bodyWidth = random (230, 280);
    leftMouthStop = random (1.5, 2);
    rightMouthStart = random (1, 1.5);
}

Project-02-Variable-Face

In addition to the faces, I tried making each variation bigger after each click, as if the image is approaching you. After a certain size, the image would revert back to the starting size but the variables are still different, giving a new look each time.

var eyesize = 30
var headwidth = 200
var headheight = 270
var headcolor = 255
var red = 0
var green = 0
var blue = 0
var hair = 230
var hairheight = 200
var hairR = 410
var hairheightR = 200
var hairsize = 50
var hairdifference = 10
var lefteyex = 270
var righteyex = 370
var eyeheight = 240
var mouthheight = 50
var tonguelength = 30
var bodysize = 500
var browstartleft = 240
var browstartright = 340
var browheight = 180
var browlength = 50


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

}

function draw() {
    background(red,green,blue);
  //body
    fill(random(90),random(90),random(90))
    ellipse(320,520,bodysize,400);
  //head
    fill(219, 181, 88);
    noStroke();
    ellipse(320,240,headwidth,headheight);
  //parameters
    if(headheight>400) {headheight=270,headwidth=200,
                        hair=230,hairheight=200,
                        hairR=410,hairheightR=200
                        hairsize=50,hairdifference=10
                        lefteyex=270,righteyex=370
                        eyeheight=230,mouthheight=50
                        tonguelength=30,bodysize=500
                        browstartright=340,browstartleft=240
                        browheight=180,browlength=50}
  //hair
    noFill();
    stroke(0,50);
    strokeWeight(5,);
    arc(hair,hairheight,hairsize,30,PI,0);
    arc(hair,hairheight-hairdifference,hairsize,30,PI,0);
    arc(hairR,hairheightR,hairsize,30,PI,0);
    arc(hairR,hairheightR-hairdifference,hairsize,30,PI,0);
  //eyes
    noStroke();
    fill(random(200,255),random(200,255),random(200,255))
    circle(lefteyex,eyeheight,eyesize);
    circle(righteyex,eyeheight,eyesize);
  //mouth
    fill(0);
    rect(250,300,140,mouthheight,50);
  //tongue
    stroke(241, 76, 88);
    arc(320,330,30,tonguelength,0,PI);
  //eyebrows
    noStroke();
    rect(browstartleft,browheight,browlength,10,30);
    rect(browstartright,browheight,browlength,10,30);

}

function mousePressed() {
  red = random(255);
  green = random(255);
  blue = random(255);
  headwidth += 25
  headheight += 30
  hair -= 10
  hairheight -= 5
  hairR += 10
  hairheightR -= 5
  hairsize += 7
  hairdifference += 2
  eyesize = random(50, 70);
  lefteyex -= 7
  righteyex += 7
  eyeheight -= 3
  mouthheight +=10
  tonguelength += 10
  bodysize += 30
  browstartleft -= 7
  browstartright +=7
  browheight = random(150,200);
  browlength += 7
}

LO2

Muqarna Mutation, Mori Art Museum, Future and the Arts exhibition, 未来と芸術展
Muqarna Mutation at Mori Art Museum – by Kyungsub Shin

Michael Hansmeyer’s Muqarna Mutation installation at the Mori Art Museum is a striking piece which I found especially intricate and beautiful. Amongst the chaos which seems to take over the space, there is a sense of order and flow. As an architecture student, I enjoyed this piece because it explores the breadth of design ideas that can come from computational tools, as well as exemplifying how systems can be established and expanded from a very simple initial idea.

Hansmeyer is an architect, as well, who utilizes generative design as a way of rethinking design and its purpose. A big part of his process are the “happy accidents” that come along, ideas that usually take longer to discover. I think that being able to maximize new ideas because of the tools used, is something that is super fascinating.

The algorithmic composition in this project focuses on the designs of muqarna ceiling plans. It utilizes a “selective subdivision algorithm to generate and successively refine these plans”. Essentially, the project started with simply two contour lines outlining the space, then the algorithm subdivides the space into tiles, creating a rather complex grid system. This algorithm is layered on top to create the different levels and layers which can be seen in his project.

Hansmeyer’s artistic abilities are manifested in this piece very evidently. As an architect, maintaining and following a clear set of rules and system is key in creating a new design. More importantly, being able to abstract and develop the systems into layered and purposeful ideas becomes a challenge which many face in the design process. This project is a great example of being able to remain within the bounds of the system while creating an elaborate design.

http://www.michael-hansmeyer.com/muqarnas

PROJECT 02 – VARIABLE FACE

(click on the center of the canvas to change the faces)

sketch
//random colors used by all functions
var r;
var g;
var b;

//other variables
var rand_shape = 1;
var brow_shape = 1;
var eyeWidth = 20;
var eyeHeight = 40;
var nosehole = 20;
var mouthWidth = 60;
var mouthHeight = 30;
var ellipseWidth = 250;
var ellipseHeight = 300;
var pupilWidth = 5;
var pupilHeight = 10;


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

function draw() {
    background(180, 210, 231);
    var r = 0;
    var x = width / 2;
    var y = height / 2; 
    fill(0, 12);
    noStroke();


//eyes
    fill(0);
    ellipse(x - 40, y - 20, eyeWidth, eyeHeight);
    ellipse(x + 40, y - 20, eyeWidth, eyeHeight);

//pupils
    fill(255);
    ellipse(x - 40, y - 20, pupilWidth, pupilHeight);
    ellipse(x + 40, y - 20, pupilWidth, pupilHeight);

//mouth
    fill(255);
    beginShape();
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x, y + (mouthHeight*2));
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    endShape();

//brows
    strokeWeight(5);
    stroke(r, g);
    fill(r, g, 120);
    if (brow_shape == 1) {
        beginShape();
        curveVertex(x - 60, y - 60);
        curveVertex(x - 60, y - 60);
        curveVertex(x - 40, y - 70);
        curveVertex(x - 40, y - 70);
        endShape();

        beginShape();
        curveVertex(x + 60, y - 60);
        curveVertex(x + 60, y - 60);
        curveVertex(x + 40, y - 70);
        curveVertex(x + 40, y - 70);
        endShape();
    } else if (brow_shape == 2) {
        noFill();
        bezier(x - 50, y - 90, x - 50, y - 80, x - 25, y - 65, x - 25, y - 50);
        bezier(x + 50, y - 90, x + 50, y - 80, x + 25, y - 65, x + 25, y - 50);
    } else if (brow_shape == 3) {
        noFill();
        beginShape();
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();

        beginShape();
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();
    }


//face shape
    strokeWeight(1);
    stroke(r, g, b);
    fill(r, g, b, 120);
    if (rand_shape == 1) {
        ellipse(x, y, ellipseWidth, ellipseHeight);
    } else if (rand_shape == 2) {
        triangle(x - 200, y - 140, x + 200, y - 140, x, y + 140);
    } else if (rand_shape == 3) {
        rect(160, 100, x, y);
    } else {
        quad(x, y - 160, x + 160, y, x, y + 140, x - 160, y)
    }



//crown
    /*point(270, 103);
    point(320, 120);
    point(355, 110);
    point(370, 103);
    point(270, 103);
    point(270, 54);
    point(300, 75);
    point(320, 45);
    point(340, 75);
    point(370, 54);*/
    strokeWeight(1);

    fill(g, b, 200);
    beginShape();
    curveVertex(270, 103);
    curveVertex(270, 103);
    curveVertex(320, 120);
    curveVertex(355, 110);
    curveVertex(370, 103);
    curveVertex(370, 103);
    curveVertex(370, 54);
    curveVertex(370, 54);
    curveVertex(340, 75);
    curveVertex(340, 75);
    curveVertex(320, 45);
    curveVertex(320, 45);
    curveVertex(300, 75);
    curveVertex(300, 75);
    curveVertex(270, 54);
    curveVertex(270, 54);
    curveVertex(270, 103);
    curveVertex(270, 103);
    endShape();

}

function mousePressed() {
//face
    rand_shape = random([1, 2, 3, 4]);

//eyes
    eyeWidth = random(20, 60);
    eyeHeight = random(40, 80);

//pupil 
    pupilWidth = random(2, 10);
    pupilHeight = random(2, 10);

//mouth
    mouthWidth = random(20, 90);
    mouthHeight = random(20, 50);

//brows
    brow_shape = random([1, 2, 3]);

//changing colors
    var d = dist(mouseX, mouseY, 320, 240);
    if (d < 100) {
        r = random(255);
        g = random(255);
        b = random(255);

    }

}

Creating this was a fun process overall. I wanted to change my style up a bit and create a character that’s more abstract, so I used different shapes for the heads. I wanted the style to be more cartoon-y so I tried to use more pastel, and brighter colors in the color randomization. I learned a lot about different ways to randomize the varying components of my piece. A challenge I faced was definitely getting the colors to show up right.

Project-02-Variable-Face

I did a scene from Studio Ghibli’s Spirited Away where Kaonashi is sitting on a train. I found his face to be made of simple geometries that convey different expressions and emotions when the dimensions are adjusted.

project-02-face
//Graana Khan
// Section B

var eyeWidth = 14 
var eyeHeight = 8
var mouthWidth = 20 
var mouthHeight = 7
var eyebrowHeight = 111
var eyebrowHeightTop = 94
var cloud1 = 64
var cloud2 = 308
var cloud3 = 484

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

function draw() {
	background(255);
	noStroke();

//train backdrop 
    fill(66, 32, 18);
    rect(0, 0, 680, 235);
    fill(37, 17, 12);
    rect(0, 229, 680, 4);
    fill(114, 30, 21);
    rect(0, 234, 680, 100);
    fill(84, 22, 13);
    rect(0, 332, 680, 45);
    fill(56, 24, 14);
    rect(0, 373, 680, 65);
    fill(125, 75, 51);
    rect(0, 435, 680, 45);
    fill(78, 41, 22);
    rect(37, 18, 176, 211);
    rect(251, 18, 176, 211);
    rect(464, 18, 176, 211);
    fill(44, 19, 12);
    rect(0, 373, 680, 9);

//sky 
    fill(149, 178, 221);
    rect(45, 29, 160, 190);
    rect(259, 29, 160, 190);
    rect(472, 29, 160, 190);

    // clouds 
    fill(255, 255, 255, 100);
    rect(cloud1, 57, 85, 37, 20);
    rect(137, 162, 61, 32, 20);
    rect(cloud2, 101, 107, 59, 20);
    rect(cloud3, 60, 45, 30, 20);
    rect(525, 143, 91, 59, 20);

// train handles
    noFill();
    strokeWeight(8);
    stroke(98, 80, 56);
    ellipse(34, 29, 52, 52);
    ellipse(156, 29, 52, 52);
    ellipse(279, 29, 52, 52);
    ellipse(401, 29, 52, 52);
    ellipse(526, 29, 52, 52);
    ellipse(648, 29, 52, 52);
    noStroke();

//kaonashi body 
    fill(0, 0, 0, 150);
    beginShape();
    curveVertex(270, 432);
    curveVertex(270, 432);
    curveVertex(263, 379);
    curveVertex(258, 342);
    curveVertex(257, 330);
    curveVertex(258, 313);
    curveVertex(261, 298);
    curveVertex(263, 276);
    curveVertex(273, 234);
    curveVertex(280, 206);
    curveVertex(286, 186);
    curveVertex(291, 164);
    curveVertex(296, 137);
    curveVertex(298, 116);
    curveVertex(303, 94);
    curveVertex(312, 78);
    curveVertex(333, 69);
    curveVertex(351, 70);
    curveVertex(364, 77);
    curveVertex(373, 88);
    curveVertex(379, 109);
    curveVertex(382, 127);
    curveVertex(385, 152);
    curveVertex(393, 190);
    curveVertex(401, 217);
    curveVertex(410, 252);
    curveVertex(417, 285);
    curveVertex(421, 310);
    curveVertex(422, 343);
    curveVertex(420, 368);
    curveVertex(417, 284);
    curveVertex(414, 425);
    curveVertex(270, 432);
    curveVertex(270, 432);
    endShape();

//kaonashi head
    fill(221, 221, 219);
    rect(306, 80, 67, 116, 25, 25, 40, 40);

//kaonashi arms
    noFill();
    stroke(0, 0, 0, 140);
    strokeWeight(10);
    beginShape();
    curveVertex(288, 299);
    curveVertex(288, 299);
    curveVertex(285, 311);
    curveVertex(290, 321);
    curveVertex(307, 330);
    curveVertex(307, 330);
    endShape();
    beginShape();
    curveVertex(392, 299);
    curveVertex(392, 299);
    curveVertex(394, 311);
    curveVertex(390, 321);
    curveVertex(373, 330);
    curveVertex(373, 330);
    endShape();

//kaonashi face
    noStroke();
    fill(0);
    ellipse(323, 121, eyeWidth, eyeHeight); //left eye
    ellipse(357, 121, eyeWidth, eyeHeight); // right eye
    ellipse(323, 129, 9, 3);
    ellipse(357, 129, 9, 3);
    ellipse(340, 173, mouthWidth, mouthHeight);
    fill(111, 80, 61);
    triangle(318, 136, 328, 136, 325, 156);
    triangle(352, 136, 362, 136, 355, 156);
    ellipse(340, 181, 12, 4);
    triangle(318, eyebrowHeight, 328, eyebrowHeight, 326, eyebrowHeightTop); //left eyebrow
    triangle(352, eyebrowHeight, 361, eyebrowHeight, 353, eyebrowHeightTop); //right eyebrow

}

function mousePressed() {
	eyeWidth = random(8, 30);
	eyeHeight = random(5, 12);
	mouthWidth = random(10, 35);
	mouthHeight = random(5, 15);
	eyebrowHeight = random(100, 113);
	eyebrowHeightTop = random(87, 100);
	cloud1 = random(51, 120);
	cloud2 = random(262, 312);
	cloud3 = random(476, 562);

}

LO 2 – Generative Art

One generative art project that I find immensely inspirational is City Icon, designed and coded by Marcin Ignac at Variable (2012).

City Icon by Martin Ignac featured at Sustainable Cities exhibition by Siemens in the Crystal building in London.

A generative city simulation, City Icon shows the complex interactions of a city’s intersecting systems, including traffic jams, water streams, nature enclaves, emergency states, and energy sources. As a person who has always been exposed to New York City, one of the most popular cities in the world, I was even more attracted to this project because it shows a side to a city that we are unable to see.

We take advantage of the outcomes of all of these city systems, yet we do not appreciate the process to these outcomes. Ignac’s design of this simulation allows for audiences of all types to easily experience the dynamic workings of a city as well as grasp a sense of balanced amidst chaos.

Project 2 – Variable Face(s)

I call this piece, “My Parents.” I thought it would be interesting to try to generate some sort of dialogue between two figures each with their own characteristics. It was difficult assigning locations to elements when they were dependent on other variables.

peachproject2
///Boy
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 10
var noseHeight = 5
var b = 40
var b2 = 170
var bodyL = 130
var bodyR = 200
var mouthA = 20
var mouthB = 10
var mouthC = 250
var mouthD = 250 


//Girl
var geyeSize = 20;
var gfaceWidth = 100;
var gfaceHeight = 150;
var gnoseWidth = 10
var gnoseHeight = 5
var mouthWidth = 10
var mouthHeight = 10
var bodyGL = 450
var bodyGR = 510
var g = 50
var g2 = 170

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
  background(180);
    fill(150)
    rect(0,height/3*2, width,height/3)

    
//boy
  noStroke()
    fill(b, b2, 253)
      triangle(width/4, height/2, bodyL, height/5*4, bodyR, height/5*4)
  //eyes
  ellipse(width / 4, height / 2, faceWidth,  faceHeight);
      var eyeLX = width / 4 - faceWidth * 0.25;
      var eyeRX = width / 4 + faceWidth * 0.25;
  fill(255)
      ellipse(eyeLX, height / 2, eyeSize, eyeSize);
      ellipse(eyeRX, height / 2, eyeSize, eyeSize);
  //eyebrows
  stroke(0)
    strokeWeight(3)
      line(eyeLX-6, height/2 - (faceHeight * 0.15), eyeLX + 6,height/2 - (faceHeight * 0.2))  
      line(eyeRX-6, height/2 - (faceHeight * 0.2), eyeRX + 6,height/2 - (faceHeight * 0.15)) 
  //mouth
  stroke(0)
    strokeWeight(3)
    noFill()
      curve (mouthD, mouthC, width/4+5, height/2 + mouthA, width/4+10, height/2+mouthB,mouthC,mouthD);
  //pupils 
  noStroke()
    fill(0)
      ellipse(eyeLX, height / 2, eyeSize * 0.25, eyeSize * 0.25);
      ellipse(eyeRX, height / 2, eyeSize*0.25, eyeSize*0.25);
  //nose
    fill(0)
      rect(width/4, height/2, noseWidth, noseHeight)
 
//girl  
  //body
    fill(220,g,g2)
      triangle(width/4*3, height/2, bodyGL, height/5*4, bodyGR, height/5*4)
  //head
    ellipse(width / 4 * 3, height / 2, gfaceWidth,  gfaceHeight);
  //eyes
      var geyeLX = width / 4 * 3- gfaceWidth * 0.25;
      var geyeRX = width / 4 *3 + gfaceWidth * 0.25;
    fill(255)
        ellipse(geyeLX, height / 2, geyeSize, geyeSize);
        ellipse(geyeRX, height / 2, geyeSize, geyeSize);
    fill(0)
        ellipse(geyeLX, height / 2, geyeSize * 0.25, geyeSize * 0.25);
        ellipse(geyeRX, height / 2, geyeSize*0.25, geyeSize*0.25);
    fill(0) 
  //nose
    ellipse(width/4*3-5, height/2, gnoseWidth, gnoseHeight)
  //eyebrows
    stroke(0)
      strokeWeight(3)
        line(geyeLX-6, height/2 - (faceHeight * 0.2), geyeLX + 6,height/2 - (faceHeight * 0.15))  
        line(geyeRX-6, height/2 - (faceHeight * 0.15), geyeRX + 6,height/2 - (faceHeight * 0.2)) 

  //mouth
    noStroke()
      ellipse(width/4*3-5, height/2 +(faceHeight*0.25), mouthWidth, mouthHeight)

  
}
 
function mousePressed() {
  
  faceHeight = random(100, 170);
  faceWidth = random(75,150)
  eyeSize = random(20, 40)
  noseWidth=random(5,20)
  noseHeight = random(3,10)
  
  gfaceHeight = random(100, 170);
  gfaceWidth = random(75,150)
  geyeSize = random(20, 40)
  gnoseWidth=random(5,20)
  gnoseHeight = random(3,10)
  
  mouthWidth = random (10,30)
  mouthHeight = random (8,30)
  
  b = random(10,200)
  b2 = random(150,225)
  
  g= random(5,140)
  g2 = random(100,150)
  
  bodyL = random (120,135)
  bodyR = random (195,210)
  
  mouthA = random(15,25)
  mouthB = random(15,25)
  mouthC = random(280,320)
  mouthD = random (280,320)
  
  bodyGL = random(430,450)
  bodyGR = random (500, 530)
}

Project-02: Variable Faces; Face Variables

For this project, I wanted to try and capture the idea that people can have different features, but functionally and physiologically, we aren’t so different. I coded the profile to change (nose shape, head shape, and etcetera) when you click, but the brain always stays the same.

variableface
var noseBridge = 33;
var noseBump = 340;
var noseShape = 17;
var nostrilAngle = 20;
var noseLip = 50;
var lipPurse = 407;
var upperLip = 45;
var lipOut = 40;
var centerLip = 50;
var chinIn = 60;
var chinPoint = 50;
var jawLine = 530;
var lipHeight = 420
var lipTop = 45
var headWidth = 440
var headHeight = 55
var headTop = 110
var r = 235
var g = 205
var b = 167


function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(255);
    
    //head
	fill(r, g, b);
	noStroke();
	beginShape();
	curveVertex(454,265);				//last point before back of head shape
	curveVertex(427,208);
	curveVertex(389,headTop+41);
	curveVertex(321,headTop+10);
	curveVertex(248,headTop);			//top of head
	curveVertex(156,128);
	curveVertex(116,164);
	curveVertex(93,210);
	curveVertex(headHeight+21,253);
	curveVertex(headHeight+20,280);
	curveVertex(headHeight,313);		//eyes
	curveVertex(noseBridge,noseBump);	//nose bridge
	curveVertex(noseShape,364);			//nose roundness
	curveVertex(nostrilAngle,377);		//bottom nostril angle
	curveVertex(noseLip,388);			//nostril end to upper lip
	curveVertex(upperLip,lipPurse);		//upper lip
	curveVertex(lipOut,lipHeight);		//upper lip sticking out
	curveVertex(centerLip,429);			//lip center
	curveVertex(lipOut+1,444);			//bottom lip sticking out
	curveVertex(56,lipHeight+lipTop);	//bottom lip
	curveVertex(chinIn,470);			//chin height
	curveVertex(chinPoint,492);			//chin roundness
	curveVertex(63,517);				//chin angles
	curveVertex(83,530);				//jawline
	curveVertex(121,jawLine);			//chin to neck angle
	curveVertex(155,541);
	curveVertex(173,607);
	curveVertex(155,567);			//bottom neck point
	endShape();

	//back of head
	beginShape();
	curveVertex(388,155);
	curveVertex(405,175);
	curveVertex(headWidth+3,219);
	curveVertex(noseShape+headWidth,259);
	curveVertex(noseShape+headWidth+3,298);
	curveVertex(441,358);
	curveVertex(headWidth-30,400);
	curveVertex(399,439);
	curveVertex(396,511);
	curveVertex(401,541);
	curveVertex(169,601);
	curveVertex(335,125);
	endShape();

    //cerebellum
    fill(253, 182, 185);
	strokeWeight(10);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(288,326);
	curveVertex(306,328);
	curveVertex(330,325);
	curveVertex(339,314);
	curveVertex(360,318);
	curveVertex(386,320);
	curveVertex(414,326);
	curveVertex(401,349);
	curveVertex(376,368);
	curveVertex(359,377);
	curveVertex(335,376);
	curveVertex(322,369);
	curveVertex(300,350);
	endShape();

	strokeWeight(6);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(290,329);
	curveVertex(311,344);
	curveVertex(321,330);
	curveVertex(339,330);
	curveVertex(371,332);
	curveVertex(382,342);
	curveVertex(403,342);
	curveVertex(398,349);
	curveVertex(373,349);
	curveVertex(364,339);
	curveVertex(335,345);
	curveVertex(329,329);
	curveVertex(355,351);
	curveVertex(386,358);
	curveVertex(381,364);
	curveVertex(356,361);
	curveVertex(331,351);
	curveVertex(325,356);
	curveVertex(346,366);
	curveVertex(360,371);
	curveVertex(369,371);
	curveVertex(347,375);
	curveVertex(317,362);
	curveVertex(305,352);
	curveVertex(305,334);
	curveVertex(310,330);
	endShape();

    //cortex
	fill(255, 200, 198);
	strokeWeight(12);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(266,127);
	curveVertex(247,124);
	curveVertex(221,130);
	curveVertex(181,143);
	curveVertex(134,172);
	curveVertex(115,194);
	curveVertex(107,220);
	curveVertex(109,240);
	curveVertex(121,259);
	curveVertex(133,274);
	curveVertex(153,283);
	curveVertex(171,287);
	curveVertex(174,307);
	curveVertex(182,326);
	curveVertex(196,332);
	curveVertex(205,340);
	curveVertex(225,346);
	curveVertex(248,341);
	curveVertex(265,329);
	curveVertex(291,325);
	curveVertex(325,324);
	curveVertex(341,314);
	curveVertex(351,318);
	curveVertex(363,318);
	curveVertex(372,322);
	curveVertex(385,322);
	curveVertex(404,322);
	curveVertex(413,320);
	curveVertex(432,300);
	curveVertex(431,282);
	curveVertex(425,265);
	curveVertex(416,235);
	curveVertex(410,215);
	curveVertex(396,197);
	curveVertex(387,185);
	curveVertex(377,171);
	curveVertex(352,154);
	curveVertex(329,144);
	curveVertex(296,131);
	curveVertex(246,125);
	curveVertex(301,132);
	curveVertex(332,147);
	curveVertex(367,162);
	endShape();
	
	//lateral fissure
	noFill();
	strokeWeight(10);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(169,286);
	curveVertex(171,285);
	curveVertex(208,256);
	curveVertex(243,258);
	curveVertex(267,252);
	curveVertex(331,247);
	curveVertex(353,226);
	curveVertex(367,206);
	endShape();

	

	//contours
	noFill();
	strokeWeight(7);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(173,294);
	curveVertex(185,287);
	curveVertex(195,293);
	curveVertex(211,287);
	curveVertex(220,297);
	curveVertex(230,287);
	curveVertex(250,280);
	curveVertex(255,287);
	curveVertex(271,276);
	curveVertex(289,271);
	curveVertex(300,283);
	curveVertex(311,281);
	curveVertex(320,269);
	curveVertex(335,271);
	curveVertex(343,277);
	curveVertex(345,257);
	curveVertex(331,250);	
	endShape();

	beginShape();
	curveVertex(127,216);
	curveVertex(149,233);
	curveVertex(164,224);
	curveVertex(165,210);
	curveVertex(183,201);
	curveVertex(199,210);
	curveVertex(211,206);
	curveVertex(209,180);
	curveVertex(221,166);
	curveVertex(236,159);
	curveVertex(232,147);
	curveVertex(249,132);
	curveVertex(266,126);
	curveVertex(291,131);
	curveVertex(275,150);
	curveVertex(257,169);
	curveVertex(239,169);
	curveVertex(233,189);
	curveVertex(227,211);
	curveVertex(234,231);
	curveVertex(215,257);	
	endShape();

	beginShape();
	curveVertex(331,142);
	curveVertex(330,150);
	curveVertex(319,160);
	curveVertex(303,156);
	curveVertex(298,165);
	curveVertex(285,176);
	curveVertex(283,188);
	curveVertex(266,208);
	curveVertex(253,197);
	curveVertex(261,212);
	curveVertex(252,220);
	curveVertex(245,241);
	curveVertex(249,256);
	endShape();

	beginShape();
	curveVertex(300,235);
	curveVertex(292,211);
	curveVertex(304,184);
	curveVertex(323,177);
	curveVertex(343,161);
	curveVertex(355,167);
	curveVertex(360,178);
	curveVertex(341,189);
	curveVertex(332,210);
	curveVertex(317,225);
	curveVertex(307,227);
	curveVertex(317,235);
	endShape();

	beginShape();
	curveVertex(208,134);
	curveVertex(190,138);
	curveVertex(194,148);
	curveVertex(182,166);
	curveVertex(187,177);
	curveVertex(167,190);
	curveVertex(161,182);
	endShape();


	beginShape();
	curveVertex(118,200);
	curveVertex(126,201);
	curveVertex(135,170);
	curveVertex(142,168);
	curveVertex(119,226);
	curveVertex(136,249);
	curveVertex(144,258);
	curveVertex(161,265);
	curveVertex(178,259);
	curveVertex(193,264);
	curveVertex(193,247);
	curveVertex(188,400);
	endShape();

	beginShape();
	curveVertex(175,160);
	curveVertex(166,157);
	curveVertex(165,171);
	curveVertex(153,196);
	curveVertex(149,215);
	curveVertex(161,228);
	endShape();

	beginShape();
	curveVertex(209,219);
	curveVertex(207,236);
	curveVertex(211,257);
	endShape();

	beginShape();
	curveVertex(400,204);
	curveVertex(352,223);
	curveVertex(369,240);
	curveVertex(377,222);
	curveVertex(390,219);
	curveVertex(401,229);
	curveVertex(409,252);
	curveVertex(397,278);
	endShape();

	beginShape();
	curveVertex(371,256);
	curveVertex(359,256);
	curveVertex(366,265);
	curveVertex(356,283);
	curveVertex(329,294);
	curveVertex(305,301);
	curveVertex(289,295);
	curveVertex(287,288);
	curveVertex(282,299);
	curveVertex(257,309);
	curveVertex(264,331);
	endShape();

	beginShape();
	curveVertex(217,323);
	curveVertex(217,335);
	curveVertex(226,339);
	curveVertex(248,341);
	curveVertex(265,325);
	curveVertex(285,313);
	curveVertex(295,311);
	curveVertex(319,315);
	curveVertex(342,307);
	endShape();

	beginShape();
	curveVertex(191,308);
	curveVertex(197,320);
	curveVertex(211,326);
	curveVertex(220,332);
	curveVertex(227,315);
	curveVertex(242,298);
	curveVertex(261,305);
	endShape();

	beginShape();
	curveVertex(347,315);
	curveVertex(362,319);
	curveVertex(368,305);
	curveVertex(382,303);
	curveVertex(397,300);
	curveVertex(394,273);
	curveVertex(379,258);
	curveVertex(395,251);
	curveVertex(402,228);
	endShape();

	beginShape();
	curveVertex(213,221);
	curveVertex(213,233);
	curveVertex(221,247);
	curveVertex(234,256);
	curveVertex(249,256);
	curveVertex(263,252);
	curveVertex(282,233);
	curveVertex(289,224);
	curveVertex(294,235);
	curveVertex(296,249);
	endShape();
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 

    noseBridge = random(24, 40);
	noseBump = random(330, 340);
	noseShape = random(5, 20);
	nostrilAngle = random(15, 40);
	noseLip = random(40, 50);
	lipPurse = random(402, 410);
	upperLip = random(40, 50);
	lipOut = random(37, 42);
	centerLip = random(45, 52);
	chinIn = random(50, 65);
	chinPoint = random(45, 57);
	jawLine = random(520, 542);
	lipTop = random(30, 42);
	headWidth = random(430, 440);
	headTop = random(100, 118);
	r = random(48, 249);
	g = random(30,223);
	b = random(16, 198);

}

I made some preliminary concept sketches, but mostly used an Image Map HTML Generator to generate some base coordinates and fiddled with those.

My preliminary sketches and coordinate notations