function setup() {
createCanvas(350,400);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
strokeWeight(0); //background color
fill(199,216,199);
rect(0,0,350,450);
fill(243,185,143); //face shape
ellipse(175,225,180,220);
fill(243,185,143);
circle(175,150,180);
fill(46,38,34); //eyebrows
ellipse(130,140,50,15);
ellipse(108,147,15,20);
ellipse(220,140,50,15);
ellipse(240,147,15,20);
stroke(243,234,185);
strokeWeight(3);
fill(64,63,65); //glasses
circle(130,175,65);
fill(64,63,65);
circle(220,175,65);
stroke(243,234,185); //glasses bridge
strokeWeight(3);
point(165,175);
point(170,172.5);
point(175,172);
point(180,172.5);
point(185,175);
strokeWeight(0);
fill(243,185,143); //ears
ellipse(75,195,45,80);
fill(243,185,143);
ellipse(277,195,45,80);
fill(46,38,34);
rect(90,50,170,50); //hair
circle(100,80,50);
circle(100,95,40);
ellipse(85,135,20,50);
circle(90,100,30);
circle(85,102,20);
circle(135,95,50);
circle(100,75,60);
circle(120,70,60);
circle(150,60,70);
circle(160,55,50);
circle(175,60,70);
circle(180,70,70);
circle(190,60,60);
circle(200,75,50);
circle(210,70,60);
circle(215,80,50);
circle(225,70,60);
circle(240,70,50);
circle(225,52,50);
circle(245,70,45);
circle(245,65,50);
circle(250,75,40);
circle(250,85,30);
circle(255,90,40);
ellipse(265,120,20,50);
circle(265,140,20);
circle(265,145,15);
circle(265,155,10);
circle(265,120,30);
circle(85,160,10);
circle(85,120,30);
circle(85,135,23);
fill(46,38,34);
ellipse(85,200,8,100); //beard
ellipse(265,200,8,100);
circle(87,245,10);
circle(87,247,13);
circle(87,250,15);
circle(85,240,10);
circle(89,255,17);
circle(91,260,18);
circle(94,270,20);
circle(95,275,22);
circle(96,280,24);
circle(98,285,26);
circle(100,290,27);
circle(101,295,27);
circle(102,300,28);
circle(105,305,28);
circle(110,310,28);
circle(112,315,29);
circle(115,318,29);
circle(120,322,30);
circle(125,328,31);
circle(128,335,31);
circle(135,337,32);
circle(140,338,32);
circle(145,339,32);
circle(150,340,33);
circle(160,341,34);
circle(165,342,34);
circle(170,341,34);
circle(175,341,33);
circle(180,340,33);
circle(185,339,33);
circle(190,338,33);
circle(195,336,32);
circle(200,335,32);
circle(205,332,32);
circle(210,330,32);
circle(215,328,32);
circle(220,325,31);
circle(225,320,31);
circle(230,315,31);
circle(235,310,34);
circle(240,305,30);
circle(235,300,28);
circle(240,295,28);
circle(245,290,28);
circle(245,285,27);
circle(246,280,27);
circle(247,275,26);
circle(248,270,24);
circle(249,265,23);
circle(250,260,22);
circle(252,265,22);
circle(253,260,22);
circle(254,255,20);
circle(255,250,19);
circle(260,245,15);
circle(258,240,15);
circle(258,235,14);
circle(259,230,12);
circle(262,225,10);
ellipse(145,260,40,13); //mustache
ellipse(200,260,40,13);
circle(159,258,13);
circle(185,258,13);
ellipse(127,268,10,20);
ellipse(218,268,10,20);
ellipse(172,300,8,20);
circle(172,290,10);
}
For this project, I spent a lot of time using trial and error to figure out how I wanted to create the hair. Overall, I’m happy with how it turned out, and I went for a more simplistic look.
]]>The most challenging part of this project was using the arc function because the start and end are in radians.
]]>function setup() {
createCanvas(1000, 1000);
background(180);
}
function draw() {
background(171,130,130)
text("Luca's portrait",15,20)
//hoodie
fill(61,64,91)
ellipse(500,700,500,200)
fill(229,229,229)
ellipse(500,700,450,200)
//body
fill(244,241,222)
rect(450,765,100,245)//shirt
fill(61,64,91)
rect(280,765,200,245)//bodyr
fill(61,64,91)
rect(550,765,200,245)//bodyl
fill(61,64,91)
ellipse(270,840,150,150)//shoulderr
fill(61,64,91)
ellipse(738,840,150,150)//shoulderl
fill(61,64,91)
rect(210,850,120,200)//armr
fill(61,64,91)
rect(730,780,190,120)//upperarm
fill(61,64,91)
rect(800,500,120,290)//arm
fill(255,215,215)
rect(800,400,100,100)//hand
fill(34,19,17)
rect(580,900,100,10)//pocket
fill(224,122,95)
rect(600,850,10,50)//pen
//facefeatures
fill(34,19,17)
ellipse(500,420,500,400)//hair1
fill(255,215,215)
ellipse(500,520,450,470)//head
fill(255,255,255)
ellipse(400,525,100,50)//eyeright
fill(34,19,17)
ellipse(380,525,40,30)//pupilright
fill(255,255,255)
ellipse(600,525,100,50)//eyeleft
fill(34,19,17)
ellipse(580,525,40,30)//pupilleft
fill(34,19,17)
rect(345,455,100,20)//browr
fill(34,19,17)
rect(550,440,100,20)//browl
fill(255,210,218)
rect(480,510,50,100)//noseb
fill(255,210,218)
ellipse(506,600,60,55)//nose
fill(34,19,17)//hair
ellipse(500,310,60,60)
ellipse(480,330,60,60)
ellipse(530,310,60,60)
ellipse(560,320,60,60)
ellipse(600,300,60,70)
ellipse(460,300,60,60)
ellipse(430,300,60,60)
ellipse(400,310,60,60)
ellipse(370,300,60,60)
ellipse(320,360,60,60)
ellipse(340,330,60,60)
ellipse(600,330,60,60)
ellipse(620,330,60,60)
ellipse(630,340,60,60)
ellipse(650,330,60,60)
ellipse(680,350,60,60)
ellipse(690,370,60,60)
ellipse(700,400,60,60)
ellipse(710,420,60,60)
ellipse(300,400,60,60)
fill(34,19,17)
stroke(0)
strokeWeight(5)
line(450,700,550,700)
noloop();
}
Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “//” to label each graphic element.
Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.
]]>function setup() {
createCanvas(670, 750);
background(232,228,130);
}
function draw() {
noStroke();
fill(0,0,0);
rect(70,50,450,480,200); //back hair
fill(255,160,122);
rect(140,150,310,350,150); //head
fill(188,143,143);
rect(0,550,600,800,150); //body
fill(255,160,122);
rect(255,450,90,150,80); // neck
fill(0,0,0);
rect(110,65,200,200,100); //left bang
rect(280,65,200,200,100); //right bang
rect(120,230,40,300,30); //left stroke
rect(430,230,40,300,30); //right stroke
rect(480,200,100,200,70); //clip
ellipse(520,170,80); //clip piece
ellipse(237,330,30); // left eye
ellipse(355,328,30); // right eye
fill(255,127,80);
rect(280,330,30,70,30); //nose
fill(220,20,60);
ellipse(300,430,50); //mouth
fill(255,160,122);
rect(250,400,120,20);
fill(240,128,128,100);
ellipse(200,400,100); // left blush
ellipse(395,400,100); // right blush
fill(255,160,122);
rect(500,510,150,160,50); //palm
rect(542,600,80,210); //wrist
//rect(450,590,80,40,50); //thumb
rect(510,420,32,130,50); //index finger
rect(550,410,32,130,50); //middle finger
//rect(580,410,32,130,50); //ring finger
//rect(615,450,32,100,50); //little finger
strokeWeight(5);
stroke(218,165,32);
fill(255,255,255,50);
ellipse(230,330,100); // left frame
ellipse(365,328,100); // right frame
line(280,330,310,330); // frame connector
noLoop();
}
function setup() {
createCanvas(600, 700);
background(245);
}
function draw() {
//hair
strokeWeight(0);
fill(226, 194, 121);
ellipse(300, 230, 310, 285);
rect(145, 230, 310, 500);
//head
fill(245, 224, 204);
ellipse(300, 290, 290, 340);
//cheeks
fill(238, 158, 158);
ellipse(225, 300, 80, 43);
ellipse(375, 300, 80, 43);
//nose
fill(245, 189, 173);
circle(300, 310, 30);
fill(245, 224, 204);
rect(270, 280, 60, 30);
//eyes
noFill();
strokeWeight(5);
stroke(100)
arc(230, 255, 55, 30, PI, 0);
arc(370, 255, 55, 30, PI, 0);
//mouth
arc(300, 370, 45, 30, 0, PI);
strokeWeight(0);
//shirt
//(how the cords of quad ordered) top left, top right, bottom right, bottom left
fill(187, 209, 153);
quad(90, 540, 250, 510, 250, height, 90, height);
rect(250, 510, 100, 240);
quad(350, 510, 510, 540, 510, height, 350, height);
//neck
fill(245, 224, 204);
rect(250, 440, 100, 70);
circle(300, 500, 100);
}
What was most challenging was just planning out the drawing and deciding what coordinates I wanted and how I wanted to approach the code.
]]>handin-01_heejins-01-project_sketch
//Heejin Son Section D
function setup() {
angleMode(DEGREES); //set up the code to work in degrees
createCanvas(910, 717);
background(96, 96, 96);
}
function draw() {
strokeWeight(1);
fill(173, 195, 232); //murky blue
rect(245, 293, 466, 426); //smaller background rectangle
ellipse(280, 506, 405, 323); //background ellipse left
ellipse(667, 506, 405, 323); //background ellpise right
ellipse(457, 538, 252, 161); //ellipse for the face
fill(36, 26, 26); //brown
ellipse(419, 524, 11, 25); //left eye
ellipse(485, 524, 11, 25); // ight eye
fill(150, 22, 22); //red
ellipse(451, 539, 10, 10); // nose
ellipse(416, 626, 35, 46); //left hand
ellipse(502, 624, 35, 46); //right hand
ellipse(389, 640, 12, 12); //paws for left hand
ellipse(410, 660, 13, 13); //paws for left hand
ellipse(440, 650, 12, 12); //paws for left hand
ellipse(476, 641, 12, 12); //paws for right hand
ellipse(499, 660, 14, 14); //paws for right hand
ellipse(526, 652, 10, 10); //paws for right hand
line(292, 506, 376, 536); //left whiskers
line(299, 582, 379,554); //left whiskers
line(520, 537, 627, 478); //right whiskers
line(518, 554, 629, 575); //right whiskers
rect(414, 401, 44, 56); //rectangle for the hat
fill(24, 159, 10); //green
triangle(458, 401, 489, 354, 512, 406); //triangle for the hat
fill(150, 22, 22); //red
triangle(512, 406, 552, 409, 535, 445); //end triangle for the hat
ellipse(343, 489, 42, 42); //circle for the bubbles
fill(196, 177, 50); //yellow
ellipse(347, 447, 20, 20); //circle for the bubbles
fill(31, 50, 85); //navy
ellipse(319, 418, 24, 24); //circle for the bubbles
fill(181, 85, 21); //orange
ellipse(106, 350, 40, 40); //outer bubbles
fill(31, 85, 48); //green
ellipse(79, 266, 70, 70); // outer bubbles
fill(196, 177, 50);
ellipse(139, 192, 40, 40); // outer bubbles
fill(31, 85, 48);
ellipse(627, 116, 50, 40); //butterfly
fill(31, 50, 85);
ellipse(645, 172, 70, 60); //butterfly
fill(150, 22, 22);
ellipse(682, 105, 30, 20); //butterfly
fill(181, 85, 21);
ellipse(717, 147, 70, 60); //butterflys
line(653, 95, 635, 72); //butterfly
line(660, 95, 667, 58); //butterfly
fill(31, 85, 48);
fill(31, 50, 85);
rect(350, 208, 160, 102); //house
fill(150, 22, 22); //red
triangle(325, 210, 530, 210, 432, 140); //house
rect(0,700, 910, 20); //bottom rectangle
}function setup() {
createCanvas(600, 900);
background(255);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(2, 3, 200);
fill(255);
triangle(400, 650, 475, 850, 325, 850);
rect(50, 50, 500, 600);
stroke(0);
strokeWeight(5);
noFill();
triangle(400, 850, 450, 900, 350, 900);
curve(70, 220, 100, 170, 250, 165, 280, 222);
curve(270, 222, 300, 165, 450, 170, 480, 220);
fill(0);
arc(150, 170, 60, 40, 0, 3);
arc(350, 170, 60, 40, 0, 3);
fill(255);
arc(150, 170, 60, 40, .5, 1);
arc(350, 170, 60, 40, .5, 1);
fill(255, 173, 226);
noStroke();
ellipse(175, 300, 50, 100);
ellipse(375, 300, 50, 100);
fill(250, 160, 210);
ellipse(175, 300, 40, 40);
ellipse(375, 300, 40, 40);
stroke(0);
strokeWeight(5);
fill(0);
curve(200, mouseY/2, 225, 400, 325, 400, 350, mouseY/2);
noFill();
curve(70, 100-(mouseY/2), 120, 100, 220, 100, 280, 100+(mouseY/2));
curve(270, 100+(mouseY/2), 320, 100, 420, 100, 480, 100-(mouseY/2));
}
Tweaking the numbers to get object into the right place on the canvas was pretty tedious and unintuitive at first, but once I had a couple shapes down for reference it got much easier.
]]>function setup() {
createCanvas(975, 1133);
}
function draw() {
background(0);
fill(59, 84, 106);
rect(0, 0, 975, 1133);
fill(236, 229, 215);
circle(893, 592, 738);
fill(98, 118, 108);
rect(736, 433, 213, 31);
fill(198, 132, 47);
rect(739, 464, 210, 68);
fill(98, 118, 108);
rect(947, 435, 30, 286);
fill(98, 118, 108);
rect(446, 335, 219, 795)
fill(241, 209, 195);
circle(727, 699, 199);
fill(98, 118, 108);
rect(448, 96, 526, 237);
fill(241, 209, 195);
rect(0, 0, 120, 1133);
fill(221, 165, 111);
rect(120, 0, 64, 1130);
}
(the portrait is cut off because the dimensions of the canvas does not fit word space)
This project was interesting because it was the first time I made a self portrait out of shapes, so it was fun to get creative.
]]>sketch
]]>function setup() {
createCanvas(400, 600);
}
function draw() {
background(54, 47, 117);
// print(mouseX, mouseY);
// hair
beginShape();
strokeWeight(2);
stroke(0)
fill(0);
curveVertex(40, 600);
curveVertex(40, 600);
curveVertex(63, 358);
curveVertex(108, 255);
curveVertex(198, 216);
curveVertex(288, 255);
curveVertex(334, 358);
curveVertex(360, 600);
curveVertex(360, 600);
endShape();
// shoulder and neck
beginShape();
strokeWeight(2);
stroke(0)
fill(253, 236, 231);
curveVertex(92, 600);
curveVertex(92, 600);
curveVertex(114, 555);
curveVertex(147, 534);
curveVertex(173, 521);
curveVertex(184, 490);
curveVertex(216, 490);
curveVertex(227, 521);
curveVertex(253, 534);
curveVertex(286, 555);
curveVertex(308, 600);
curveVertex(308, 600);
endShape();
// face
beginShape();
strokeWeight(4);
stroke(0)
curveVertex(199, 500);
curveVertex(199, 500);
curveVertex(135, 466);
curveVertex(120, 369);
curveVertex(159, 334);
curveVertex(198, 300);
curveVertex(218, 334);
curveVertex(280, 369);
curveVertex(265, 466);
curveVertex(199, 500);
curveVertex(199, 500);
endShape();
// clothes
beginShape();
fill(253, 151, 156);
curveVertex(92, 600);
curveVertex(92, 600);
curveVertex(114, 555);
curveVertex(147, 534);
curveVertex(173, 521);
curveVertex(201, 546);
curveVertex(227, 521);
curveVertex(253, 534);
curveVertex(286, 555);
curveVertex(308, 600);
curveVertex(308, 600);
endShape();
// eyes
fill(0);
circle(160, 400, 26);
circle(240, 400, 26);
// eyelids
strokeWeight(8);
noFill();
arc(160, 393, 34, 16, PI + PI/24, - PI/6);
arc(240, 393, 34, 16, PI + PI/6, - PI/24);
// eyebrows
arc(160, 380, 52, 20, PI + PI/16, - PI/6);
arc(240, 380, 52, 20, PI + PI/6, - PI/16);
// mouth
strokeWeight(8);
stroke(0)
line(192, 450, 210, 450);
// nose
arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
// stars
noStroke();
fill(251, 255, 5);
triangle(112, 54, 120, 24, 128, 54);
triangle(112, 56, 120, 86, 128, 56);
triangle(90, 56, 120, 48, 120, 64);
triangle(120, 48, 120, 64, 150, 56);
triangle(312, 154, 320, 124, 328, 154);
triangle(312, 156, 320, 186, 328, 156);
triangle(290, 156, 320, 148, 320, 164);
triangle(320, 148, 320, 164, 350, 156);
circle(50, 80, 8);
circle(170, 150, 16);
circle(230, 50, 12);
circle(360, 100, 12);
/* when mouse is on canvas,
the circle stars will start blinking,
and the character will open her mouth */
if ((mouseX > 0) & (mouseX < width) &&
(mouseY > 0) && (mouseY < height)) {
// add rings for blinking effect
let starR1 = random(8, 16);
let starR2 = random(16, 24);
let starR3 = random(12, 18);
noFill();
strokeWeight(1);
stroke(251, 255, 5)
circle(50, 80, starR1);
circle(170, 150, starR2);
circle(230, 50, starR3);
circle(360, 100, starR3);
// open mouse
strokeWeight(6);
stroke(0);
fill(254, 97, 97);
arc(201, 451, 22, 30, 0, PI);
}
}
function setup() {
createCanvas(350, 500);
background(215, 167, 119)
}
function draw() {
strokeWeight(0);
fill(107, 70, 27) // eyes
ellipse(100, 140, 50);
ellipse(250, 140, 50);
fill(252, 226, 215, 150); // pupils
ellipse(105, 145, 30);
ellipse(255, 145, 30);
fill(107, 70, 27); // eyelids
triangle(75, 139, 70, 115, 107, 116);
triangle(275, 139, 280, 115, 243, 116);
noFill(); // nose
strokeWeight(5);
stroke(107, 70, 27);
arc(175, 240, 80, 80, PI/4, 3/4 * PI);
stroke(107, 70, 27); // mouth
strokeWeight(0);
fill(157, 117, 74);
// ellipse(175, 405, 110, 60);
fill(215, 167, 119);
rect(110, 370, 120, 40);
fill(144, 93, 37);
ellipse(175, 410, 110, 40);
fill(215, 167, 119);
rect(110, 410, 120, 30);
strokeWeight(0); // white plaid
fill(252, 226, 215, 100);
rect(25, 0, 35, 500);
rect(290, 0, 35, 500);
rect(157, 0, 35, 500);
rect(0, 60, 350, 35);
rect(0, 190, 350, 35);
rect(0, 320, 350, 35);
rect(0, 450, 350, 35);
fill(107, 70, 27, 35); // brown plaid
rect(90, 0, 35, 500);
rect(225, 0, 35, 500);
rect(0, 0, 350, 30)
rect(0, 125, 350, 35);
rect(0, 255, 350, 35);
rect(0, 385, 350, 35);
noLoop();
}I’m not a very visual thinker, and it was more difficult than I expected to translate my idea into simple shapes.
]]>