Month: September 2016

sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthsize=30;
var nosesize=20;
var eyecolor=0;
var colorR=20;
var colorG=20;
var colorB=20;
var light1=20;
var light1X=10;
var light1Y=10;
var light2=50;
var light2X=250;
var light2Y=20;
var light3=100;
var light3X=400;
var light3Y=300;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(colorR,colorG,colorB);
    fill(243,215,198);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //face
    fill(0);
    rect(width/2-15,height/2-faceHeight/2,30,40);
    //hair
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyecolor);
    ellipse(eyeLX, height / 2-15, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2-15, eyeSize, eyeSize);
    //eyes\
    fill(247,196,152);
    ellipse(width/2,height/2,eyeSize-5,eyeSize+5);
    //nose
    fill(232,0,0);
    ellipse(width/2,height/2+50,nosesize,nosesize);
    //mouth
    fill(200);
    rect(width/2-faceWidth/2,height/2+faceHeight/2,faceWidth,200);
    //shirt (body)
    fill(163,98,81);
    ellipse(width/2,height/2+faceHeight/2+50,10);
    ellipse(width/2,height/2+faceHeight/2+100,10);
    //buttons
    fill(255,colorR,colorG,colorB);
    ellipse(light1X,light1Y,light1);
    ellipse(light2X,light2Y,light2);
    ellipse(light3X,light3Y,light3);
    //party lights

}
 
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(100, 200);
    faceHeight = random(150, 200);
    eyeSize = random(10, 30);
    mouthsize=random(10,50);
    nosesize=random(10,30);
    eyecolor=random(0,150);
    colorR=random(0,255);
    colorG=random(0,255);
    colorB=random(0,255);
    light1=random(0,200);
    light2=random(100,200);
    light3=random(0,80);
    light1X=random(0,50);
    light1Y=random(0,480);
    light2X=random(400,600);
    light2Y=random(0,480);
    light3X=random(420,600);
    light3Y=random(200,480)
}

This is Sushi Head Man at a party.

sketch

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//this program generates different faces of yound women


//setting up the variables and the default image (no mouse pressed)
var headpar = 150;
var mouthpar = 20;
var neckl = 50;
var bodwidth = 130;
var bodheight = 600;
var bulbstroke = 0;
var browarch = 40;
var eyestroke = 7;
var eyeht = 250;
var vertexX = 350;
var vertexY = 100;
var noi = 5;

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

function draw() {
  background(245,231,146);//creating the notebook effect
  var noteline1 = color(212,201,140);
  stroke(noteline1);
  line(0,40,480,40);
  line(0,80,480,80);
  line(0,120,480,120);
  line(0,160,480,160);
  line(0,200,480,200);
  line(0,240,480,240);
  line(0,280,480,280);
  line(0,320,480,320);
  line(0,360,480,360);
  line(0,400,480,400);
  line(0,440,480,440);
  line(0,480,480,480);
  line(0,520,480,520);
  line(0,560,480,560);
  line(0,600,480,600);
  var noteline2 = color(195,159,105);
  stroke(noteline2);
  line(80,0,80,640);
  line(85,0,85,640);

  var ballpt = color(52,57,136);//created the doodle face
  noFill();
  stroke(ballpt);
  strokeWeight(5);
  ellipse(290,250,headpar,1.25*headpar);//headshape
  ellipse(290-headpar/2+70,280,mouthpar,mouthpar);//mouthshape

  line(290,250+1.25*headpar/2,290, 250+1.25*headpar/2+neckl);//neckline_1
  line(290+noi,250+1.25*headpar/2,290+noi, 250+1.25*headpar/2+neckl);//neckline_2

  ellipse(290,250+1.25*headpar/2+neckl+bodheight/2,bodwidth,bodheight);//body
  ellipse(290,250+noi+1.25*headpar/2+neckl+bodheight/2,bodwidth-noi,bodheight-noi);

  arc(250,230,browarch,browarch,PI+QUARTER_PI, TWO_PI-QUARTER_PI);//left brow
  arc(320,230,browarch,browarch,PI+QUARTER_PI, TWO_PI-QUARTER_PI);//right brow

  strokeWeight(eyestroke);//eyes
  line (235,eyeht,255,eyeht);
  line (315,eyeht,335,eyeht);

  //a bulb will appear when the person gasps, so will the eyes open up
  // have fun clicking! :D
    if (mouthpar>35) {
      bulbstroke = 3;
      eyestroke = 25;
      strokeWeight(2);
      textSize(20);
      text("Eureka!",vertexX-150,vertexY-20);
      noFill();
      stroke(ballpt);//the bulb will not appear if the mouth is not open wide enough
      strokeWeight(bulbstroke);
      beginShape();
      vertex(vertexX,vertexY);
      vertex(vertexX+15,vertexY);
      vertex(vertexX+15,vertexY+20);
      vertex(vertexX, vertexY+20);
      endShape(CLOSE);
      line(vertexX,vertexY+10,vertexX+15,vertexY+10);
      ellipse(vertexX+15/2, vertexY-25,50,50);//the outer ellipse
      ellipse(vertexX+15/2, vertexY-15,15,30);//the inner ellipse
    }
    if (mouthpar<35) {
      bulbstroke = 0
      eyestroke = 7;
    }
}

//generating doodles
function mousePressed() {
  headpar = random(130,180);
  mouthpar = random(10,40);
  neckl = random (40,60);
  bodwidth = random (100,200);
  browarch = random (35,45);
  noi = random (-15,15);
  eyeht = random(245,255);
  //the light bulb shows up around the figure's head
  vertexY = random (80,120);
  vertexX = random (150,400);

}

This project was inspired by the ballpoint doodles I used to draw on my notes. I recreated the notebook background and the stroke color according to an online picture. A user can play with the doodle by clicking until the light bulb appears, signifying the “eureka” moment.

generative-faces

//Owen Fox
//Section C
//olf@andrew.cmu.edu
//generative faces
var rectX = 300;
var rectY = 300;
var eyeX = 100;
var eyeY = 50;
var eyeball = 20;
var mW = 100;
var mH = 20;
var n = 25

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

function draw() {
    var w = width/2;
    var h = height/2;
    background(120);
    //head
    fill("#ff0080");
    rectMode(CENTER);
    noStroke();
    rect(w,h,rectX,rectY);
    //eyes
    fill("#ffe6f2");
    ellipse(w-100,h,eyeX,eyeY);
    ellipse(w+100,h,eyeX,eyeY);
    //eyeballs
    fill("#660033");
    ellipse(200,300,eyeball,eyeball);
    ellipse(400,300,eyeball,eyeball);
    //nose
    fill("#e60073")
    quad(w-n,h-2*n,w+n,h-2*n,w+2*n,h+2*n,w-2*n,h+2*n);
    fill("#b30059");
    quad(w-n,h-2*n,w,h-2*n,w,h+2*n,w-2*n,h+2*n);
    //mouth
    fill("#ff99cc");
    rect(width/2,height/2+rectY/3,mW,mH,mH/2);

}

function mousePressed() {
    rectX = random(150, 450);
    rectY = random(150, 450);
    eyeX = random (50,150);
    eyeY = random (25,75);
    eyeball = random (10,30);
    n = random (15,35);
    mW = random (75,125);
    mH = random (15,35);
}

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//Project-02

var hairSpike = 100;
var skinColorR = 194;
var skinColorG = 141;
var cheekBone = 480;
var chinLength = 420;
var noseLength = 150;
var eyeX = 20;
var eyeY = 20;
var smileFactor = 350;


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

function draw() {
	background(165, 170, 247);
	//creates blue background
//HAIR
    noStroke();
    fill("yellow");
    beginShape();
    curveVertex(200, 200);
    curveVertex(200, 200);
    curveVertex(hairSpike, 50);
    curveVertex(200, 70);
    curveVertex(hairSpike+170, 10);
    curveVertex(305, 40);
    curveVertex(hairSpike+240, 5);
    curveVertex(350, 70);
    curveVertex(hairSpike+430, 30);
    curveVertex(500, 80);
    curveVertex(hairSpike+530, 140);
    curveVertex(200, 200);
    curveVertex(200, 200);
    endShape(CLOSE);
    //defines protruding points of hair

//bust
	noStroke();
	fill(200, 110, 40);
	beginShape();
	curveVertex(80, 480);
	curveVertex(80, 480);
	curveVertex(110, 410);
	curveVertex(300, 380);
	curveVertex(410, 410);
	curveVertex(550, 480);
	endShape(CLOSE);
	//draws bust

//FACE
	noStroke();
	fill(skinColorR, skinColorG, 159); 
	//defines skin color with a set blue value
	
	beginShape();
	curveVertex(240, 150);
	curveVertex(240, 150);
	curveVertex(300, 50);
	curveVertex(360, 100);
	curveVertex(cheekBone, 200);
	curveVertex(400, 300);
	curveVertex(300, chinLength); //defines lower end point of chin
	curveVertex(240, 380);
	curveVertex(noseLength, 200); //defines nose length
	curveVertex(240, 150);
	curveVertex(240, 150);
	endShape();
	//draws facial contour

	stroke(skinColorR/2, skinColorG/2, 159);
	strokeWeight(4);
	beginShape();
	curveVertex(240, 380);
	curveVertex(240, 380);
	curveVertex(noseLength, 200);
	curveVertex(300, 90);
	curveVertex(300, 90);
	endShape();
	//draws line around the nose

//EYES
	noStroke();
	fill(255);
	ellipse(300-(eyeX/2), 90, eyeX, eyeY);
	ellipse(300+(eyeX/2), 90, eyeX, eyeY);
	fill(0)
	ellipse(300-(eyeX/2), 90, 10, 10);
	ellipse(300+(eyeX/2), 90, 10, 10);
	//defines the size of eyes

//MOUTH
    stroke(255, 180, 0);
    fill(255, 100, 0);
    triangle(230, 300, smileFactor, 350, 310, smileFactor);
    //defines two poins of triangular mouth	
}

function mousePressed() {
	hairSpike = random(50, 150);
	skinColorR = random(0, 255);
	skinColorG = random(0, 255);
	cheekBone = random(400, 500);
	chinLength = random(400, 460);
	noseLength = random(70, 200);
	eyeX = random(10, 60);
	eyeY = random(10, 40);
	smileFactor = random(270, 380);
}

For this project, I tried to practice as much freedom I can with making the portrait. Compared to the first project, I now had a grasp of what JavaScript could manage to do, and expressed it with the random features of the “Ever-changing man”

sketch

//Sarah Ransom
//Section C 
//sransom@andrew.cmu.edu
//Self Portrait

var lefteyeHeight = 20
var righteyeHeight = 20
var faceHeight = 220
var noseHeight = 30
var mouthWidth = 30



function setup() {
    createCanvas(640, 480);
    background(255,204,150);
}

function draw() {
	noStroke();
	fill("brown");
	ellipse(200,280,60,300); //ponytail in the background

	noStroke();
	fill(255, 240, 173);
	ellipse(200,250,200,faceHeight); //face
	
	noStroke();
	fill("brown");
	arc(200, 230, 200, 180, PI, TWO_PI, OPEN); //bangs

	noStroke();
	fill("brown");
	ellipse(200,140,50,50); //"ponytail bump"

	noStroke();
	fill('#222222');
	ellipse(160,250,lefteyeHeight,30); // left eye

	noStroke();
	fill('#222222');
	ellipse(240,250,righteyeHeight,30); // right eye

	noStroke();
	fill("red");
	arc(200,280,noseHeight,40,0,PI); // nose

	noFill();
	stroke(0);
	strokeWeight(3);
	arc(210,320,mouthWidth,10,0,HALF_PI); //mouth

	noFill();
	stroke(0);
	strokeWeight(2);
	arc(160,265,20,7,0,PI); // left eye bag

	noFill(); // right eye bag
	stroke(0);
	strokeWeight(2);
	arc(240,265,20,7,0,PI);
}

function mousePressed() {
	lefteyeHeight = random(10,50);
	righteyeHeight = random(10,50);
	noseHeight = random(20,40);
	mouthWidth = random(10,70);
	

}

I wanted to avoid changing the head size since it fit perfectly with the hair so, instead, I went for making the facial features as variable as possible without changing their original colors. This resulted in eyes that change size independently of each other as well as the width of the nose and mouth changing at random.