![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
createCanvas(640,480);
background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {
}
function mouseClicked() {
colorV = random(100,230);// change of background color
division = random(1,16);//change of dividing factor
St = random(0,255);// change of stroke color
if (val <= 0){
background(colorV/d,colorV/d,colorV/2*d)
push(new Face1);
val += 1;
} else {
if (val == 1) {
background(colorV/3*d,colorV/d,colorV);
push(new Face2);
val += 1;
} else
if (val == 2){
background(colorV,colorV/d,colorV/d*4);
push(new Face3);
val += 1;;
}else {
if (val == 3){
background(colorV/d,colorV,colorV/d*2);
push(new Face4);
val =0;
}
}
}
}
//Face 1
function Face1() {
//left Face
//facial shape
stroke(St/d*2,St,St/d*9) //stroke color for the faces
strokeWeight(1);
noFill();
beginShape();
vertex(177.91,184.25);
quadraticVertex(155.28,181.5,139.25,182.41);
quadraticVertex(129.75,184.5,121.5,186.58);
endShape();
line(121.5,186.58,107.08,201.16);
line(107.08,201.16,100.91,220.91);
line(100.91,220.91,102.58,225.91);
line(102.58,225.91,90.58,241.41);
//tip of nose
beginShape();
vertex(89.75,243.08);
quadraticVertex(93.41,247.25,92,246);
endShape();
beginShape();
vertex(93.41,243.08,);
quadraticVertex(96.75,243,99.58,243.08);
vertex(99.58,243.08);
endShape();
//starting lip and chin
line(97.75,248.91,95.58,253.08);
//lips
beginShape();
vertex(96.5,257.41);
quadraticVertex(103.08,254.91,105.5,255.25);
vertex(108.41,255.91);
endShape();
//chin
beginShape();
vertex(96.5,260.08);
quadraticVertex(99.58,266.91,100.58,266.91);
quadraticVertex(98.06,271.75,97.75,272.5);
vertex(101.25,278.08);
endShape();
//neckand chin
beginShape();
vertex(120.08,284.08);
quadraticVertex(103.66,279.33,103.66,279.33);
quadraticVertex(126.25,259,135.25,255.76);
vertex(148.58,252.08);
endShape();
line(126.75,284.08,143.91,295.75);
//back of head and ears
line(180.25,184.91,197.58,208.41);
beginShape();
vertex(196.75,223.91);
quadraticVertex(189.25,234.25,184.75,248.5);
vertex(192.41,261.58);
endShape();
//ears
beginShape();
vertex(167.91,208.41);
quadraticVertex(174.25,213.75,171.25,223.25);
quadraticVertex(167,234.5,158.91,230.41);
vertex(160.75,221.5);
endShape();
//eyes
beginShape();
vertex(106.08,222.91);
quadraticVertex(109.5,223.5,114.25,223.08);
quadraticVertex(114.25,223.08,117.5,221);
vertex(120.41,218.75);
endShape();
}
function Face2(){
strokeWeight(1);
noFill();
//head shape
beginShape();
vertex(296.25,253.08)
quadraticVertex(296.25,237.25,300,220.25);
quadraticVertex(300,220.25,289.25,192.25);
quadraticVertex(289.25,192.25,258,184.91);
quadraticVertex(237,190.25,212,204.25);
quadraticVertex(204.25,216,199.5,234.49);
quadraticVertex(199.5,234.49,199.25,243.25);
vertex(202.25,251);
endShape();
//nose and eyes
beginShape();
vertex(201.75,253.25);
quadraticVertex(202.75,252.25,209,262.75);
quadraticVertex(209,262.75,211,266);
endShape();
//eyes
beginShape();
vertex(209.41,257.41);
quadraticVertex(209.41,257.41,212.75,257.41);
endShape();
beginShape();
vertex(226.41,261.58);
quadraticVertex(226.41,261.58,230.25,262.5);
vertex(238.91,259.08);
endShape();
//top of nose
beginShape();
vertex(218.5,246);
quadraticVertex(218.5,246,214,271);
quadraticVertex(214,271,198.5,294.5)
endShape();
beginShape();
vertex(202,295.5);
quadraticVertex(202,295.75,214.5,288);
quadraticVertex(214.5,286,220.5,280);
vertex(224.75,275.13);
endShape();
//lips
beginShape();
vertex(218.58,281.75);
quadraticVertex(218.58,281.75,221.58,285.91);
quadraticVertex(221.58,285.91,231.5,281.5);
vertex(241.08,284.33);
endShape();
beginShape();
vertex(226.41,289.08);
quadraticVertex(229,288.75,233.58,286.75);
endShape();
beginShape();
vertex(224.75,289.91);
quadraticVertex(226.75,293.5,228.5,297);
quadraticVertex(228.5,297,237.75,298.25);
quadraticVertex(237.75,298.25,247,296);
vertex(278.41,274.08);
endShape();
//neck
line(233.58,298.78,238,308);
beginShape();
vertex(296.25,241.41);
quadraticVertex(302,253.5,313.25,263.5);
endShape();
//ears
beginShape();
vertex(272.75,252.25);
quadraticVertex(276.5,263,282,263.5);
quadraticVertex(282,263.5,287.5,242.25);
quadraticVertex(287,235.5,280.75,234.25);
vertex(271.5,238.5);
endShape();
}
function Face3() {
noFill();
//hair
beginShape();
vertex(336,262);
quadraticVertex(336,262,326.25,252.08);
quadraticVertex(325.273,218,336.25,205.58);
quadraticVertex(335.258,204.027,338.25,200.58);
quadraticVertex(338.25,200.58,356,187.5);
quadraticVertex(356,187.5,386.5,184);
quadraticVertex(386.5,184,401.41,193.08);
quadraticVertex(401.41,193.08,412.58,209.75);
quadraticVertex(412.58,209.75,421.91,225.41);
quadraticVertex(421.91,225.41,420.75,244);
vertex(409.33,260.33);
endShape();
beginShape();
vertex(335,221);
quadraticVertex(343,204.667,354.667,202);
quadraticVertex(362.667,202.333,376.91,200.5);
quadraticVertex(380.667,200.667,403.5,208.41);
quadraticVertex(407,212.667,413.44,223.91);
quadraticVertex(413.667,241.667,409.667,254);
quadraticVertex(408,262,400.91,277.91);
quadraticVertex(389.3,275.66,375.3,271.3);
quadraticVertex(368,271.33,344.41,277.91);
quadraticVertex(340,269,332,251);
quadraticVertex(331,244.33,333.41,226.75);
endShape();
//neck
beginShape();
vertex(346.75,278.08);
quadraticVertex(348.667,279,349.833,279.75);
vertex(353.55,292.08);
endShape();
beginShape();
vertex(396.667,278);
quadraticVertex(395.33,282.5,394.08,295.58);
endShape();
//eyes
beginShape();
vertex(344.87,213);
quadraticVertex(353.24,213.25,366.25,210.25);
endShape();
beginShape();
vertex(381,209.75);
quadraticVertex(387.5,212.5,400.9,213.96);
endShape();
//nose
line(371.25,206.91,371.25,226.75);
beginShape();
vertex(375.08,210.4);
quadraticVertex(375.5,218.167,377,226.5);
vertex(378.75,230.75);
endShape();
beginShape();
vertex(363.75,233.58);
quadraticVertex(369,230.58,375.667,230.667);
vertex(378.75,233.667);
endShape();
//mouth
beginShape();
vertex(368.833,245.167);
quadraticVertex(380.667,243.833,390.97,242.41);
quadraticVertex(387.33,246.5,382.08,250.75);
quadraticVertex(363.667,250,354.66,245.32);
quadraticVertex(353.667,243.167,361.33,244.667);
vertex(370.25,245.25);
endShape();
}
function Face4(){
noFill();
//head shape
beginShape();
vertex(426.91,239.2);
quadraticVertex(434,208,445.91,191.58);
endShape();
beginShape();
vertex(453.75,189.08);
quadraticVertex(472.75,186.25,483.5,187.25);
quadraticVertex(501.75,194,513.08,200.5);
endShape();
beginShape();
vertex(513.08,202.41);
quadraticVertex(515,211,520,215);
vertex(525.75,218);
endShape();
beginShape();
vertex(523.91,220.57);
quadraticVertex(523.5,222.5,522.75,224.91);
endShape();
beginShape();
vertex(518.41,224.91);
quadraticVertex(521.25,227.5,524.01,230.02);
endShape();
//chin
beginShape();
vertex(526.25,239.2);
quadraticVertex(527.25,244.5,528.41,248.75);
quadraticVertex(530.41,251.75,530.41,259.08);
quadraticVertex(515.75,258.25,493.25,259.75);
vertex(475.08,263.5);
endShape();
beginShape();
vertex(468.58,258.08);
quadraticVertex(459.75,254,453.75,246.65);
endShape();
//neck
beginShape()
vertex(529.08,261.41);
quadraticVertex(513,267.5,502.78,273.08);
quadraticVertex(502.25,275,500.41,289.75);
endShape();
//eyes
beginShape();
vertex(477.37,208.37);
quadraticVertex(485,208,489.5,209.75);
quadraticVertex(491.25,209.25,493.5,208.47);
endShape();
beginShape();
vertex(511.41,209.13);
vertex(514.54,209.13);
endShape();
//nose
beginShape();
vertex(504.87,208.2);
quadraticVertex(519.35,218.84,516.75,219.25);
quadraticVertex(514.75,220.5,511.08,222.17);
endShape();
//mouth
beginShape();
vertex(504.87,233.81);
quadraticVertex(509.25,236.5,518.25,237);
vertex(525.62,235.41);
endShape();
}
For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.