September 2018 – Page 61 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Project 02 – Alexander Chen

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project_02


var faceWidth = 100;
var faceHeight = 150;
var eyeSize = 20;
var pupilColor = 255;
var eyeColorR = 0
var eyeColorG = 0
var eyeColorB = 0
var earWidth = 10
var earHeight = 20
var mouthSize = 20
var hairHeight = 40

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

function draw() {
    background(242, 126, 159);

   
   
    //FACE//
    noStroke();
    fill(231, 175, 132);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


      //HAIR
    fill(0)
    var hairX = width / 2 - faceWidth / 2
    var hairY = height / 2 - faceHeight / 2
    var hairWidth = faceWidth
    rect(hairX, hairY, hairWidth, hairHeight, 20, 20, 10, 10);
   

    //EYES//
    //eyes color
    fill(pupilColor)
    
    //pupil size + location
    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);

    //iris
    fill(eyeColorR, eyeColorG, eyeColorB)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);


    //EARS//
    fill(231, 175, 132);
    var earL = width / 2 - faceWidth / 2
    var earR = width / 2 + faceWidth / 2
    ellipse(earL, height / 2, earWidth,  earHeight);
    ellipse(earR, height / 2, earWidth,  earHeight);


    //NOSE//
    fill(100, 75, 46)
    rect(width / 2 - eyeSize / 4, height / 2, eyeSize / 2, eyeSize, 20)

    //MOUTH//
    fill(251, 62, 58)
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthSize, mouthSize)



}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(10, 30);
    earWidth = random(5, 15);
    earHeight = random(10, 20);
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorb = random(0, 255);
    mouthSize = random(10, 20);
}

This project was definitely a bit easier to get started with the templates. However, it was still as hard as I thought it was going to be with the variables within the variables. As someone who loses track easily, I found myself being confused with which variables lined up with which.

Jessica Timczyk – Looking Outwards 02

Nervous System, a design studio focused on designing and producing products inspired by natural phenomena, utilizes computer programming to craft their creations. Rather than designing each piece of work individually, the group ingeniously creates computer programs to construct many new designs, each one being unique. Specifically, the group’s kinematic dress project provides an interesting combination of art and computer programming. A code was seemingly written to design thousands of unique interlocking shapes to make up the dress, resulting in an extremely interesting pattern created by the coder within the “fabric” of the dress which was then 3D printed. It is made up of thousands of triangular panels and hinges, giving the design its motion and mobility. The dress was created and designed by the Nervous System team, including: Jessica Rosenkrantz, Jesse Louis- Rosenberg, Margaret Swanson, and Peter Sanroma in 2014.

The video above describes in more detail the process the team went through to produce the Kinematics Dress.

Emily Zhou –– Variable Face

sketch

// face
var faceWidth = 225;
var faceHeight = 225;

var skin1 = 255;
var skin2 = 220;
var skin3 = 175;
// eyes
var eyeSize = 50;

var color1 = 0;
var color2 = 0;
var color3 = 0;

var pupilSize = 30;
//nose
var noseW = 30;
var noseH = 20;
// mouth (2)
// ver. semi-circle
var mouthW = 70;
var mouthH = 40;
// ver. circle
var mouth2d = 50;
// choice
var mouthChoice = 0;
// hat
var hat1 = 170;
var hat2 = 90;
var hat3 = 255;

var hatX1 = 275;
var hatY3 = 55;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0);
    // skin
    fill(skin1, skin2, skin3)
    // face
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    // eyeballs
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // pupils
    fill(color1, color2, color3);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    // mouth (2)
    var mouthX = width / 2;
    var mouthY = height / 2 + faceHeight * 0.25;
    // ver. semi-circle
    if (mouthChoice == 0) {
        fill(250, 140, 140);
        noStroke();
        arc(mouthX, mouthY, mouthW, mouthH, TWO_PI, PI, CHORD);
    }
    // ver. circle
    else if (mouthChoice == 1) {
        fill(250, 140, 140);
        ellipse(mouthX, mouthY, mouth2d, mouth2d);
    }
    //nose
    var noseY = mouthY - mouthH / 2 - 20;
    fill(color1, color2, color3);
    ellipse(width / 2, noseY, noseW, noseH);
    // hat
    var hatX2 = width - hatX1;
    var hatX3 = (hatX1 + hatX2) / 2;
    var hatY = height / 2 - faceHeight / 2 + 15;
    fill(hat1, hat2, hat3);
    triangle(hatX1, hatY, hatX2, hatY, hatX3, hatY3);
}
 
function mousePressed() {
    // face
    faceWidth = random(150, 250);
    faceHeight = random(150, 250);
    skin1 = random(0, 255);
    skin2 = random(0, 255);
    skin3 = random(0, 255);
    // eyes
    eyeSize = random(25, 55);
    pupilSize = random(15, eyeSize - 10);
    color1 = random(0, 255);
    color2 = random(0, 255);
    color3 = random(0, 255);
    // nose
    noseW = random(30, 70);
    noseH = random(30, 70);
    // mouth (2)
    // ver. semi-circle
    mouthW = random(10, faceWidth - 80);
    mouthH = random(10, faceHeight * 1/4);
    // ver. circle
    mouth2d = random(30, faceHeight * 1/3);
    // choice
    mouthChoice = Math.floor(random(0, 1) * 2);
    // hat
    hat1 = random(0, 255);
    hat2 = random(0, 255);
    hat3 = random(0, 255);
    hatX1 = random(275, 300);
    hatY3 = random(45, 75);
}

It took me a while to figure out, but I found the way to randomize a range of colours using the 3 RGB values. I used this tactic in the skin, eyes, and hat to generate a ton of faces that all look very distinct. I added the party hat at the end because the face seemed too naked.

Eliza Pratt – Project 02

sketch

/* 
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-02
*/


var eyeSize = 30;
var eyeWidth = 1;
var blu = 100;
var faceWidth = 250;
var faceHeight = 300;
var skin = 30;
var glasses = 20;
var cut = 120;
var brow = 0;

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

function draw() {
    noStroke();
    background(200, 222, 230);

    //hair
    fill(224, 72, 72);
    rect(width / 2 - faceWidth/2 - 20, height / 2 - 45, faceWidth + 40, cut, 0, 0, 10, 10);
    fill('rgba(0,0,0, 0.25)');
    rect(width / 2 - faceWidth/2, height / 2 - 45, faceWidth, cut);
    

    ////////HEAD/////////
    fill(242-skin, 194-skin, 131-skin);

    //ears
    ellipse(width/2 - faceWidth/2, height/2 + 10,  55, 65);
    ellipse(width/2 + faceWidth/2, height/2 + 10,  55, 65);
    fill('rgba(0,0,0, 0.25)');
    ellipse(width/2 - faceWidth/2, height/2 + 12,  35, 45);
    ellipse(width/2 + faceWidth/2, height/2 + 12,  35, 45);

    //neck
    fill(242-skin, 194-skin, 131-skin);
    rect(width/2 - 25, height/2 + faceHeight/3, faceWidth/5, faceHeight + 50);
    beginShape();
    curveVertex(width/2 - faceWidth/3, 600);
    curveVertex(width/2 - faceWidth/3, 480);
    curveVertex(width/2, height*0.8);
    curveVertex(width/2 + faceWidth/3, 480);
    curveVertex(width/2 + faceWidth/3, 600);
    endShape();

    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    ////////NOSE////////
    noFill();
    stroke('rgba(0,0,0, 0.25)');
    var noseLine = height/2 + 40;
    
    beginShape();
    curveVertex(width/2 - 20, noseLine);
    curveVertex(width/2 - 20, noseLine);
    curveVertex(width/2, noseLine + 10);
    curveVertex(width/2 + 20, noseLine);
    curveVertex(width/2 + 20, noseLine);
    endShape();


    ////////////EYES//////////
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    //eyes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize*eyeWidth, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize*eyeWidth, eyeSize);

    
    //irises
    fill(26, blu, 138);
    stroke(0);
    strokeWeight(3);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
    //pupilS
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/5, eyeSize/5);
    ellipse(eyeRX, height / 2, eyeSize/5, eyeSize/5);
    //reflection
    fill(255);
    noStroke();
    ellipse(eyeLX + 3, 1 + height / 2, eyeSize/5, eyeSize/5);
    ellipse(eyeRX + 3, 1 + height / 2, eyeSize/5, eyeSize/5);
    //eyelids
    fill(242-skin, 194-skin*1.5, 131-skin);
    stroke(0);
    strokeWeight(3);
    arc(eyeLX, height / 2, eyeSize*eyeWidth, eyeSize, PI, 0, CHORD);
    arc(eyeRX, height / 2, eyeSize*eyeWidth, eyeSize, PI, 0, CHORD);


    ////////EYEBROWS////////
    noFill();
    stroke(224, 72, 72);
    strokeWeight(brow + 3);

    if (brow < 1) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, PI, 0);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, PI, 0);
    }
    else if (brow < 2) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, 0, PI);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, PI, 0);
    }
    else if (brow < 3) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, PI, 0);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, 0, PI);
    }
    else {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, 0, PI);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, 0, PI);
    }


    ///////GLASSES////////
    noFill();
    stroke(0);
    strokeWeight(3);

    rect(width/2 - 120 , height/2 - 25, 100, 60, glasses);
    rect(width/2 + 20, height/2 - 25, 100, 60, glasses);
    line(width/2 - 20, height/2 - 10, width/2 + 20, height/2 - 10);


    /////////MOUTH/////////
    noStroke();
    var lipLine = height/2 + faceHeight/4;
    //upper lip
    fill(92,13,58);
    arc(width/2 - 10, lipLine, 30, 25, PI, 0);
    arc(width/2 + 10, lipLine, 30, 25, PI, 0);
    //bottom lip
    fill(155, 0, 55);
    arc(width/2, lipLine, 50, 40, 0, PI);

    
    ///////BANGS///////////
    noStroke();
    fill(224, 72, 72);
    var hair = height/3;
    arc(width / 2, height / 2 - 45, faceWidth + 40,  faceHeight, PI, 0);


    /////SHIRT///////
    fill(40, 16, blu);
    rect(width/2 - faceWidth/3, height*0.85, 2*faceWidth/3, 100, 20);
    fill(242-skin, 194-skin, 131-skin);
    arc(width/2, height*0.85, 80, 30, 0, PI);


        
}

function mousePressed() {
    eyeSize = random(30, 40);
    eyeWidth = random(1,2);
    blu = random(0,255);
    skin = random(1, 100);
    glasses = random(1, 50);
    cut = random(90, 260);
    brow = random(4);

}

With this project, I had a lot of fun messing with the sizes, colors, and shapes of different features. In fact, I had to restrain myself from making every object changeable for the sake of time. I also spent a solid chunk of my afternoon trying to get the eyes to move with the mouse before giving up out of frustration. Maybe next time?

Rjpark – Project 02 – Variable Faces

rjpark_variablefaces

// variables for facial feature dimensions
var eyeSize = 20;
var pupilSize = 5;
var faceWidth = 100;
var faceHeight = 150;
var mouthSize = 5;
// variables for face color
var facer = 10;
var faceg = 15;
var faceb = 20;
// variables for eye color
var eyesr = 5;
var eyesg = 10;
var eyesb = 15;
// variables for pupil color
var pupilsr = 15;
var pupilsg = 20;
var pupilsb = 25;
// variables for mouth color
var mouthr = 20;
var mouthg = 25;
var mouthb = 30;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(230);
    // face
    fill(facer, faceg, faceb);
    stroke(facer, faceg, faceb);
    strokeWeight(2);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    // locations of facial features
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    var mouth1 = width / 2.1
    var mouth2 = width / 1.9
    // eyes
    fill(eyesr, eyesg, eyesb);
    strokeWeight(2);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // pupils
    fill(pupilsr, pupilsg, pupilsb);
    strokeWeight(2);    
    ellipse(pupilLX, height / 2, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2, pupilSize, pupilSize);
    // mouth
    stroke(mouthr, mouthg, mouthb);
    strokeWeight(mouthSize);
    line(mouth1, height / 1.7, mouth2, height / 1.7);
}

// when the user clicks, these variables are reassigned
function mousePressed() {
	// variables reassigned for facial feature dimensions
    faceWidth = random(100, 300);
    faceHeight = random(100, 300);
    eyeSize = random(17, 50);
    pupilSize = random (5, 15);
    mouthSize = random (3, 13);
    // variables reassigned for eye color
    eyesr = random (0, 255);
    eyesg = random (0, 255);
    eyesb = random (0, 255);
    // variables reassigned for face color
    facer = random (0, 255);
    faceg = random (0, 255);
    faceb = random (0, 255);
    // variables reassigned for pupil color
    pupilsr = random (0, 255);
    pupilsg = random (0, 255);
    pupilsb = random (0, 255);
    // variables reassigned for mouth color
    mouthr = random (0, 255);
    mouthg = random (0, 255);
    mouthb = random (0, 255);
}

In this project, I focused on not only changing the dimensions of 3+ different facial features but also changing the color of each of of those features. I made variables for r, b, and g for each facial feature so I could randomize the colors with each click.

Vicky Zhou – Project_02 – Variable Face

sketch

/*
Vicky Zhou
Section E 
vzhou@andrew.cmu.edu
Project_02
*/ 

var eyeSize = 50;
var faceWidth = 250;
var faceHeight = 250; 
var noseWidth = 23;
var noseHeight = 40;
var noseColor = 155;
var faceColor = 320;
var lefteyeColor = 190;
var righteyeColor = 190; 
var mouthColor = 50;
var mouthWidth = 150;
var mouthHeight = 10;
var earWidth = 31;
var earHeight = 42;


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

function draw() {
	noStroke();
	background(165, 221, 208);
	//face color 
	fill(248, 206, faceColor);
	//face size
	ellipse(width / 2, height / 2, faceWidth, faceHeight);
	//variables for eye location 
	var eyeLX = width / 2 - faceWidth * 0.25; //variable for left eye location
	var eyeRX = width / 2 + faceWidth * 0.25; //variable for right eye location 
	//left eye color
	fill(55, lefteyeColor, 58);
	//left eye size
	ellipse(eyeLX, height / 2, eyeSize, eyeSize);
	//right eye color
	fill(48, 123, righteyeColor);
	//right eye size
	ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
	//nose color;
	fill(216, 173, noseColor);
	//nose size
	rect(width / 2 - noseWidth / 2, height / 2, noseWidth, noseHeight);
	//variables for mouth location
	var mouthLY = height / 2 + faceHeight*0.25 //variable for keeping mouth in center
	//mouth color 
	fill(239, 136, 120);
	//mouth size
	rect(width / 2 - mouthWidth / 2, mouthLY, mouthWidth, mouthHeight);
	
	//variables for ear location
	var earLY = height / 2;
	var earRY = height /2;
	//left ear color
	fill(248, 206, faceColor)
	//right ear color
	fill(248, 206, faceColor);
	//left ear size
	ellipse(width / 2 - faceWidth*0.53, earLY, earWidth, earHeight); 
	//right ear size 
	ellipse(width / 2 + faceWidth*0.53, earRY, earWidth, earHeight);
}

function mousePressed() {
	// changes face when user clicks
	faceWidth = random(100, 200);
	faceHeight = random(100, 250);
	eyeSize = random(10, 30);
	faceColor = random(0, 320);
	lefteyeColor = random(0, 190);
	righteyeColor = random(0, 190);
	noseColor = random(0, 155);
	noseWidth = random(10, 23);
	noseHeight = random(20, 40);
	mouthWidth = random(45, 65);
	mouthHeight = random(5, 10);
	earWidth = random(30, 31);
	earHeight = random(36, 42);
}

I had a lot of fun with this project in particular because I really enjoyed how the random process generator was able to create a wide variety (or small variety, depending on the limits constructed) of faces with each click. I spent a majority of my time fluctuating between what features I wanted to have change the most (for example, face size and color), and what features I wanted to stay more static (for example, the mouth).

Vicky Zhou – Looking Outwards – 02

Generative Neural Network produced chairs based on solely aesthetic.

Final series of four physical chairs based on GAN generated chairs

“The chAIr Project” is a series of four chairs that were inspired by a generative neural network, and then created and brought to life by designers. The data set utilized by this neural network consisted of hundreds of 20th century chair designs gathered from Pinterest. Based on this data set, the neural network system generated hundreds of chairs simply based on aesthetics, many times resulting in unpractical renditions and/or pieces that did not even resemble furniture.

I found this project really interesting because of the results that ensued due to a focus on simply the aesthetics and physical classic qualities of a chair, rather than the technical qualities, such as maximizing surface area in ratio weight distributed and so on. Because of this focus towards aesthetics, many of the chairs were completely unsuitable for actual use, and served as images for inspiration and unrestricted ideation. It was ironic to see how impractical some of these chairs became, as chairs are commonly viewed as practical, everyday products. What ties this project all together and makes it the most engaging, however, is when the two designers, Phillip Schmitt and Steffen Weiss, chose to bring some of these generated prototypes to real life. Seeing the four designs in real life brings it into our dimension of reality, and allows us to fully engage with a familiar concept repackaged in an unfamiliar form.

Elena-Deng-Variable-Faces

sketch

var eyeSize=20;
var eyeSkin=20;
var faceWidth = 120;
var faceHeight = 150;
var noseSize=20;
var noseDiff=7;
var word=0;
var wordNum=0;

var bodySize=200;



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

}

function draw() {
  background(244,187,84);

//ears
  stroke(156,171,50);
  strokeWeight(15);
  var x1=width/2-faceWidth/2-15;
  var x2=width/2+faceWidth/2+15;
  var y=height/2-noseDiff;
  line(x1,y,x2,y);

  fill(156,171,50);
  noStroke();
  triangle(x1+25,y,x1-10,y-15,x1-10,y+15);
  triangle(x2-25,y,x2+10,y+15,x2+10,y-15);

//body
  fill(220,220,200);
  ellipse(width/2,height,bodySize*1.5,bodySize*2);
  fill(68,63,52);
  rectMode(CENTER);
  rect(width/2,height,bodySize,bodySize);

//face size
  noStroke();
  fill(156,171,50);
  ellipse(width/2,height/2,faceWidth,faceHeight);
//eye
  fill(0);
  var eyeL=width/2-faceWidth/4;
  var eyeR=width/2+faceWidth/4;
  var ibagL=width/2-faceWidth/4;
  var ibagR=width/2+faceWidth/4;

  ellipse(eyeL,height/2,eyeSize+2,eyeSize);
  ellipse(eyeR,height/2,eyeSize+2,eyeSize);

  fill(156,171,50);
  ellipse(ibagL,height/2+5,eyeSize+8,eyeSize);
  ellipse(ibagR,height/2+5,eyeSize+8,eyeSize);

//nose
  fill(0);
  ellipse(width/2,height/2+noseDiff-2,noseSize,noseSize);

  fill(156,171,50);
  ellipse(width/2,height/2+noseDiff,noseSize,noseSize);

//words
var word = int(wordNum);
if (word == 1) {
    textSize(24);
    noStroke();
    fill(156,171,50);
    text("ogres are like onions", width/2, height/4);


} else if (word == 2){
    noStroke();
    textSize(24);
    fill(156,171,50);
    text("ogres are onions",width/2, height/4);

} else if (word == 3){
    noStroke();
    textSize(24);
    fill(156,171,50);
    text("ogre onions", width/2, height/4);

}
}

function mousePressed(){
  faceWidth=random(100,150);
  faceHeight=random(100,170);
  eyeSize=random(10,30);
  noseSize=random(10,25);
  bodySize=random(190,250);
  word=random(1,4);
  wordNum=random(1,4);



}

this was a fun project! I didn’t know what I was going to do when I first started but somehow I ended up with Shrek. I hope in the future I get to code more Shrek related projects.

Jenny Hu — Variable Expressions

Jenny’s Sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 02



var faceX;
var faceY;
var FOX; //face outline X and Y
var FOY;
var bunFillX;
var bunFillY = 30;
var bunOutlineX;
var bunOutlineY = 40;
var tiedBuns = 15;
var eyeX; //variable to tag the eye to the eye tops
var EBY1 = 0; //left eyebrow Y1 and Y2
var EBY2 = 0; 
var blushY= 5;
var blushRadi = 15;
var mouthNumber = 1;
var wordNumber = 0;

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

    faceX = width/2;
    faceY = height/2;
    FOX = width/2 - 15; //face outline X and Y
    FOY = height/2;
    bunFillX = width/2;
    bunFillY = 30;
    bunOutlineX = width/2;
    eyeX = FOX-270;
}

function draw() {
    background(255, 245, 240);
    angleMode(DEGREES);

    //head fill
    noStroke();
    fill(250,235,220);
    ellipse(faceX, faceY, 190, 190);


    //bun fill
    noStroke();
    fill(130);
    ellipse(bunFillX, bunFillY, 70, 70);
     //tiedBuns keep them close together
    var bunOutlineX = bunFillX + tiedBuns;
    var bunOutlineY = bunFillY + tiedBuns;


    //blush
    noStroke();
    fill(243,215,215);
    ellipse(FOX-80, (FOY+30)+blushY, blushRadi, blushRadi);
    ellipse(FOX+80, (FOY+30)+blushY, blushRadi, blushRadi);
   

    //bun outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(bunOutlineX, bunOutlineY, 70, 70);


    //mouth 
    var mouth = int(mouthNumber);
    if (mouth == 1) {
        //draw rectangle
        noStroke();
        fill(134,94,94);
        rect(FOX-20, FOY+40, 30, 10,100);

    } else if (mouth == 2){
        //draw circle
        strokeWeight(8);
        stroke(134,94,94);
        ellipse(FOX, FOY+40 ,20,20);

    } else {
        //draw smile
        strokeWeight(8);
        stroke(134,94,94);
        arc(FOX-20, FOY+30, 40, 40, 60,120);

    }


    //eyes
    noFill();
    strokeWeight(8);
    stroke(255, 153, 153);
    //LeftEye
    ellipse(FOX-eyeX, FOY-20, 23, 23);
    //RightEye
    ellipse((FOX-eyeX)+90, FOY-20, 23, 23);

    
    //top of eyes
    stroke(80);
    //Lefteye
    arc(FOX-45, FOY-5, 70, 70, 230, 320); //x, y, w, h, start, stop
    //Righteye
    arc(FOX+45, FOY-5, 70, 70, 230, 320);


    //eyebrows
    strokeWeight(15);
    stroke(183,151,151);
    //Left eyebrow
    line(FOX-50, (FOY-70) + EBY1, FOX-20, (FOY-70) + EBY2);
    //Right eyebrow
    line(FOX+50, (FOY-70) + EBY1, FOX+20, (FOY-70) + EBY2);


    //head outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(FOX, FOY, 190, 190);



    //words 
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("hot buns.", 250, 390);


    } else if (word == 2){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("salad.", 250, 390);

    } else if (word == 3){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("coffee.", 250, 390);

    } else {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("potatoes.", 250, 390);

    }


   
}

function mousePressed() {

    faceX = random(275, 350);
    faceY = random(250, 200);
    FOX = random(275, 350);
    FOY = random (225, 250);
    bunFillX = random (245, 375);
    bunFillY = random (100,100);
    bunOutlineX = random (245, 375);
    bunOutlineY = random (100,100);
    tiedBuns = random (-20,20);
    eyeX = random(25,60);
    EBY1 = random(-10,15);
    EBY2 = random(-10,15);
    blushY = random(-30,20);
    blushRadi = random(20,80);
    mouth = random(1,3);
    mouthNumber = random(1,4);
    word = random(0,4);
    wordNumber = random(0,4);
   


    
 
    
}

Huzzah! Uploaded correctly this time. (Thank you Connie!)

I had a fun time making this. I think compared to last week, it was nice to work with more complicated variables and connected pieces. While I wanted to maintain elements, the trick was to maintain the right distances of elements near one another (like hair color and outline, or eyes to eyebrows), while their elements shifted around with every click.

I think the most challenging part was adding the words. Originally, I wanted to create an array, like in the Dan Shiffman array tutorial, but I couldn’t figure out the bug. So instead, I did the same thing as the mouths— using an if-else logic.

Ean Grady-Looking Outwards-02

https://creators.vice.com/en_us/article/qkwvp7/generative-video-game-puts-you-inside-mind-bending-art-galleries

‘Strangethink’, an anonymous experimental video game designer, has created a video game, Secret Habitat, that features procedurally generated art galleries that the player can view, in his words he says that the game is, “an almost entirely procedurally-generated world consisting of hundreds of alien galleries containing thousands of pieces of computer-generated art, music and poetry”. In each of the galleries that Secret Habitat features, there are ‘reading machines’ that spit out generative poetry and also generative music. When players enter the game and walk into the gallery, they can view procedurally generated art while also listening to generative music in the background.

Strangethink says in the article that he made the game because he was curious about the effects of ambient music on the user experience, and how it affects their perception of various things. I admire the idea to use procedurally generative art and music because it allows for wildly varying tones, melodies, images to be shown therefore giving each player a different perception-based experience, which in turn allows for his creative vision to be employed. I’m very curious about what programming goes into making a procedural generator, it’s really interesting how his idea for wanting to give the user varying experiences is perfectly imagined through procedural generation.