/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Dynamic Drawing*/
var colorBack = 120;
var colorDia = 183;
var colorEye = 240;
var colorPupil = 0;
var pupilWidth = 19;
var pupilHeight = 19;
var tongueH = 50;
var sizeDia = 300; //rotate this and leave a afterimage
var angle = 0;
var tonguesizecha =1;
function setup() {
createCanvas(600, 600);
noStroke();
//everything in relation to mouseY
}
function draw() {
background(colorBack);
// For dia movemet and color
var DiaSizeCha = map(mouseY, 0, height, sizeDia, 600);
//dia
var anglemap = map (mouseY, 0, height, angle, 5);
rotate(anglemap, 300 );
var colorDiamap = map(mouseY, 0, height, 0, 256);
fill(colorDiamap, 153, 153);
noStroke();
rectMode(CENTER);
rect(300,300, DiaSizeCha, DiaSizeCha);
pop(); // pop allows thhe face to separate from dia
//face
fill(233,194,144);
ellipse(300,300, 265, 265);
//mouth
fill(0);
arc(300, 365, 37, 30,0, PI);
//tongue map
var tongueMove = map(mouseY, 0, height, tonguesizecha, 5);
//tounge
fill(240, 100, 100);
arc(300, 372, 37, tongueH*tongueMove,0, PI);
//outereye
push();
var colorEyemap = map(mouseY, 0, height, 0, 256);
fill(colorEyemap, 100,100);
arc (230, 288, 54,54,0 , PI);
pop();
push()
var colorEyemap = map(mouseY, 0, height, 0, 256);
fill(colorEyemap, 100, 100);
arc (375, 288, 54,54, 0, PI);
//pupil move/map
var pupilMove = map( mouseY, 0, height, pupilHeight, 2);
//pupil
fill(colorPupil, 20, 30);
arc(230, 288, pupilWidth +pupilMove, pupilHeight+pupilMove, 0, PI);
fill(colorPupil, 20, 30);
arc(375,288, pupilWidth + pupilMove, pupilHeight + pupilMove, 0, PI);
}
This assignment helped me think about multiple applications being used all at once. In order to accomplish this I made mouseY be depended on a lot. The idea was to make the user think that the mouse controlled the tongue and therefore control everything else. Having there be a common factor in all moving objects helped organize the code. This code also helped me better understand variables and the “map” function.