sketch

//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//project1

function setup() {
    createCanvas(400, 400);
    background(220);
}

function draw() {

    fill(86, 63,2);
    noStroke();
    arc(200, 200, 200, 275, PI, 0, CHORD);
    arc(100, 200, 100, 150, 0, PI, CHORD);
    arc(300, 200, 100, 150, 0, PI, CHORD);

    fill(220)
    noStroke();
    arc(75, 200, 50, 50, 0, PI, CHORD);
    arc(325, 200, 50, 50, 0,PI, CHORD);

    fill(227, 202, 175);
    noStroke();
    ellipse(200, 200, 150, 190);

    noFill();
    strokeWeight(10);
    stroke(78, 51, 22);
    curve(135, 180, 155, 155, 175, 155, 195, 180);
    curve(200, 180, 220, 155, 240, 155, 260, 180);

    strokeWeight(5);
    line(145, 170, 180, 180);
    line(180, 180, 145, 190);
    line(215, 180, 250, 170);
    line(215, 180, 250, 190);

    fill(83,70,249);
    noStroke();
    triangle(197, 190, 180, 220, 215, 220);


    fill(255,144,144);
    noStroke();
    arc(197, 235, 60, 70, 0, PI, CHORD);

    fill(235, 233, 233); 
    noStroke();
    rect(185, 235, 10, 10);
    rect(200, 235, 10, 10);
















}

Eyyy so this is my self-portrait:

tami-self-portrait.js

function setup() {
    createCanvas(500, 500);
    background('#B7DAF4');

}

function draw() {

//head
	fill('#FFDFC8');
	noStroke();
	ellipse(250, 200, 180, 200);

//ears
	fill('#FFDFC8');
	noStroke();
	ellipse(165, 230, 40, 50);

	fill('#FFDFC8');
	noStroke();
	ellipse(335, 230, 40, 50);

//hair
	fill('#8a1B00')
	triangle(160, 170, 160, 210, 225, 170);
	triangle(225, 170, 342, 170, 342, 210);

//hat
	fill('#000a5F');
	rect(120, 150, 220, 20);

	fill('#000a5f');
	noStroke();
	arc(250, 170, 184, 170, PI, 0, CHORD);

//face
	//L
	fill(51);
	ellipse(210, 210, 10, 25);
	//R
	fill(51);
	ellipse(290, 210, 10, 25);
	//mouth
	fill('#FF556E');
	triangle(230, 240, 250, 270, 270, 240);

//body
	fill('#FFDFC8');
	rect(235, 295, 30, 20);

	//shirt
	fill('#000000');
	rect(195, 315, 110, 300);
	//sleeves
		//L
		triangle(175, 330, 195, 315, 195, 330);
		rect(175, 330, 20, 65);
		//R
		triangle(305, 330, 305, 315, 325, 330);
		rect(305, 330, 20, 65);
	//arms
	fill('#FFDFC8');
	rect(178, 395, 18, 105);
	rect(303, 395, 18, 105);

}

I decided to make the design as simple as possible to mitigate any weirdness I’d have to deal with, though I didn’t do an actual sketch beforehand. I kind of just made a mental image and then eyeballed where all the shapes should go. I’ve never coded anything before this class, so for a first try at making something nice I think this came out pretty ok!

sketchThis what I look like before I got the haircut, with signature round face and round eyes. I still found some problems to create suitable round-corner rectangular.

/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-01*/
function setup() {
    createCanvas(300, 300);
   
}

function draw() {
  fill(246,229,200);
  noStroke();
  ellipse(150,150,200,200);
  
  fill(246,229,200);
  ellipse(50,150,50,75);
  
  fill(246,229,200);
  ellipse(250,150,50,75);
  
  fill(0,0,0);
  ellipse(100,150,25,25);
  
  fill(0,0,0);
  ellipse(200,150,25,25);
  
  noFill();
  stroke(251,112,64);
  strokeWeight(8);
  curve(100,180,140,200,160,200,200,180);
 
  fill(0,0,0);
  noStroke();
  rect(50,50,200,80,80,80,0,0);
  
  fill(0,0,0);
  ellipse(150,40,50,50);
  
  fill(246,229,200);
  triangle(80,130,150,90,220,130);
  
}

sketch

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project-01

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

function draw() {
	background(255);

	strokeWeight(8);
	stroke(248, 153, 170);
	fill(254, 192, 203);
	ellipse(300, 300, 500, 500);

	//Hair
	fill(128, 24, 80);
	noStroke();
	ellipse(300, 255, 225, 290);
	rect(187.5, 265, 225, 140);

	//Face
	fill(206, 163, 121);
	noStroke();
	ellipse(300, 250, 175, 215);
	ellipse(300, 257, 150, 215);

	//Brows
	fill(90, 55, 42);
	quad(317, 225, 358, 225, 370, 230, 317, 230);
	quad(283, 225, 242, 225, 230, 230, 283, 230);

	//Eyes
	fill(255);
	stroke(0);
	strokeWeight(2);
	arc(340, 255, 35, 18, PI, TWO_PI);
	arc(260, 255, 35, 18, PI, TWO_PI);
	noStroke();
	ellipse(260, 255, 35, 12);
	ellipse(340, 255, 35, 12);
	fill(0);
	ellipse(340, 253, 16, 16);
	ellipse(260, 253, 16, 16);
	fill(255);
	ellipse(340, 253, 3, 3);
	ellipse(260, 253, 3, 3);

	//Glasses
	stroke(0);
	strokeWeight(8);
	noFill();
	rect(315, 240, 60, 40, 5, 2, 5, 13);
	rect(225, 240, 60, 40, 5, 5, 13, 2);
	line(285, 250, 315, 250);
	line(225, 250, 214, 250);
	line(375, 250, 386, 250);

	//Mouth
	stroke(196, 48, 36)
	strokeWeight(3);
	line(300, 330, 325, 320);
	line(300, 330, 275, 320);
	
	//Nose
	stroke(0);
	strokeWeight(3);
	arc(300, 295, 20, 12, TWO_PI, PI);
	
	//Hair
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(-44,43,40,140);
	pop();
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(30,115,140,40);
	pop();
}

In project I, I created a portrait of myself using basic shapes such as ellipse, rectangle, arc, etc. The challenging part of this project was to figure out the coordinate along the way requiring constant editing and refreshing.

In this exercise I used different gradients of color to create the division and collage of space and objects.sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(400, 600);
    background(235);
}

function draw() {
    strokeWeight(5);
    fill(120);
    line(80,0,80,600);

    strokeWeight(2);
    fill(150);
    line(70,0,70,600);

    strokeWeight(1);
    fill(150);
    line(70,0,70,600);

    noStroke();
    fill(210);
    ellipse(120, 130, 400, 400);

    strokeWeight(5);
    fill(200);
    ellipse(180,300,200,200);

    noStroke();
    fill(170);
    quad(150,100,280,100,320,130,100,130);

    noStroke();
    fill(150);
    arc(215,130,115,115,TWO_PI, PI);

    noStroke();
    fill(130);
    arc(215,130,95,95,TWO_PI, PI);

    noStroke();
    fill(110);
    arc(215,130,65,65,TWO_PI, PI);

    noStroke();
    fill(80);
    quad(350,450,400,450,400,470,350,470);

    noStroke();
    fill(90);
    quad(300,500,400,500,400,510,300,510);

    noStroke();
    fill(30);
    quad(250,475,400,475,400,479,250,479);

    noStroke();
    fill(120);
    quad(370,480,400,480,400,490,370,490);
   
}

sketch

function setup() {
    createCanvas(600, 600);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {

	background(223,232,240);

	//right face
	fill(240,223,230);
	noStroke();
	rect(288,0,310,286);
	rect(287,385,313,215);
	quad(288,284,600,287,600,336,354,336);
	quad(354,336,600,336,600,536,286,385);



	//brow
	noStroke();
	fill(96,57,19);
	rect(45,169,180,22);
	quad(342,177,349,197,479,150,473,129);
	quad(470,129,479,150,563,152,583,132);


	//right eye
	noStroke();
	fill(54,54,54);
	rect(373,259,171,25);

	//line
	stroke(96,57,19);
	strokeWeight(0.5);
	line(287,0,287,287);
	line(288,287,354,335);
	line(354,335,287,385);
	line(287,385,287,599);
	

	//left eye
	stroke(96,57,19);
	strokeWeight(5);
	noFill();
	ellipse(135,280,161,88);
	
	strokeWeight(1);
	line(69,236,80,249);
	line(105,216,109,239);
	line(158,222,148,238);
	line(205,231,190,249);

	//eyeball
	fill(54,54,54);
	noStroke();
	ellipse(135,280,28,82);

	//mouth
	noFill();
	stroke(54,54,54);
	strokeWeight(10);
	rect(76,418,425,110);
	
	strokeWeight(5);
	line(82,460,494,460);
	line(82,486,494,486);

	fill(242,109,125);
	noStroke();
	rect(81,462,416,23);






}

sketch-59.js

function setup() {
    createCanvas(400, 400);
    background(255,181,197);

}

function draw() {

    // Top part of hair - Arc
    fill(51,25,0);
    arc(200,125,200,200,PI,TWO_PI);

    // Main part of hair - Rectangle
    fill(51,25,0);
    rect(100,125,200,158);

    // Face - Ellipse
    fill(225,220,178);
    ellipse(200,155,150,185);

    // Nose - Triangle
    fill(225,200,100);
    triangle(190,170,210,170,200,150);

    // Top of body - Triangle
    noStroke();
    fill(0,205,205);
    triangle(150,416,198,282,246,416);

    // Eye 1 - Circle
    fill(0,0,0);
    ellipse(165,125,25,25);

    // Pupil 1 - Circle
    fill(255,255,255);
    ellipse(165,130,8,8);

    // Eye 2 - Circle
    fill(0,0,0);
    ellipse(235,125,25,25);

    // Pupil 2 - Circle
    fill(255,255,255);
    ellipse(235,130,8,8);

    // Mouth - Arc
    fill(255,250,205);
    arc(200,190,80,80,0,PI);

    // Eyebrow 1 - Rectangle
    fill(51,25,0);
    rect(155,100,18,4);

    // Eyebrow 2 - Rectangle
    fill(51,25,0);
    rect(225,100,18,4);

}

As many people have mentioned, one of the most difficult and time consuming parts of this process was figuring out the coordinates. While I did attempt to take notes as I created my portrait, ultimately, I did a lot of guessing and checking. Overall, I enjoyed the process and look forward to becoming better at coding more efficiently. This was one of the first times I’ve ever used code to create something remotely artistic, so this was really exciting!

sketch

//Christine Kim
//Section A (Tuesdays 9:00)
//haewannk@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600,600);
    background(165,205,236);
}

function draw() {
	noStroke();
	fill(255,205,140);
	ellipse(300,300,200,200);
	fill(66,31,21);
	ellipse(270,300,20,20);
	ellipse(330,300,20,20);

	stroke(66,31,21);
	strokeWeight(3);
	line(255,278,280,278);
	line(317,278,342,278);
	line(300,300,300,330);
	stroke(288,31,76)
	line(300,370,337,355);
	line(263,355,300,370);
	stroke(199,123,165);
	line(245,330,260,330);
	line(340,330,355,330);
	noStroke();
	push();
	translate(347,240);
	rotate(40);
	fill(142,32,21)
	ellipse(0,0,50,128);
	pop();
	push();
	translate(255,240);
	rotate(70);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(203,320);
	rotate(60);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(208,400);
	rotate(50);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();
	push();
	translate(395,315);
	rotate(116);
	fill(142,31,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(377,400);
	rotate(123);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();


}

click to generate new face

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

function draw() {
      noStroke();
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,450,100,100);
      noLoop();
}
function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

this is more abstract than I want it to be, but it took me like 5 hours to figure out how to do this. I was trying to use variables, but I couldn’t get them to work, so I made this instead.

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project-01



function setup() {
    createCanvas(600, 600);
    background(0,204,204);
}

function draw() {
	noStroke();
	//background hair
	fill(202,179,62);
	ellipse(width/2,height/2+100,400,630);
	//face base
	fill(255,218,185);//neck
	rect(width/2 - 80, height/2 +100,160,340);
	fill(75,75,75);
	ellipse(width/2,height/2+10,290,375); //shadow
	fill(255,218,185);//face
	ellipse(width/2,height/2,300,380);
	//shoulders 
	fill(255,218,185);
	ellipse(width/2,height/2+306,434,180);
	//shirt
	fill(153,0,0);
	rect(168,588,257,40);
	stroke(153,0,0);
	strokeWeight(18);
	strokeCap(SQUARE);
	line(168,532,168,600);	//left strap
	line(430,532,430,600);
	//face
	//eyes
	fill(0);
	noStroke();
	ellipse(width/2 - 55,height/2 - 25,44,26);
	ellipse(width/2 + 55,height/2 - 25,44,26);
	fill(255);
	noStroke();
	ellipse(width/2 - 55,height/2 -20,40,28);//left
	ellipse(width/2 + 55,height/2 -20,40,28);//right
	fill(0,140,180);//iris
	ellipse(width/2 - 55,height/2 -18,20);//left
	ellipse(width/2 + 55,height/2 -18,20);//right
	fill(0);//pupils
	ellipse(width/2 - 55,height/2 -18,12);//left
	ellipse(width/2 + 55,height/2 -18,12);//right
	//nose
	stroke(223,184,150);
	strokeWeight(4);
	line(width/2,height/2 - 2,width/2 + 9,height/2 +66);
	line(width/2 - 14,height/2 + 66,width/2 + 11,height/2 +66);
	//mouth
	fill(219,111,111);
	noStroke();
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+24,height/2+106);
	triangle(width/2+8,height/2+120,width/2+20,height/2+120,width/2+40,height/2+90);
	fill(239,133,133);
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+20,height/2+122);
    triangle(width/2+16,height/2+122,width/2+22,height/2+122,width/2+40,height/2+90);
    //bangs
    fill(202,179,62);
    ellipse(width/2,height/2 -156,200,70);
    triangle(width/2 -174,height/2-10,width/2+25,height/2-122,width/2-30,height/2-155);
    triangle(width/2 -174,height/2-10,width/2-110,height/2-150,width/2-20,height/2-155);
    triangle(width/2 +174,height/2-25,width/2+25,height/2-122,width/2+110,height/2-161);

    noLoop();
}