![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
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);
}Tag: Project-01-Face
LO: My Inspiration
The technological art/game that I admire the most is the pokemon series, especially the first pokemon game ever – Pokemon red and blue. The first reason that I admire it the most is that it is first of its kind, a capture and collect JRPG game, and the second reason is that the developer secretly hid one easter egg inside the game which made the game super popular. The game itself is created and directed by Satoshi Tajiri using the C++ language on the gameboy platform, and according to the director, Tajiri himself, the game was influenced by another JRPG game called The Final Fantasy Legend. Because of the unexpected popularity that the game received due to its unique gameplay, art style, and merchandise, the team is able to create dozens of its squeals even till today.
Project 01
Self-Portrait
sketchDownload
// Ilia Urgen
// Section B
function setup() {
createCanvas (1000, 1000); //width is 1000, height is 1000
background (164,244,255); //Dark Tan canvas background
}
function draw() {
//text
stroke (0);
strokeWeight (10);
line (100,40,40,40);
line (40,40,40,70);
line (100,70,40,70);
line (100,100,100,70);
line (100,100,40,100);
line (140,40,200,40);
line (140,40,140,100);
line (140,100,200,100);
line (140,70,200,70);
line (240,40,240,100);
line (240,100,300,100);
line (340,40,340,100);
line (340,40,400,40);
line (340,70,400,70);
line (440,70,500,70);
line (140,140,200,140);
line (140,140,140,200);
line (140,170,200,170);
line (200,140,200,170);
line (240,140,300,140);
line (240,140,240,200);
line (300,140,300,200);
line (300,200,240,200);
line (340,140,340,200);
line (340,140,400,140);
line (340,170,400,170);
line (400,140,400,170);
line (400,200,340,170);
line (440,140,500,140);
line (470,140,470,200);
line (540,140,600,140);
line (540,140,540,200);
line (540,170,600,170);
line (600,170,600,140);
line (600,200,540,170);
line (640,140,700,140);
line (640,140,640,200);
line (700,140,700,200);
line (640,170,700,170);
line (740,140,800,140);
line (770,140,770,200);
line (740,200,800,200);
line (840,140,900,140);
line (870,140,870,200);
line (940,140,940,180);
point (940,200);
line (780,870,840,870);
line (810,810,810,870);
line (780,810,840,810);
line (880,870,940,870);
line (940,870,940,810);
line (880,870,880,810);
//neck outline
noStroke();
fill (243,207,187);
rect (375,850,250,150);
//face outline
noStroke();
fill (243,207,187);
ellipse (500,600,480,660);
//left ear
arc (245,620,80,160,PI + HALF_PI,PI + HALF_PI);
//right ear
arc (755,620,80,160,PI + HALF_PI,PI + HALF_PI);
//left eye
fill (0,0,0);
ellipse (400,575,110,60);
fill (255,255,255);
ellipse (400,575,90,60);
fill (102,51,0);
ellipse (400,575,60,60);
fill (0,0,0);
ellipse (410,575,12,12);
fill (255,255,255);
ellipse (413,575,5,5);
//right eye
fill (0,0,0);
ellipse (600,575,110,60);
fill (255,255,255);
ellipse (600,575,90,60);
fill (102,51,0);
ellipse (600,575,60,60);
fill (0,0,0);
ellipse (610,575,12,12);
fill (255,255,255);
ellipse (613,575,5,5);
//nose
fill (240,190,180);
triangle (450,700,500,540,550,700);
//t-shirt
fill (187,0,0);
quad (375,920,200,1000,800,1000,625,920);
//t-shirt letters
stroke (255);
strokeWeight (6);
//C
line (395,940,445,940);
line (395,940,395,980);
line (395,980,445,980);
//M
line (475,940,475,980);
line (475,940,500,980);
line (500,980,525,940);
line (525,940,525,980);
//U
line (555,940,555,980);
line (555,980,605,980);
line (605,980,605,940);
//left eyebrow
strokeWeight (30);
stroke (55,39,45);
arc (400,518,120,30,PI,0);
//right eyebrow
strokeWeight (30);
stroke (55,39,45);
arc (600,518,120,30,PI,0);
//glasses
noFill();
strokeWeight (8);
stroke (212,175,55);
noFill ();
ellipse (400,575,150,130);
ellipse (600,575,150,130);
arc (500,570,52,50,PI,0);
line (400,510,600,510);
line (244,535,340,535);
line (660,535,754,535);
//teeth
fill (255);
stroke (255);
ellipse (500,790,105,40);
//mouth
noFill();
strokeWeight (35);
stroke (193,104,115);
arc (500,800,140,30,0, PI);
arc (500,780,140,30,PI,0);
//facial hair
stroke (55,39,45);
strokeWeight (2);
line (434,718,412,753);
line (437,718,416,752);
line (440,718,420,751);
line (443,716,424,750);
line (446,716,428,749);
line (449,716,432,748);
line (452,714,436,747);
line (455,714,440,746);
line (458,714,444,745);
line (461,712,448,744);
line (464,712,452,743);
line (467,712,456,742);
line (470,710,460,741);
line (473,710,464,740);
line (476,710,468,740);
line (479,710,472,740);
line (482,710,476,740);
line (485,710,480,740);
line (488,710,484,740);
line (491,710,488,740);
line (494,710,492,740);
line (497,710,496,740);
line (500,710,500,740);
line (503,710,504,740);
line (506,710,508,740);
line (509,710,512,740);
line (512,710,516,740);
line (515,710,520,740);
line (518,710,524,740);
line (521,710,528,740);
line (524,710,532,740);
line (527,710,536,740);
line (530,710,540,741);
line (533,712,544,742);
line (536,712,548,743);
line (539,712,552,744);
line (542,714,556,745);
line (545,714,560,746);
line (548,714,564,747);
line (551,716,568,748);
line (554,716,572,749);
line (557,716,576,750);
line (560,718,580,751);
line (563,718,584,752);
line (566,718,588,753);
//face lines
arc (240,625,30,100,HALF_PI, PI + HALF_PI);
arc (760,625,30,100,PI + HALF_PI, HALF_PI);
arc (500,875,100,30,PI,0);
//hair
strokeWeight (20);
curve(300, 20, 290, 510, 500, 270, 970, 630);
curve(270, 630, 500, 270, 700, 510, 540, 270);
curve(300, 70, 290, 510, 500, 276, 970, 600);
curve(270, 600, 500, 276, 700, 510, 300, 70);
curve(300, 70, 290, 510, 500, 270, 970, 600);
curve(270, 600, 500, 270, 700, 510, 300, 70);
curve(300, 470, 290, 510, 500, 282, 970, 570);
curve(270, 570, 500, 282, 710, 510, 300, 470);
curve(100, 470, 290, 510, 500, 270, 970, 570);
curve(270, 570, 500, 270, 710, 510, 370, 470);
curve(300, 870, 280, 510, 500, 288, 970, 540);
curve(270, 540, 500, 288, 720, 510, 300, 870);
curve(300, 870, 280, 510, 500, 270, 970, 540);
curve(270, 540, 500, 270, 720, 510, 300, 870);
curve(300, 1070, 290, 510, 500, 294, 970, 540);
curve(270, 540, 500, 294, 710, 510, 330, 1070);
curve(300, 1070, 300, 510, 500, 294, 970, 540);
curve(270, 540, 500, 294, 710, 510, 320, 1070);
curve(300, 1070, 290, 510, 500, 270, 970, 540);
curve(270, 540, 500, 270, 710, 510, 300, 1070);
curve(300, 1370, 290, 510, 500, 270, 970, 540);
curve(270, 540, 500, 270, 710, 510, 200, 1370);
curve(500, 1070, 280, 510, 500, 300, 970, 540);
curve(270, 540, 500, 300, 720, 510, 300, 1070);
curve(500, 1070, 280, 510, 500, 270, 970, 540);
curve(270, 540, 500, 270, 720, 510, 250, 1070);
curve(700, 1070, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 300, 1270);
curve(700, 1070, 290, 500, 500, 270, 970, 540);
curve(270, 540, 500, 270, 710, 500, 200, 1270);
curve(700, 1070, 280, 500, 500, 312, 970, 540);
curve(270, 540, 500, 312, 710, 500, 300, 1270);
curve(700, 1070, 280, 500, 500, 270, 970, 540);
curve(270, 540, 500, 270, 710, 500, 300, 1270);
curve(700, 1070, 290, 500, 500, 318, 970, 540);
curve(270, 540, 500, 318, 720, 500, 300, 1270);
curve(700, 1070, 290, 500, 500, 270, 970, 540);
curve(270, 540, 500, 270, 720, 500, 300, 1270);
curve(200, 1070, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 500, 1270);
curve(100, 1070, 290, 500, 500, 326, 970, 540);
curve(270, 540, 500, 306, 710, 500, 600, 1270);
curve(500, 1070, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 700, 1270);
curve(50, 1070, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 800, 1270);
curve(0, 1070, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 900, 1270);
curve(0, 470, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 900, 470);
curve(0, 470, 290, 500, 500, 306, 970, 540);
curve(270, 540, 500, 306, 710, 500, 900, 570);
curve(0, 270, 290, 500, 500, 326, 970, 540);
curve(270, 540, 500, 326, 710, 500, 900, 670);
noLoop();
}
Project 1: My Self Portrait
Self Portrait
function setup() {
createCanvas(500, 500);
background(93,232,113);
}
function draw() {
fill(0);
rect(150,140,200,250); //hair back
fill(253,227,220);
strokeWeight(0);
ellipse(width/2,height/2,150,200); //face
fill(0);
rect(150,150,200,60); //hair
fill(225,199,190);
triangle(250,250,240,300,260,300); //nose
strokeWeight(5);
stroke(239,94,94);
noFill();
arc(250, 310, 40, 40, QUARTER_PI, PI); //smile. I feel like i can do a circle and the cover the top
fill(245,249,255);
strokeWeight(0);
ellipse(220,250,40,20); //eye left
ellipse(280,250,40,20); // eye right
fill(127,71,42);
strokeWeight(0);
ellipse(220,250,15); //pupil left
ellipse(280,250,15); // pupil right
fill(253,227,220);
rect(200,237,40,10); //lid left
rect(260,237,40,10); //lid right
fill(10)
rect(200,235,40,2); //eyebrow left
rect(260,235,40,2); //eyebrow right
fill(93,232,113)
triangle(220,100,50,100,70,300);
triangle(500-220,100,500-50,100,500-70,300);
noLoop()
}