Project-01-Face – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 1 – Portrait Project

Cole — Mon, 19 Sep 2022 13:30:48 +0000

For this project, I used different shapes to make a self-portrait.

 function setup() {
}
 function setup() {
  createCanvas(300, 300);
   background(253);
}
//Background
  function draw() {
    background(206, 193, 232);
    strokeWeight(0)
    fill(153, 134, 191,150);
    circle(50,150,200);
    fill(182, 139, 214,150);
    circle(150,190,200);
    fill(163, 116, 158,100);
    circle(220,90,200);
    fill(224, 112, 212,90);
    circle(60,20,200);
    fill(224, 112, 212,90);
    circle(300,220,200);
    fill(153, 134, 191,50);
    circle(100,250,200);
    
//Face Outline
    fill(242, 196, 177);
    stroke(103,74,43);
    strokeWeight(4);
    beginShape();
    vertex(95, 95);
    vertex(77, 140);
    vertex(80, 146); 
    vertex(77, 158);   
    vertex(95, 246);
    vertex(120, 270); 
    vertex(155, 265);
    vertex(185, 225);  
    vertex(197, 168);
    vertex(195, 148); 
    vertex(175, 92); 
    endShape(CLOSE);

//Nose
    stroke(103,74,43);
    strokeWeight(4);  
    line(130, 160, 115, 155);
    line(123, 200, 130, 160);
    line(123, 200, 131, 202);
    
//Mouth
    bezier(150, 232, 145, 235, 125, 225, 108, 234);

//Eye Sockets
    stroke(255,255,255);
    fill(255,255,255);
    arc(107, 170, 20, 13, 0, PI + QUARTER_PI, CHORD);
    fill(255,255,255);
    arc(151, 164, 24, 25, 0, HALF_PI + QUARTER_PI, CHORD);
 
//Iris
    stroke(185,143,61);
    fill(185,143,61);
    arc(110, 169, 8, 8, 0, PI + QUARTER_PI, CHORD);
    stroke(185,143,61);
    fill(185,143,61);
    arc(151, 166, 9, 13, 0, HALF_PI + QUARTER_PI, CHORD);

//Eyebrows
    noFill();
    stroke(90,48,11);
    strokeWeight(8);
    curve(140, 126, 180, 136, 145, 155, 193, 121);
    stroke(90,48,11);
    curve(110, 136, 115, 156, 80, 140, 120, 150);
    
//Hair
    strokeWeight(5);
    fill(105, 88, 44);
    stroke(79, 54, 36);
    quad(195,176,185,155,162,123,190,128)
    beginShape();
    vertex(182,106);
    vertex(190,108);
    vertex(192,110);
    vertex(193,112);
    vertex(196,118);
    vertex(197,123);
    vertex(198,130);
    vertex(199,135);
    vertex(200,136);
    vertex(201,138);
    vertex(202,140);
    vertex(201,140);
    vertex(199,139);
    vertex(190,138);
    endShape();
    triangle(164,101,178,119,180,75)
    beginShape();
    vertex(150, 113);
    vertex(159, 114);
    vertex(170, 108);
    vertex(165, 98);
    vertex(163, 94);
    vertex(160, 90);
    vertex(150, 85);
    vertex(145, 80);
    vertex(135, 76);
    vertex(125, 74);
    vertex(115, 70);
    vertex(110, 65);
    vertex(111, 70);
    vertex(115, 76);
    vertex(120, 84);
    endShape();
    beginShape();
    vertex(74, 78);
    quadraticVertex(180, 90, 160, 110);  
    quadraticVertex(180, 110, 160, 130);
    endShape();
    line(75,79,90,90)
    beginShape();
    vertex(100, 90);
    quadraticVertex(180, 100, 120, 130);
    quadraticVertex(20, 180, 80, 180);
    vertex(80, 180);
    vertex(100, 90);
    quadraticVertex(10, 100, 50, 130);
    quadraticVertex(20, 180, 80, 180);
    vertex(80, 180);
    endShape();
    arc(188, 115, 45, 20, 20, PI + QUARTER_PI);
    arc(165, 115, 45, 10, 160, 300, HALF_PI + QUARTER_PI);
    stroke(105, 88, 44);
    strokeWeight(7);
    line(99,95,88,141)
    
    
    
}

Project 01

natalie — Sun, 11 Sep 2022 18:53:11 +0000

This is my project

sketch

//Natalie Koch; Section A

function setup() {
    createCanvas(200, 300);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(72,85,101);
    fill(167,153,86)
    ellipse(width/2,170,180,230)
    fill(231,213,165)
    rect(80,150,40,150)
    ellipse(width/2,height/2,125,150);
    triangle(100,150,92,180,108,180)
    fill(174,149,186)
    ellipse(100,299,199,100)
    fill(255)
    ellipse(70,150,28,28)
    ellipse(130,150,28,28)
    fill(122,136,170)
    ellipse(70,150,15,15)
    ellipse(130,150,15,15)
    fill(0)
    ellipse(70,150,8,8)
    ellipse(130,150,8,8)
    fill(255)
    ellipse(72,148,5,5)
    ellipse(132,148,5,5)
    fill(201,147,157)
    ellipse(100,200,40,10)
    fill(0)
    line(55,130,75,127)
    line(125,127,145,130)
    line(80,199,120,199)
}

SydneyCha-Project-01-Face

secha@andrew.cmu.edu — Sat, 10 Sep 2022 11:34:10 +0000

//Sydney Cha
//Section D

function setup() {
    createCanvas(400, 500);
    background(225);
    noStroke();
}

function draw() {
    noStroke();
  
    fill(73, 63, 47);
    triangle(270, 100, 300, 150, 280, 300); //hairside

    fill(73, 63, 47);
    triangle(90, 100, 80, 200, 200, 200); //hairsnippet

    fill(73, 63, 47);
    ellipse(70, 180, 70, 100); //hairbun

    fill(252, 240, 222);
    ellipse(190, 210, 200, 230); //facebase

    fill(252, 240, 222);
    quad(280, 250, 260, 320, 230, 330, 190, 325); //chin

    fill(252, 240, 222);
    quad(130, 250, 220, 300, 160, 390, 80, 360); //neck

    fill(240, 230, 210);
    quad(250, 220, 270, 250, 265, 260, 245, 265); //nosebase

    fill(240, 230, 210);
    ellipse(205, 215, 50, 35); //lefteyebase

    fill(240, 230, 210);
    ellipse(275, 210, 25, 30); //righteyebase

    fill(102, 94, 89);
    quad(170, 197, 190, 190, 230, 192, 230, 200); //lefteyebrow

    fill(102, 94, 89);
    quad(260, 198, 262, 190, 280, 189, 290, 195); //righteyebrow

    fill(193, 104, 115);
    quad(250, 280, 263, 280, 258, 295, 230, 290); //lips

    fill(102, 94, 89);
    triangle(200, 130, 70, 170, 110, 300); //hairbottom

    fill(102, 94, 89);
    triangle(80, 170, 140, 80, 270, 100); //hairtop

    fill(102, 94, 89);
    triangle(270, 100, 220, 120, 290, 200); //hairbangs

    fill(244, 194, 194);
    arc(195, 165, 230, 210, PI, TWO_PI); //capbase

    fill(244, 194, 194);
    quad(300, 160, 380, 170, 370, 180, 195, 165); //capextension

    stroke(1);
    strokeWeight(1);
    
    fill(250);
    arc(210, 220, 40, 30, PI, TWO_PI); //lefteye

    fill(250);
    arc(277, 218, 25, 30, PI, TWO_PI); //righteye

    fill(73, 63, 47);
    ellipse(215, 213, 18, 16); //leftpupil

    fill(73, 63, 47);
    ellipse(276, 211, 15, 15); //rightpupil
    }

Blog 01

fom@andrew.cmu.edu — Fri, 09 Sep 2022 20:09:29 +0000

Neri Oxman – architect, artist, professor – focuses on work that
combines design, biology, computing, and materials engineering.
Of her many projects, all pushing the boundaries of biology and
art, I have always been particularly fascinated by
Silk Pavilions I and II – a series of silkworm spun installations
that, beyond their visual impact, explore sustainable methods of
spinning, weaving, and making silk without the use of cocoons.
Silk Pavilion I, designed by her research team
(and 6500 live silkworms) was constructed over a period of
three weeks, all with the help of a robotic loom-like jig and
a CNC machine to make the 26 polygonal panels as a base structure
for the silkworms to begin laying their silk upon. Her Silk Pavilions,
along with the rest of her work, point to a future of
interdisciplinary and interspecies work that aims to solve
sustainability challenges – like some of the techniques used to
make silk that requires silkworms to be boiled.

Silk Pavilion I: https://oxman.com/projects/silk-pavilion-i
Silk Pavilion II: https://oxman.com/projects/silk-pavilion-ii

Project 01

fom@andrew.cmu.edu — Fri, 09 Sep 2022 20:08:02 +0000

Here is my self portrait.

function setup() {
    createCanvas(500, 500);
    background(252, 181, 104); // background orange
}

function draw() {
	// ornament
	strokeWeight(3);
	stroke(255);
	fill(116, 203, 200); //teal stripe
	rect(225, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(79, 141, 241); // blue stripe
	rect(135, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 190, 214); // pink stripe
	rect(45, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(192, 226, 148); // green stripe
	rect(315, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 246, 140); // yellow stripe
	rect(405, 0, 45, 500);

	// hair
	noStroke();
	fill(40, 24, 15); // hair color
	ellipse(250, 250, 380, 420);
	noStroke();
	fill(40, 24, 15);
	rect(60, 250, 380, 300);
	noStroke();
	fill(40, 24, 15);
	triangle(20, 500, 90, 405, 90, 500);
	noStroke();
	fill(40, 24, 15);
	triangle(480, 500, 410, 405, 410, 500);

	// ears
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(100, 260, 60, 80);
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(400, 260, 60, 80);

	// neck
	strokeWeight(5);
	stroke(247, 150, 107); // shadow color edge
	fill(244, 218, 188); // shadow color
	rect(185, 415, 125, 100);

	// face
	strokeWeight(5);
	stroke(247, 150, 107); // skin color edge
	fill(255, 237, 213); // skin color
	ellipse(250, 250, 300, 365);

	// eyes
	strokeWeight(3);
	stroke(0, 34, 68); // eye color edge
	fill(238, 239, 248); // eye color
	ellipse(190, 230, 75, 55);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(238, 239, 248); 
	ellipse(310, 230, 75, 55);

	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1); // iris color
	circle(190, 225, 45);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1);
	circle(310, 225, 45);

	noStroke();
	fill(0); // pupil color
	circle(310, 225, 15);
	noStroke();
	fill(0);
	circle(190, 225, 15);

	strokeWeight(10);
	stroke(255); // reflection color
	point(195, 220);
	strokeWeight(10);
	stroke(255);
	point(315, 220);

	strokeWeight(7);
	stroke(0, 34, 68); // eyelash color
	line(190, 205, 190, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(310, 205, 310, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(172, 210, 172, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(328, 210, 328, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(208, 210, 208, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(292, 210, 292, 190);

	// glasses
	strokeWeight(6);
	stroke(82, 76, 69); // glasses color
	noFill();
	ellipse(175, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	noFill();
	ellipse(325, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	line(237, 225, 263, 225);

	// bangs
	noStroke();
	fill(40, 24, 15); // bang color
	square(200, 60, 100, 15);
	noStroke();
	fill(40, 24, 15);
	square(129, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	square(290, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	rect(155, 70, 190, 60);

	// eyebrows
	noStroke();
	fill(0); // eyebrow color
	triangle(205, 180, 205, 160, 140, 180);
	noStroke();
	fill(0);
	triangle(295, 180, 295, 160, 360, 180);

	//nose
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(230, 306, 24);
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(270, 306, 24);

	strokeWeight(5);
	stroke(247, 150, 107);
	fill(255, 237, 213);
	circle(250, 307, 27);

	noStroke();
	fill(255, 237, 213);
	ellipse(250, 298, 30, 40);

	// mouth
	strokeWeight(8);
	stroke(229, 162, 153); // lip color
	fill(255); // teeth color
	arc(250, 340, 155, 100, 0, HALF_PI)
	strokeWeight(8);
	stroke(229, 162, 153);
	fill(255);
	arc(250, 340, 155, 100, HALF_PI, PI);
	strokeWeight(8);
	stroke(229, 162, 153);
	line(175, 340, 325, 340);

	// earrings
	strokeWeight(3);
	stroke(224, 135, 73); // earrings edge color
	fill(232, 190, 64); // earrings color
	rect(80, 290, 25, 60, 20);
	strokeWeight(3);
	stroke(224, 135, 73);
	fill(232, 190, 64);
	rect(395, 290, 25, 60, 20);

	strokeWeight(4);
	stroke(255); // earrings reflection color
	fill(255);
	rect(88, 300, 2, 32, 10);
	strokeWeight(4);
	stroke(255);
	fill(255);
	rect(403, 300, 2, 32, 10);

}

Project 1: My Self Portrait

joanlee — Fri, 09 Sep 2022 18:20:47 +0000

The most challenging part was figuring out the math for the arc shapes and matching them up to the rest of my face.

sketch

/*
    Joan Lee
    Section D
*/

function setup() {
    createCanvas(300, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(200);

    //hair behind face
    noStroke();
    fill(53, 25, 15);
    rect(65, 100, 170, 300);
    ellipse(70, 260, 70, 350);
    ellipse(230, 260, 70, 350);     //background hair
    ellipse(115, 120, 120, 130);
    ellipse(185, 120, 120, 130);
  
     //body
    fill(223, 205, 230);
    triangle(150, 200, 230, 400, 70, 400);

    //face
    fill(250, 230, 180);
    noStroke();
    quad(75, 100, 225, 100, 230, 230, 70, 230);     //head
    quad(70, 230, 230, 230, 165, 285, 135, 285);    //jaw

    //eyebrows
    stroke(73, 45, 35);
    strokeWeight(5);
    line(171, 150, 206, 152);
    line(94, 152, 129, 150);

    //eyes
    fill(245, 245, 245);
    stroke(0);
    strokeWeight(3);
    arc(110, 180, 35, 25, PI, TWO_PI);
    arc(185, 180, 35, 25, PI, TWO_PI);  //eyeballs and lash line
    fill(63, 35, 11);
    stroke(0);
    strokeWeight(2);
    circle(111, 177, 17);
    circle(184, 177, 17);   //pupils and irises
    fill(255, 225, 215);
    stroke(205, 179, 156);
    strokeWeight(1);
    ellipse(110, 183, 35, 7);
    ellipse(185, 183, 35, 7);   //undereye silkworms

    //nose
    triangle(148, 180, 165, 220, 132, 220);

    //mouth
    stroke(255, 210, 200);  //lips
    strokeWeight(5);
    fill(255);
    arc(148, 233, 70, 50, 0, PI, CHORD);

    //front hair
    stroke(53, 25, 15);
    strokeWeight(1);
    noFill();
    arc(70, 100, 70, 200, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 240, PI - HALF_PI, PI);
    arc(240, 100, 150, 190, PI - HALF_PI, PI);
    arc(100, 100, 100, 80, TWO_PI, PI - HALF_PI);
    arc(200, 100, 100, 80, PI - HALF_PI, PI);   //lil baby hairs
    noStroke();
    fill(53, 25, 15);
    arc(60, 95, 110, 170, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 170, PI - HALF_PI, PI);   //side bangs
}

Self portrait: Alexia Forsyth

Alexia — Fri, 09 Sep 2022 17:27:24 +0000

Alexia Forsyth: javascript self-portrait

function setup() {
createCanvas(500, 300);
background(214, 90, 154);
text(“p5.js vers 0.9.0 test.”, 10, 15);
}

function draw() {
//hair
fill(122, 82, 43);
ellipse(width/2, 195, 200,350);

//braids
stroke(77, 51, 25);
line(300, 42, 270, 540);
stroke(77, 51, 25);
line(320, 67, 300, 540);
stroke(77, 51, 25);
line(340, 120, 310, 540);
stroke(77, 51, 25);
line(260, 20, 260, 540);
stroke(77, 51, 25);
line(200, 42, 250, 540);
stroke(77, 51, 25);
line(180, 67, 230, 540);
stroke(77, 51, 25);
line(160, 120, 200, 540);

//neck
fill(179, 141, 104);
rect(220, 265, 60, 100);

//face
fill(179, 141, 104);
ellipse(width/2, height/2, 150, 250);

//nose
ellipse(240, 170, 18,9);
ellipse(260, 170, 18,9);
rect(246,120,9,50);
fill(0);
ellipse(240,171,11,4);
fill(0);
ellipse(260,171,11,4);

//ears
fill(179, 141, 104);
ellipse(330,145,25,38);
fill(0);
circle(330,160, 7,7); //earrings 

fill(179, 141, 104);
ellipse(170,145,25,38);
fill(0);
circle(170,160, 7,7); //earrings




//eyes
fill(255);
ellipse(290,110,40,30);
fill(168, 131, 45);
circle(290,110,25);
fill(0);
circle(290,110,18);
stroke(0);
line(305, 99, 306,96);
line(300, 96, 301,94);
line(295, 95, 295,92);
line(290, 95, 290,92);
line(285, 95,284,93);
line(280, 96,279,93);

fill(255);
ellipse(215,110,40,30);
fill(168, 131, 45);
circle(215,110,25);
fill(0);
circle(215,110,18);
stroke(0);
line(230, 99, 231,96);
line(225, 96, 225,94);
line(220, 95, 220,92);
line(215, 95, 215,92);
line(210, 95,209,93);
line(205, 96,204,93);

//eyebrows
fill(77, 51, 25);
rect(270,87,40,3);

fill(77, 51, 25);
rect(200,87,40,3);

//lips
fill(171, 44, 68);
ellipse(width/2,220,55,35);
strokeWeight(5);
line(223, 220, 277, 220);
noLoop();

}

Project 01

Tracy — Fri, 09 Sep 2022 17:11:02 +0000

Here is me!

sketch

//Tracy Meng
//Section B

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

function draw() {
    //BACKGROUND
    background(225,246,255);        // light blue sky

    //CLOUDS
    noStroke();
    fill(255);                      // cloud color (white)
    circle(200,90,70);              // cloud 1
    circle(150,70,100);
    circle(100,90,80);
    circle(50,90,60);

    circle(340,180,80);             // cloud 2
    circle(400,160,120);
    circle(450,180,100);
    circle(500,180,90);
    circle(550,180,50);

    //HILLS
    fill(186,245,190);              // light green
    circle(150,550,300);            // hill 1
    circle(0,520,100);              // hill 2
    circle(450,520,200);            // hill 3
    circle(550,570,150);            // hill 4

    //TREES
    fill(104,193,110);              // dark green
    ellipse(50,500,70,300);         // tree 1
    ellipse(145,400,90,height);      // tree 2
    ellipse(480,500,70,500);        // tree 3

    //SHRUBS
    fill(77,235,87);                // light green 2
    ellipse(85,550,60,200);         // shrub 1
    ellipse(530,550,70,360);        // shrub 2

    //BACK OF HAIR
    fill(102,58,14);                // hair color (dark brown)
    rect(185,308,230,height);       

    //HAIR HIGHLIGHTS
    stroke(166,111,0);              // light brown
    strokeWeight(3);                // highlight thickness
    line(200,308,200,height);  
    line(240,308,240,height);
    line(225,308,225,432); 
    line(380,400,380,height);
    line(400,308,400,height);   

    //HEAD SHAPE
    noStroke();
    fill(255,220,177);              // skin color (nude)
    ellipse(width/2,height/2,220,250); // head shape & location

    //EARS
    fill(255,220,177);              // skin color (nude)
    ellipse(190,308,30,50);         // left ear
    ellipse(410,308,30,50);         // right ear

    //BODY
    //SHIRT
    fill(243,18,153);               // shirt color (hot pink)
    ellipse(width/2,490,250,100);   // shoulders
    quad(175,485,125,height,475,height,425,485); // rest of tshirt

    //SHIRT COLLAR
    noFill();                       
    stroke(255);                    // collar color (white)
    strokeWeight(10);
    arc(width/2,450,80,80,0,PI);

    //NECK
    noStroke();
    fill(255,220,177);              // skin color (nude)

    rect(260,410,80,35);  
    ellipse(width/2,450,80,80);     // neckline    

    //EAR HOLES
    noFill();
    strokeWeight(2);
    stroke(230,145,20);             // brown ear stroke
    arc(190,308,10,30,PI/2,PI/2+PI); // left hole
    arc(410,308,10,30,-PI/2,PI/2);   // right hole

    //CHIN DEFINITION
    arc(width/2,422,20,10,0,PI);

    //EARRINGS
    //LEFT TRIANGLE EARRING 
    strokeWeight(2);
    stroke(255,157,58);             // orange outline
    fill(255,239,0);                // gold 
    triangle(180,333,200,333,190,350);

    //RIGHT TRIANGLE EARRING
    triangle(400,333,420,333,410,350);

    //LEFT EARRING DANGLES 1
    strokeWeight(4);                // thicker orange outline
    fill(185,63,255);               // purple
    quad(190,350,170,365,190,385,210,365); 

    //RIGHT EARRING DANGLES 1
    quad(410,350,390,365,410,385,430,365); 

    //LEFT EARRING DANGLE 2
    noFill();
    stroke(0,233,194);              // teal dangle outline
    quad(190,385,180,395,190,410,200,395); 

    //RIGHT EARRING DANGLE 2
    quad(410,385,400,395,410,410,420,395); 

    //SUNGLASSES
    //FRAME + LENSES
    stroke(250,145,164);            // rim color (pink)
    strokeWeight(8);                // rim thickness
    fill(28,28,28);                 // lenses color (dark grey)
    rect(220,260,65,65,10);         // rectangle lense 1 (left)
    rect(315,260,65,65,10);         // rectangle lense 2 (right)

    line(285,295,315,295);          // connect rims
    line(220,295,195,295);          // left band
    line(380,295,405,295);          // right band

    //PEARLS
    strokeWeight(4);                // thickness of point
    stroke(255);                    // pearl color (white)
    point(230,260);                 // top left rim
    point(240,260);
    point(250,260);
    point(260,260);
    point(270,260);

    point(230,325);                 // bottom - left rim
    point(240,325);
    point(250,325);
    point(260,325);
    point(270,325);

    point(220,275);                 // left - left rim
    point(220,285);
    point(220,295);
    point(220,305);
    point(220,315);

    point(285,275);                 // right - left rim
    point(285,285);
    point(285,295);
    point(285,305);
    point(285,315);

    point(330,260);                 // top - right rim
    point(340,260);
    point(350,260);
    point(360,260);
    point(370,260);

    point(330,325);                 // bottom - right rim
    point(340,325);
    point(350,325);
    point(360,325);
    point(370,325);

    point(315,275);                 // left - right rim
    point(315,285);
    point(315,295);
    point(315,305);
    point(315,315);

    point(380,275);                 // right - right rim
    point(380,285);
    point(380,295);
    point(380,305);
    point(380,315);

    //GLARE LINES
    stroke(238,238,255);            // glare color (grey - white)
    strokeWeight(3);                // glare thickness
    line(242,304,264,282);          // glare left
    line(337,304,359,282);          // glare right

    //NOSE
    noFill();
    stroke(230,145,20);             // brown nose stroke
    strokeWeight(2);                // nose stroke weight
 
    arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
    arc(310,350,20,20,-PI/2,PI/2);  // arc right: PI = Half of a circle

    line(290,340,290,322);          // nose line left
    line(310,340,310,322);          // nose line right

    //NOSTRILS
    noStroke();
    fill(222,171,95);               // light brown
    ellipse(292,353,10,5);          // left nostril
    ellipse(308,353,10,5);          // right nostril

    //LIPS
    //BOTTOM LIP
    stroke(255,122,162);            // lip liner color
    fill(255,132,168);              // lip color (light red)

    ellipse(width/2,390,25,15);

    //TOP LIP
    noStroke();
    fill(255,78,132);               // lip color (deep red)


    ellipse(292,385,27,13);         // left side
    ellipse(308,385,27,13);         // right side

    //MAKEUP HIGHLIGHT
    //LIP SPARKLE
    stroke(255,238,210);            // sparkle color
    strokeWeight(5);                // sparkle thickness
    point(width/2,376);             // top sparkle
    point(width/2,402);             // bottom sparkle

    //NOSE SPARKLE
    line(width/2,340,width/2,322);

    //ROSY CHEEKS
    noStroke();
    fill(255,200,228);              // rose
    ellipse(245,340,60,20);         // blush left
    ellipse(355,340,60,20);         // blush right
      
    //HAIR BANGS
    stroke(166,111,0);              // light brown stroke (match highlight)
    strokeWeight(3);
    fill(102,58,14);                // bangs color (dark brown)  
    point(220,220);                 // left
    point(380,220);                 // right

    bezier(300,175,120,180,250,300,150,430); // left bangs
    bezier(300,175,480,180,350,300,450,430); // right bangs   

    //HIGHLIGHT BANGS
    //LEFT
    bezier(280,195,150,200,260,320,170,400);

    //RIGHT
    bezier(320,195,450,200,340,320,430,400);


 

}

Project 1: My Self Portrait

Andrew — Fri, 09 Sep 2022 14:58:22 +0000

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    ears ();
    drawFace();
    noFill();
    drawMouth();
    drawTeeth();
    drawLip();
    eyeBallOne();
    eyeBallTwo();
}

function drawMouth() {
    strokeWeight(4);
    fill(255,0,0,255);
    curve(105, 250, 105, 200, 295, 200, 295, 250);
    curve(105, -400, 105, 200, 295, 200, 295, -400);
}

function drawLip() {
    strokeWeight(4);
    stroke(0);
    noFill();
    curve(105, 250, 105, 200, 295, 200, 295, 250);
    curve(105, -400, 105, 200, 295, 200, 295, -400);
}

function drawTeeth() {
    strokeWeight(3);
    stroke(255);
    line(105, 200, 135, 248);
    line(295, 200, 265, 248);
    line(135, 248, 165, 195);
    line(265, 248, 235, 195);
    line (165, 195, 200, 275);
    line (235, 195, 200, 275);
}

function drawFace() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120);
    bezier(50, 225, 50, 400, 350, 400, 350, 225);
    bezier(50, 225, 50, -50, 350, -50, 350, 225);
}

function eyeBallOne() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (150,150,50);
    let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
    let x = 150 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(255,0,255);
    circle (x,y,15);
}

function eyeBallTwo() {
    strokeWeight(4);
    fill(255,255,255);
    ellipse (250,150,50);
    let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
    let x = 250 + 20*0.75*cos(angle);
    let y = 150 + 20*0.75*sin(angle);
    fill(150,150,0);
    circle (x,y,15);
}

function ears() {
    strokeWeight(5);
    let xValue = mouseX/width*255;
    let yValue = mouseY/width*255;
    let zValue = (xValue+yValue)/4;
    fill(xValue,yValue,zValue+120,100);
    ellipse (350,150,50.100);
    ellipse (50,150,50.100);
}

Project-01

Leo — Fri, 09 Sep 2022 03:11:14 +0000

Undertale Leo

sketch

function setup() {
    createCanvas(250, 350);
    background(242, 112, 155); //pink
}

function draw() {
    fill(241, 194, 126) //skin in the backdrop
    rect(60, 80, 140, 90)
    fill(0); //hair and eyes
    rect(80, 20, 90, 40); //main black rect
    rect(60, 30, 20, 40);
    square(160, 60, 10);
    rect(170, 30, 20, 50);
    rect(190, 40, 10, 50);
    rect(180, 80, 10, 20);
    rect(200, 50, 10, 140);
    rect(210, 80, 10, 110);
    rect(60, 70, 10, 40);
    rect(50, 50, 10, 140);
    rect(40, 70, 10, 100);
    rect(60, 130, 10, 50);
    rect(70, 140, 10, 50);
    rect(80, 150, 10, 30);
    rect(90, 150, 10, 20);
    rect(100, 150, 10, 20);
    rect(100, 170, 50, 10);
    rect(140, 150, 10, 20);
    rect(150, 140, 10, 30);
    rect(160, 130, 10, 50);
    rect(170, 130, 10, 50);
    rect(180, 120, 10, 70);
    rect(190, 110, 10, 70);
    rect(80, 80, 20, 10);
    rect(140, 80, 20, 10);
    rect(80, 100, 20, 10);
    rect(140, 100, 20, 10);
    rect(110, 120, 20, 10);
    rect(70, 240, 110, 10); //belt
    noLoop();
    fill(1, 162, 232); //bandana
    square(90, 60, 10);
    square(140, 60, 10);
    square(70, 70, 10);
    square(120, 70, 10);
    square(160, 70, 10);
    noLoop();
    fill(247, 92, 100);
    square(110, 130, 10); //tongue
    noLoop();
    strokeWeight(0)
    fill(237, 29, 37); //red shirt
    rect(100, 180, 50, 10);
    rect(90, 190, 60, 10);
    rect(100, 200, 50, 10);
    rect(90, 210, 50, 10);
    rect(70, 220, 30, 10);
    rect(80, 200, 10, 10);
    rect(70, 230, 30, 10);
    rect(110, 230, 70, 10);
    rect(120, 220, 30, 10);
    rect(150, 210, 20, 10);
    rect(160, 220, 20, 10);
    square(60, 200, 10);
    square(50, 220, 10);
    square(180, 200, 10);
    square(190, 220, 10);
    noLoop();
    fill(52, 32, 13);  //brown outline
    square(90, 180, 10);
    rect(150, 180, 20, 10);
    rect(60, 190, 30, 10);
    rect(160, 190, 30, 10);
    square(50, 200, 10);
    square(70, 200, 10);
    square(170, 200, 10);
    square(190, 200, 10);
    rect(40, 210, 10, 50);
    rect(60, 210, 10, 70);
    square(170, 210, 10);
    rect(180, 210, 10, 70);
    rect(200, 210, 10, 50);
    square(50, 230, 10);
    square(190, 230, 10);
    square(50, 250, 10);
    square(190, 250, 10);
    rect(60, 280, 60, 10);
    rect(130, 280, 60, 10);
    rect(110, 260, 10, 50);
    square(120, 260, 10);
    rect(130, 260, 10, 50);
    rect(80, 290, 30, 10);
    rect(70, 300, 40, 10);
    rect(140, 290, 30, 10);
    rect(140, 300, 40, 10);
    noLoop();           
    fill(255, 242, 1);  //yellow highlights
    square(80, 210, 10);
    square(90, 200, 10);
    square(100, 230, 10);
    square(110, 220, 10);
    square(140, 210, 10);
    square(150, 220, 10);
    square(150, 190, 10);
    square(190, 210, 10);
    noLoop();
    fill(255, 201, 15);  //yellow-orange
    square(50, 210, 10);
    square(150, 200, 10);
    noLoop()
    fill(255, 127, 40);  //orange 
    square(70, 210, 10);
    square(100, 220, 10);
    square(160, 200, 10);
    noLoop();
    fill(241, 194, 126);  //hands&knees
    square(50, 240, 10);
    square(190, 240, 10);
    rect(70, 260, 20, 10);
    rect(150, 260, 20, 10);
    noLoop();
    fill(255);      //jean tears
    square(70, 270, 10);
    square(140, 270, 10);
    square(170, 270, 10);
    noLoop();
    fill(111, 126, 149);  //jeans
    rect(70, 250, 110, 10);
    rect(90, 260, 20, 10);
    square(140, 260, 10);
    square(170, 260, 10);
    rect(80, 270, 30, 10);
    rect(150, 270, 20, 10);
    }