![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
Emilio Bustamante
Section D
Right-click, select all and copy then paste in p5js editor and erase the extra lines at the beginning and end. I apologize had some problems importing the html.
// Maintain pressing the mouse and then release to see the face movement
function setup() {
createCanvas(425,500);
strokeWeight(0);
noLoop();
}
// Profile face
function draw() {
background(115,191,69);
// Hair
fill(120,100,100)
rect(50,175,25,25)
rect(50,225,25,25)
rect(50,250,25,25)
rect(50,275,25,25)
rect(75,175,25,25)
rect(75,200,25,25)
rect(75,225,25,25)
rect(75,250,25,25)
rect(75,275,25,25)
rect(75,300,25,25)
rect(75,325,25,25)
rect(100,150,25,25)
rect(100,175,25,25)
rect(100,200,25,25)
rect(100,225,25,25)
rect(125,75,25,25)
rect(125,100,25,25)
rect(125,125,25,25)
rect(125,150,25,25)
rect(125,175,25,25)
rect(125,200,25,25)
rect(125,225,25,25)
rect(150,100,25,25)
rect(150,125,25,25)
rect(150,150,25,25)
rect(150,175,25,25)
rect(150,200,25,25)
rect(150,225,25,25)
rect(150,250,25,25)
rect(175,125,25,25)
rect(175,150,25,25)
rect(175,175,25,25)
rect(175,200,25,25)
rect(175,225,25,25)
rect(175,250,25,25)
rect(200,100,25,25)
rect(200,125,25,25)
rect(200,150,25,25)
rect(200,175,25,25)
rect(200,200,25,25)
rect(225,125,25,25)
rect(225,150,25,25)
rect(225,175,25,25)
rect(225,200,25,25)
rect(250,100,25,25)
rect(250,125,25,25)
rect(250,150,25,25)
rect(250,175,25,25)
rect(275,75,25,25)
rect(275,100,25,25)
rect(275,125,25,25)
rect(275,150,25,25)
rect(275,175,25,25)
rect(300,100,25,25)
rect(300,125,25,25)
rect(300,150,25,25)
rect(300,175,25,25)
rect(300,175,25,25)
rect(300,200,25,25)
rect(325,125,25,25)
rect(325,150,25,25)
rect(325,175,25,25)
rect(350,125,25,25)
// Shadows
fill(23,19,20)
rect(100,325,25,25)
rect(100,350,25,25)
rect(100,375,25,25)
rect(125,275,25,25)
rect(125,300,25,25)
rect(125,325,25,25)
rect(125,350,25,25)
rect(125,375,25,25)
rect(125,400,25,25)
rect(125,425,25,25)
rect(125,450,25,25)
rect(125,475,25,25)
rect(150,275,25,25)
rect(150,300,25,25)
rect(150,325,25,25)
rect(150,350,25,25)
rect(150,375,25,25)
rect(150,400,25,25)
rect(175,325,25,25)
rect(175,350,25,25)
rect(175,375,25,25)
rect(175,400,25,25)
rect(175,425,25,25)
rect(200,250,25,25)
rect(200,350,25,25)
rect(200,375,25,25)
rect(200,400,25,25)
rect(200,425,25,25)
rect(225,250,25,25)
rect(225,375,25,25)
rect(225,400,25,25)
rect(225,425,25,25)
rect(225,450,25,25)
rect(225,475,25,25)
rect(250,250,25,25)
rect(250,375,25,25)
rect(250,425,25,25)
rect(250,450,25,25)
rect(275,250,25,25)
rect(275,275,25,25)
rect(275,375,25,25)
rect(275,425,25,25)
rect(300,250,25,25)
rect(300,275,25,25)
rect(300,300,25,25)
rect(300,375,25,25)
// Skin
fill(135,62,43)
rect(100,250,25,25)
rect(100,275,25,25)
rect(100,300,25,25)
rect(125,250,25,25)
rect(150,425,25,25)
rect(150,450,25,25)
rect(150,475,25,25)
rect(175,275,25,25)
rect(175,300,25,25)
rect(175,450,25,25)
rect(175,475,25,25)
rect(200,225,25,25)
rect(200,275,25,25)
rect(200,300,25,25)
rect(200,325,25,25)
rect(200,450,25,25)
rect(200,475,25,25)
rect(225,225,25,25)
rect(225,275,25,25)
rect(225,300,25,25)
rect(225,325,25,25)
rect(225,350,25,25)
rect(250,200,25,25)
rect(250,225,25,25)
rect(250,275,25,25)
rect(250,300,25,25)
rect(250,325,25,25)
rect(250,350,25,25)
rect(250,400,25,25)
rect(275,200,25,25)
rect(275,225,25,25)
rect(275,300,25,25)
rect(275,325,25,25)
rect(275,350,25,25)
rect(275,400,25,25)
rect(300,225,25,25)
rect(300,325,25,25)
rect(300,350,25,25)
rect(325,300,25,25)
rect(325,325,25,25)
rect(350,325,25,25)
}
// 3/4 face
function mousePressed() {
background(115,191,69);
// Hair
fill(120,100,100)
rect(50,75,25,25)
rect(50,150,25,25)
rect(50,175,25,25)
rect(50,225,25,25)
rect(50,250,25,25)
rect(50,275,25,25)
rect(75,75,25,25)
rect(75,100,25,25)
rect(75,175,25,25)
rect(75,200,25,25)
rect(75,225,25,25)
rect(75,250,25,25)
rect(100,100,25,25)
rect(100,125,25,25)
rect(100,150,25,25)
rect(100,175,25,25)
rect(100,200,25,25)
rect(100,225,25,25)
rect(100,250,25,25)
rect(125,75,25,25)
rect(125,100,25,25)
rect(125,125,25,25)
rect(125,150,25,25)
rect(125,175,25,25)
rect(125,200,25,25)
rect(150,100,25,25)
rect(150,125,25,25)
rect(150,150,25,25)
rect(150,175,25,25)
rect(150,200,25,25)
rect(175,50,25,25)
rect(175,125,25,25)
rect(175,150,25,25)
rect(175,175,25,25)
rect(200,50,25,25)
rect(200,75,25,25)
rect(200,100,25,25)
rect(200,125,25,25)
rect(200,150,25,25)
rect(200,175,25,25)
rect(225,75,25,25)
rect(225,100,25,25)
rect(225,125,25,25)
rect(225,150,25,25)
rect(225,175,25,25)
rect(225,200,25,25)
rect(250,100,25,25)
rect(250,125,25,25)
rect(250,150,25,25)
rect(250,175,25,25)
rect(275,75,25,25)
rect(275,100,25,25)
rect(275,125,25,25)
rect(275,150,25,25)
rect(275,175,25,25)
rect(300,100,25,25)
rect(300,125,25,25)
rect(300,150,25,25)
rect(300,175,25,25)
rect(300,175,25,25)
rect(300,200,25,25)
rect(325,75,25,25)
rect(325,100,25,25)
rect(325,125,25,25)
rect(325,150,25,25)
rect(325,175,25,25)
rect(350,75,25,25)
rect(350,150,25,25)
rect(350,175,25,25)
// Shadows
fill(23,19,20)
rect(75,275,25,25)
rect(75,300,25,25)
rect(100,275,25,25)
rect(100,300,25,25)
rect(100,325,25,25)
rect(100,350,25,25)
rect(100,375,25,25)
rect(125,250,25,25)
rect(125,350,25,25)
rect(125,375,25,25)
rect(125,400,25,25)
rect(125,425,25,25)
rect(125,450,25,25)
rect(125,475,25,25)
rect(150,250,25,25)
rect(150,275,25,25)
rect(150,375,25,25)
rect(150,400,25,25)
rect(150,425,25,25)
rect(175,250,25,25)
rect(175,275,25,25)
rect(175,300,25,25)
rect(175,400,25,25)
rect(175,425,25,25)
rect(175,450,25,25)
rect(200,250,25,25)
rect(200,275,25,25)
rect(200,400,25,25)
rect(200,450,25,25)
rect(200,475,25,25)
rect(225,250,25,25)
rect(225,350,25,25)
rect(225,400,25,25)
rect(225,450,25,25)
rect(225,475,25,25)
rect(250,250,25,25)
rect(250,275,25,25)
rect(250,350,25,25)
rect(250,400,25,25)
rect(250,425,25,25)
rect(250,450,25,25)
rect(275,250,25,25)
rect(275,275,25,25)
rect(275,300,25,25)
rect(275,375,25,25)
rect(275,400,25,25)
rect(275,425,25,25)
rect(300,225,25,25)
rect(300,250,25,25)
rect(300,275,25,25)
rect(300,300,25,25)
rect(300,325,25,25)
rect(300,350,25,25)
rect(300,375,25,25)
rect(325,250,25,25)
// Skin
fill(135,62,43)
rect(125,225,25,25)
rect(125,275,25,25)
rect(125,300,25,25)
rect(125,325,25,25)
rect(150,225,25,25)
rect(150,300,25,25)
rect(150,325,25,25)
rect(150,350,25,25)
rect(150,450,25,25)
rect(150,475,25,25)
rect(175,200,25,25)
rect(175,225,25,25)
rect(175,325,25,25)
rect(175,350,25,25)
rect(175,375,25,25)
rect(175,475,25,25)
rect(200,200,25,25)
rect(200,225,25,25)
rect(200,300,25,25)
rect(200,325,25,25)
rect(200,350,25,25)
rect(200,375,25,25)
rect(200,425,25,25)
rect(225,225,25,25)
rect(225,275,25,25)
rect(225,300,25,25)
rect(225,325,25,25)
rect(225,375,25,25)
rect(225,425,25,25)
rect(250,200,25,25)
rect(250,225,25,25)
rect(250,300,25,25)
rect(250,325,25,25)
rect(250,375,25,25)
rect(275,200,25,25)
rect(275,225,25,25)
rect(275,325,25,25)
rect(275,350,25,25)
}
// Front face
function mouseClicked() {
background(115,191,69);
// Hair
fill(120,100,100)
rect(50,100,25,25)
rect(50,150,25,25)
rect(50,175,25,25)
rect(50,225,25,25)
rect(50,250,25,25)
rect(50,275,25,25)
rect(75,100,25,25)
rect(75,125,25,25)
rect(75,150,25,25)
rect(75,175,25,25)
rect(75,200,25,25)
rect(75,225,25,25)
rect(100,100,25,25)
rect(100,125,25,25)
rect(100,150,25,25)
rect(100,175,25,25)
rect(100,200,25,25)
rect(125,75,25,25)
rect(125,100,25,25)
rect(125,125,25,25)
rect(125,150,25,25)
rect(125,175,25,25)
rect(150,100,25,25)
rect(150,125,25,25)
rect(150,150,25,25)
rect(175,50,25,25)
rect(175,75,25,25)
rect(175,100,25,25)
rect(175,125,25,25)
rect(175,150,25,25)
rect(200,75,25,25)
rect(200,100,25,25)
rect(200,125,25,25)
rect(200,150,25,25)
rect(200,175,25,25)
rect(225,100,25,25)
rect(225,125,25,25)
rect(225,150,25,25)
rect(225,175,25,25)
rect(225,200,25,25)
rect(250,75,25,25)
rect(250,100,25,25)
rect(250,125,25,25)
rect(250,150,25,25)
rect(250,175,25,25)
rect(275,50,25,25)
rect(275,75,25,25)
rect(275,100,25,25)
rect(275,125,25,25)
rect(275,150,25,25)
rect(275,175,25,25)
rect(300,100,25,25)
rect(300,125,25,25)
rect(300,150,25,25)
rect(300,175,25,25)
rect(300,175,25,25)
rect(300,200,25,25)
rect(325,100,25,25)
rect(325,150,25,25)
rect(325,175,25,25)
rect(325,200,25,25)
rect(325,225,25,25)
rect(350,175,25,25)
// Shadows
fill(23,19,20)
rect(75,250,25,25)
rect(75,300,25,25)
rect(75,325,25,25)
rect(75,350,25,25)
rect(100,250,25,25)
rect(100,275,25,25)
rect(100,350,25,25)
rect(100,375,25,25)
rect(125,250,25,25)
rect(125,275,25,25)
rect(125,300,25,25)
rect(125,375,25,25)
rect(125,400,25,25)
rect(125,425,25,25)
rect(125,450,25,25)
rect(125,475,25,25)
rect(150,250,25,25)
rect(150,275,25,25)
rect(150,375,25,25)
rect(150,400,25,25)
rect(150,425,25,25)
rect(175,250,25,25)
rect(175,375,25,25)
rect(175,425,25,25)
rect(175,450,25,25)
rect(200,250,25,25)
rect(200,375,25,25)
rect(200,425,25,25)
rect(200,450,25,25)
rect(225,250,25,25)
rect(225,275,25,25)
rect(225,375,25,25)
rect(225,400,25,25)
rect(225,425,25,25)
rect(250,250,25,25)
rect(250,275,25,25)
rect(250,300,25,25)
rect(250,375,25,25)
rect(250,400,25,25)
rect(250,425,25,25)
rect(250,450,25,25)
rect(250,475,25,25)
rect(275,250,25,25)
rect(275,275,25,25)
rect(275,350,25,25)
rect(275,375,25,25)
rect(300,250,25,25)
rect(300,300,25,25)
rect(300,325,25,25)
rect(300,350,25,25)
// Skin
fill(135,62,43)
rect(75,275,25,25)
rect(100,225,25,25)
rect(100,300,25,25)
rect(100,325,25,25)
rect(125,200,25,25)
rect(125,225,25,25)
rect(125,325,25,25)
rect(125,350,25,25)
rect(150,175,25,25)
rect(150,200,25,25)
rect(150,225,25,25)
rect(150,300,25,25)
rect(150,325,25,25)
rect(150,350,25,25)
rect(150,450,25,25)
rect(150,475,25,25)
rect(175,175,25,25)
rect(175,200,25,25)
rect(175,225,25,25)
rect(175,275,25,25)
rect(175,300,25,25)
rect(175,325,25,25)
rect(175,350,25,25)
rect(175,400,25,25)
rect(175,475,25,25)
rect(200,200,25,25)
rect(200,225,25,25)
rect(200,275,25,25)
rect(200,300,25,25)
rect(200,325,25,25)
rect(200,350,25,25)
rect(200,400,25,25)
rect(200,475,25,25)
rect(225,225,25,25)
rect(225,300,25,25)
rect(225,325,25,25)
rect(225,350,25,25)
rect(225,450,25,25)
rect(225,475,25,25)
rect(250,200,25,25)
rect(250,225,25,25)
rect(250,325,25,25)
rect(250,350,25,25)
rect(275,200,25,25)
rect(275,225,25,25)
rect(275,325,25,25)
rect(275,300,25,25)
rect(300,225,25,25)
rect(300,275,25,25)
}