Category: Project Week 1

Dave Portrait.js

function setup() {
    createCanvas(600, 500);
    background(211,192,163);
  
}

function draw() {
    strokeWeight(0.8);
    line(202,93,165,124);
    line(199,118,152,138);
    line(180,148,152,176);
    
    //Eyes
    var c = color (57,22,15);
    fill(c);
    noStroke();
    triangle(190,190,223,185,223,195);
    triangle(223,195,223,185,253,190);
    triangle(339.52,190,364.33,185,364.33,195);
    triangle(364.33,195,364.33,185,394.52,190);
    noFill();
    var c = color (0,0,0);
    stroke(c);
    strokeWeight(4);
    //nose
    line(294.82,195,294.82,273.5);
    strokeWeight(2);
    line(308,206.33,327,278);
    strokeWeight(0.5);
    ellipse(298,283,47,4);
    strokeWeight(1.4);
    //chin
    line(180.29,334.9,273,405.5);
    line(322,403,411.2,336.9);
    //lips side
    strokeWeight(0.6);
    line(259.13,336.34,282.13,342.34);
    line(309,341,335,335);
    noStroke();
    //lips
    var c = color(169,79,79);
    fill(c);
    triangle(285.08,337.44,306.05,337.44,295.56,342.54);
    noFill();
    var c = color(0,0,0);
    stroke(c);
    //side hair
    strokeWeight(1.6);
    line(140.07,195.83,151.95,210.17);
    line(432.28,211,443.13,195);
    strokeWeight(1);
    //hair
    line(426.57,154.59,440.84,187.59);
    line(417.53,167,397.5,97);
    strokeWeight(2.2);
    line(270.63,115,241,144);
    line(294.82,162,275,154);
    strokeWeight(1.2);
    line(316.5,93,284.91,93);
    strokeWeight(1.4);
    line(232,106,188,162);
    strokeWeight(1.3);
    line(375,146,358,129);




 
   
}

For this self Portrait project, I wanted to create fragmented  geometry to express the shape of the face. I intentionally tried using few complete geometries such as rectangle, circles, and etc. I instead used variation in stroke to illustrate bit of depth.

Instructions: Move the mouse around the screen to wake up the face.

miller_portrait

function setup() {
    createCanvas(300,300);

}

function draw() {
    background(32,50,126);

    ellipseMode(CENTER);
    noStroke();
    fill(255,203,70);
    //face(sun)
    ellipse(mouseX,mouseY,325,325);
    //mouse gets close to center(sunrise)
    if(dist(mouseX,mouseY,150,150)<15)
    {
	if(mouseIsPressed){
	    //eyes bug out
	    fill(255);
	    ellipse(90,125,70,70);
	    ellipse(210,125,70,70);
    
	    fill(0);
	    ellipse(random(85,95),random(120,130),60,60);
	    ellipse(random(205,215),random(120,130),60,60);
	}else{
	    //normal eyes
	    fill(255);
	    ellipse(90,125,40,40);
	    ellipse(210,125,40,40);
    
	    fill(0);
	    ellipse(90,125,30,30);
	    ellipse(210,125,30,30);
	    text("Click!",140,290);
    }
    }else{
	//eyes open as as mouse moves closer to center(wakes up)
	fill(255);
	ellipse(90,125,40,35/(dist(mouseX,mouseY,150,150)-14)+5);
	ellipse(210,125,40,35/(dist(mouseX,mouseY,150,150)-14)+5);
    
	fill(0);
	ellipse(90,125,30,25/(dist(mouseX,mouseY,150,150)-14)+5);
	ellipse(210,125,30,25/(dist(mouseX,mouseY,150,150)-14)+5);
	//sleep
	text("ZZZ",143,290);
    }
    //mouth moves as mouse moves closer to center(talking)
    fill(0);
    ellipse(150,200,150/(abs(150-mouseX)+1),90/(abs(150-mouseY)+1));
    //outline of face to suggest people to fill it with circle
    noFill();
    strokeWeight(15);
    stroke(0);
    ellipse(150,150,325,325);
    
}

I suppose my project is more of an emotional self-portrait than an accurate depiction of my appearance, focused more on metaphor than realism.  As you move the mouse closer to the center of the screen, not only does the face form, but everything brightens and daytime comes, waking up the face for the learning that is to be had.  By wiggling the mouse a little bit, you can make the mouth move, showing that talking is possible, but it will take controlled effort.  And when the mouse is in the center of the screen, clicking causes the face to get super excited, showing how it feels to be here.  Overall, the project was fun to work on, and I found it fulfilling to explore different avenues to complete it.

shan_test

function setup() {
    createCanvas(300, 300);
    background(240);
}

function draw() {
    var radius = 1/3*width;
    fill("lightblue");
    noStroke();
    ellipse(width/2, height/2, radius, radius);
}