August 2017 – Page 12 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

manuelrTestJsFile

function setup() {
    createCanvas(800, 500);
    background(220,80,100);
    text("p5.js vers 0.5.12 test.", 100, 50);
}

function draw() {
    noStroke();
    ellipse(300,200,400,200);
    fill(150,200,200);
    //fill("green")


}

I really enjoyed this project. Changing primitives to recognizable forms is nothing new to me, but the removal of a dimension and the disjunction between transforms, functions, and immediate results through a line of code, was a curve ball. I just kept the reference material close by, mocked up a sketch in Photoshop, and did my best not to nitpick.

I was having trouble with the rotate function particularly. You can see in my code that in the beginning I had no idea how it worked and just took what it gave me and tweaked the location with a translate function. Later (with the spinning things) I finally found a detailed reference on rotation.

(Oh, and next time I’ll make it a size that fits so it won’t get occluded by the side menu)

AOT01

// atraylor Section B



function setup() {

    createCanvas(600,600);
    background(255, 255, 255, );
    frameRate(60);
  }



function draw() {

  background(245);

translate(-25,0);

//hair
  fill(0, 255, 0, 200);
  noStroke();
  ellipse(179, 277, 255, 255);

  fill(0, 255, 0, 150);
  noStroke();
  ellipse(107, 161, 109, 99);

//neck

  push();
  fill(255, 0, 0, 200);
  noStroke();
  translate(220,-20);
  rotate(radians(28.16));
  rect(119, 382, 103, 107);
  pop();

//shoulder

  fill(255, 0, 0, 230);
  noStroke();
  triangle(80, 464, 181, 484, 206, 593);


//face

  fill(255, 0, 0, 200);
  noStroke();
  triangle(105, 334, 318, 247, 265, 486);


//nose
  fill(128, 128, 255, 225);
  noStroke();
  translate(-1,0);
  triangle(281,414, 298, 351, 312, 395);

//eye

  fill(0, 0, 255, 200);
  noStroke();
  triangle(251, 349, 284, 338, 278, 360);

//glasses

  stroke(0, 0, 255, 230);
  strokeWeight(10);
  line(307, 326, 293, 387);

  stroke(0, 0, 255, 200);
  strokeWeight(5);
  line(117, 316, 302, 348);

  //ear
  fill(128, 128, 255, 230);
  noStroke();
  triangle(120, 321, 148, 314, 136, 370);


  //Arm

    stroke(255, 0, 0, 255);
    strokeWeight(45);
    line(371, 605, 429, 509);

    fill(255,0,0,255);
    noStroke();
    translate(8,0);
    triangle(426, 544, 405, 600, 374, 600);

//

    push(); //square
    translate(442, 347);
    rotate(radians(frameCount));
    fill(255, 0, 0, 200);
    noStroke();
    rect(0, 0, 50, 50);
    pop();


    push(); //triangle
    translate(483, 378);
    rotate(radians( -(frameCount * 1.5)));
    fill(0, 0, 255, 200);
    noStroke();
    triangle(0, 0, 53, 17, 31, 53);
    pop();


    push(); //ellipse
    translate(533, 360);
    rotate(radians(frameCount * 1.2));
    fill(0, 255, 0, 200);
    noStroke();
    ellipse(0, 0, 43, 83);
    pop();


    fill(0, 128, 255, 80); //glow
    noStroke();
    ellipse(483, 378, 250, 250);

//

    push();
    translate(-3, 0); //translate whole hand

    push(); //palm
    fill(255,0,0,255);
    noStroke();
    rotate(radians(-16.22));
    translate(-150, 100)
    rect(404, 479, 91, 60);
    pop();

    stroke(255, 0, 0, 255); //thumb
    strokeWeight(25);
    line(466, 491, 504, 441);

    stroke(255, 0, 0, 255); //index
    strokeWeight(25);
    line(478, 509, 545, 496);

    fill(255,0,0,255);
    noStroke();
    translate(8,0);
    triangle(489, 485, 478, 509, 545, 498);

    stroke(255, 0, 0, 255);
    strokeWeight(20);
    line(545, 495, 562, 460);

    stroke(255, 0, 0, 255);
    strokeWeight(20);
    line(562, 460, 571, 429);

    stroke(255, 0, 0, 100); //middle
    strokeWeight(20);
    line(488, 496, 533, 480);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(533, 480, 555, 462);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(555, 462, 548, 430);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(538, 476, 536, 452);
    pop();



}

jamieh-Project-01-Face

sketch

function setup() {
    x = 500;
    y = 350;

 //Distance from centre
    dist = 31

    createCanvas(x, y);
    background(235, 252, 255);

//Hair 
	//Back (dark)
    fill(0, 0, 0);
    rect(168.5, 179, 159, 300);

//Shirt
	noStroke();
	fill(255, 210, 227);
	quad(145, 290, 355, 290, 365, y, 135, y);

//Neck
	noStroke();
    fill(245, 230, 203);
    rect(x/2-20, 260, 40, 30);
    quad(230, 260, 270, 260, 252, 280, 248, 280);

 //Face shape
    noStroke();
    fill(255, 244, 223);
    ellipse(x/2, y/2, 140, 180)

   
 //Hair
	//Side
	c = 12
	d = 125
	fill(51, 25, 0);
    quad(200-c, 120, 210-c, 120, 190-c, 300, 185-c, 175);
    quad(188+d, 118, 200+d, 165, 190+d, 300, 185+d, 165)
 	
    stroke(51, 25, 0);
    strokeWeight(10);
    line(306, 120, 315, 170);

 //Mouth
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2, y/2+40, 75, 50);
    fill(255, 244, 223);
    ellipse(x/2, y/2+15, 120, 70);

 //Lip colour
    noFill();
    stroke(255, 219, 228);
    strokeWeight(2);
    arc(x/2, y/2+42, 75, 45, 0, PI);

 //Cheeks
    stroke(252, 229, 238);
    strokeWeight(2);
    line(x/2-45, y/2+6, x/2-52, y/2+10);
    line(x/2-37, y/2+6, x/2-44, y/2+10);
    line(x/2-29, y/2+6, x/2-36, y/2+10);

    line(x/2+47, y/2+6, x/2+40, y/2+10);
    line(x/2+39, y/2+6, x/2+32, y/2+10);
    line(x/2+31, y/2+6, x/2+24, y/2+10);

 //Eyebrows
    fill(0, 0, 0)
    stroke(0, 0, 0);
    strokeWeight(1.5);
    arc(x/2-dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(x/2+dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    
    noStroke();
    fill(255, 244, 223);
    rect(x/2-dist-18.5, y/2-29, dist*3.2, 12)

 //Eye
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2-dist, y/2-10, 27, 25);
    ellipse(x/2+dist, y/2-10, 27, 25);

//Eyeball
	//Outer
    noStroke();
    fill(153, 90, 0);
    ellipse(x/2-dist, y/2-10, 17, 17);
    ellipse(x/2+dist, y/2-10, 17, 17);

    //Middle
    noStroke();
    fill(102, 51, 0);
    ellipse(x/2-dist, y/2-10, 11, 11);
    ellipse(x/2+dist, y/2-10, 11, 11);

    //Inner
    noStroke();
    fill(51, 25, 0);
    ellipse(x/2-dist, y/2-10, 9, 9);
    ellipse(x/2+dist, y/2-10, 9, 9);

    //Inner
    noStroke();
    fill(256, 256, 256);
    ellipse(x/2-dist-4, y/2-10-4, 4, 4);
    ellipse(x/2+dist-4, y/2-10-4, 4, 4);

    //Smile Eyes
	fill(255, 244, 223);
	ellipse(x/2-dist, y/2+0.5, 30, 10);
	ellipse(x/2+dist, y/2+0.5, 30, 10);

    //Eyelash
    noFill();
    stroke(0, 0, 0);
    strokeWeight(0.75);
    arc(x/2-dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(x/2+dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);

    noFill();
    stroke(0, 0, 0);
    strokeWeight(0.5);
    arc(x/2-dist-6, y/2-25, 8, 8, HALF_PI, PI);
    arc(x/2-dist-4, y/2-24, 5, 5, HALF_PI, PI);
    arc(x/2+dist+6, y/2-25, 8, 8, 0, HALF_PI);
    arc(x/2+dist+4, y/2-24, 5, 5, 0, HALF_PI);

//Nose
    stroke(252, 234, 208);
    strokeWeight(3);
    line(x/2, y/2-3, x/2+4, y/2+25); 
    strokeWeight(1.5);
    line(x/2+4, y/2+25, x/2-3, y/2+29);

    //Nose shadow
    stroke(255, 238, 215);
    strokeWeight(4);
    line(x/2+4, y/2-3, x/2+8, y/2+25); 
    strokeWeight(2);
    line(x/2+8, y/2+25, x/2, y/2+29);

    //Nostril
    strokeWeight(3);
    line(x/2-8, y/2+24, x/2-11, y/2+28);
    line(x/2-8, y/2+24, x/2-11, y/2+28);


//Hair
    noStroke();
    fill(51, 25, 0);
 	
 	//Sides
 	quad(217, 110, 290, 144, 311, 185, 311, 121);
 	quad(195, 112, 217, 110, 192, 160, 180, 186);
 	//fill(256, 256, 256);
 	
 	//Fringe
 	quad(186, 122, 210, 96, 240, 85, 282, 94);
 	quad(282, 94, 310, 115, 290, 144, 210, 105);
 	
 	//Top
 	noFill();
 	stroke(51, 25, 0);
 	strokeWeight(14);
 	arc(249, 167, 138, 160, PI, 0)

 	//front hair
 	stroke(51, 25, 0);
 	strokeWeight(20);
 	bezier(225, 92, 385, 70, 297, 330, 330, 340);
 	bezier(215, 100, 135, 240, 210, 350, 170, 345);

 	strokeWeight(5);
	bezier(211.5, 105, 160, 240, 215, 350, 178, 348);
  	bezier(190, 120, 135, 240, 200, 340, 165, 345);
 	bezier(215, 100, 372, 120, 290, 350, 330, 345);
 	bezier(225, 92, 395, 65, 297, 340, 330, 335);


	
	
 	


}

function draw() {
}

Looking back at my code, I only used a few geometries throughout the entire process, yet I was able to make a self-portrait. The
hardest part of the process was pinpointing the coordinates for the shapes, which got harder especially with quad that required 8 blanks to be filled and arc that required the radians.

Matthew JS File

Here is my file

sketch.js “data-width=”300″ data-height=”300”

function setup() {
    createCanvas(300, 300);
    background(200, 200, 200);
    noStroke();
    fill(135);
    ellipse(150, 150, 100, 70);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
}

Vivek Rao Test Post

vivekrao

More Test

sketch

Project1_nayeon

nayeon_project1

function setup() {
    createCanvas(300, 300);
    background(200, 200, 200);
    fill(200, 20, 78);
    noStroke();
    ellipse(150, 150, 100, 70);
}

function draw() {
}

michelle-face.js

michelle-face

function setup() {
    createCanvas(400, 500);
    background(220,168,74);
    fill(249,221,189);
    noStroke();
    ellipse(200,180,200,230)

    fill(249,221,189);
    ellipse(200,260,130,85)

    fill(245,190,164);
    ellipse(250,230,50,45)

    fill(245,190,164);
    ellipse(150, 230,50,45);

    fill(245,190,164);
    ellipse(200,230,40,65);

    fill(120,65,24);
    ellipse(200,100, 200,120);

    fill(120,65,24);
    ellipse(115,145,50,140);

    fill(249,221,189);
    ellipse(195,220,40,65);

    fill(0);
    ellipse(250,230,20,10);

    fill(245,190,164);
    ellipse(250,225,20,10);

    fill(0);
    ellipse(150,230,20,10);

    fill(245,190,164);
    ellipse(150,225,20,10);

    fill(216,126,91);
    ellipse(200,450,140,250);

    fill(120,64,24);
    ellipse(180, 150, 100, 30);

    fill(120,64,24);
    ellipse(160, 160, 100, 30);

    fill(120,64,24);
    ellipse(130, 180, 70, 30);

    fill(120,64,24);
    ellipse(300, 145, 40, 120);

    fill(249, 221, 189);
    rect(182, 280, 35, 60);

    fill(0);
    ellipse(200, 285, 20, 10);

    fill (249,221,189);
    ellipse(105, 220, 30, 50);

    fill(249,221,189);
    ellipse(300, 220, 30, 50);

    fill(161,126,81);
    rect(0, 430, 400, 80);

    fill(255);
    quad(170, 350, 230, 350, 150, 370, 250, 370);

}

I decided to experiment a lot with creating shapes through layering. For example, I made the curve of the nose by layering an ellipse the color of my skin tone, mostly covering a pink ellipse of the same size. It was challenging to make shapes that required more values, such as the quad. But I like that I was able to use it to make the design on the shirt. I feel a lot more comfortable with basic programming of shapes after this project.

jiaxinw-Project-01

sketch

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

function draw() {
    background(254,207,67);
    noStroke();
    //shadow
    fill(219, 179, 58)
    quad(width/2+40, height/3-115, width, height/2, width, height, width/2, height, )
    //shirt
    fill(243);
    quad(width/2-130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2-180, height/2+400);
    fill(220, 221, 223);
    quad(width/2+130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2+180, height/2+400);
    //neck
    fill(243, 210, 165);
    rect(width/2-30, height/2-20, 60, 30);
    arc(width/2, height/2+10, 60, 40, 0, PI);
    //hair
    fill(11);
    ellipse(width/2, height/3-25, 175, 200)
    quad(width/2+30, height/2-20, width/2+70, height/2-60, width/2+30, height/2+80)
    //face
    fill(254, 226, 205);
    ellipse(width/2, height/3, 160, 200);
    //ears
    ellipse(width/2-75, height/3, 50, 60);
    ellipse(width/2+75, height/3, 50, 60);
    //earrings
    push();
    translate(width/2-80, height/3+20)
    rotate(45);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    push();
    translate(width/2+80, height/3+20)
    rotate(315);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    //eyes
    fill(11);
    ellipse(width/2-35, height/3-15, 20);
    ellipse(width/2+35, height/3-15, 20);
    //glass
    noFill();
    strokeWeight(3);
    stroke(126, 112, 71);
    ellipse((width/2)-35,(height/3)-10, 55, 50);
    ellipse((width/2)+35,(height/3)-10, 55, 50);
    line((width/2)-6,(height/3)-15,(width/2)+6, (height/3)-15);
    line((width/2)-62,(height/3)-15,(width/2)-85, (height/3)-30);
    line((width/2)+62,(height/3)-15,(width/2)+85, (height/3)-30);
    //mouth
    noStroke();
    fill(241, 84, 75);
    arc(width/2, height/3+55, 50, 50, 0, PI);
    //nouse
    fill(226, 54, 52);
    ellipse(mouseX, mouseY, 30, 30);

}

Before I started to code, I drew a sketch to have a concrete idea of how the portrait looks like. After that, I broke down the whole picture into different simple shapes and measured the position of them. Instead of using all numbers, I used the half or 1/3 of the width and height as the unit of coordinate. For making the portrait more interesting, I had an idea of making my nose as a clown’s nose and letting it become interactive. Therefore, I made the mouse as a red nose and remove the original mouse on my portrait so that people can try to put my red nose in the right place. : )

Ean .js File Test

ean

function setup() {
    createCanvas(500, 500);
    background(120, 200, 400);
    text("p5.js vers 0.5.12 test.", 10, 15);
    noStroke ();
    fill (100, 10, 200)
    ellipse (250, 250, 200, 170);
}

function draw() {
}

Month: August 2017

manuelrTestJsFile

atraylor – Project 01 – Face

jamieh-Project-01-Face

Matthew JS File

Vivek Rao Test Post

More Test

Project1_nayeon

michelle-face.js

jiaxinw-Project-01

Ean .js File Test