Variables:
- The face changes color as u move your mouse.
- Eyes and arms follows the mouse.
- When mouse is pressed, the hands will grow fingers.
var mouse = false;
function setup() {
createCanvas(480, 640);
background(220);
}
function draw() {
background(220);
drawFace();
noFill();
drawMouth();
drawTeeth();
drawLip();
eyeBallOne();
eyeBallTwo();
handOne();
handTwo();
}
function drawMouth() {
strokeWeight(4);
fill(255,0,0,255);
curve(145, 250, 145, 200, 335, 200, 335, 250);
curve(145, -400, 145, 200, 335, 200, 335, -400);
}
function drawLip() {
strokeWeight(4);
stroke(0);
noFill();
curve(145, 250, 145, 200, 335, 200, 335, 250);
curve(145, -400, 145, 200, 335, 200, 335, -400);
}
function drawTeeth() {
strokeWeight(3);
stroke(255);
line(145, 200, 175, 248);
line(335, 200, 305, 248);
line(175, 248, 205, 195);
line(305, 248, 275, 195);
line (205, 195, 240, 275);
line (275, 195, 240, 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);
rect (100,100,280,320);
}
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 (330,150,50);
let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
let x = 330 + 20*0.75*cos(angle);
let y = 150 + 20*0.75*sin(angle);
fill(150,150,0);
circle (x,y,15);
}
function handOne() {
var x = 100;
var y = 420;
var tan = atan2(mouseX-x,mouseY-y);
if (dist (mouseX,mouseY,x,y) < 200)
//if arm mouse is within arm distance//
{ var dis = dist (mouseX,mouseY,x,y) /2;
// mid point of distance between mouse and arm//
var num = (10000)-(dis*dis);
var sid = sqrt(num);
//pathegoriam therom//
stroke (10);
line (x,y, (mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid);
line ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, mouseX, mouseY);
fill(255,255,255);
ellipse ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, 25,25);
if (mouse)
{
strokeWeight(5);
line (mouseX, mouseY, mouseX+30, mouseY-30);
line (mouseX, mouseY, mouseX-30, mouseY-30);
line (mouseX, mouseY, mouseX, mouseY-60);
ellipse (mouseX,mouseY,50,50);
}
else {
ellipse (mouseX,mouseY,50,50);
}
}
else
{
stroke(10);
line (x,y, x+sin(tan)*200, y+cos(tan)*200);
fill(255,255,255);
ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
if (mouse)
{
//hand//
strokeWeight(5);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
//fingers//
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
else {
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
}
}
function handTwo() {
var x = 380;
var y = 420;
var tan = atan2(mouseX-x,mouseY-y);
if (dist (mouseX,mouseY,x,y) < 200)
//if arm mouse is within arm distance//
{ var dis = dist (mouseX,mouseY,x,y) /2;
// mid point of distance between mouse and arm//
var num = (10000)-(dis*dis);
var sid = sqrt(num);
//pathegoriam therom//
stroke (10);
line (x,y, (mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid);
//origin point to the medien of the triangle (isosceles)//
line ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, mouseX, mouseY);
fill(255,255,255);
ellipse ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, 25,25);
if (mouse)
{
strokeWeight(5);
line (mouseX, mouseY, mouseX+30, mouseY-30);
line (mouseX, mouseY, mouseX-30, mouseY-30);
line (mouseX, mouseY, mouseX, mouseY-60);
ellipse (mouseX,mouseY,50,50);
}
else {
ellipse (mouseX,mouseY,50,50);
}
}
else
{
stroke(10);
line (x,y, x+sin(tan)*200, y+cos(tan)*200);
fill(255,255,255);
ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
if (mouse)
{
strokeWeight(5);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
else {
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
}
}
function mousePressed() {
mouse =!mouse;
// when pressed show fingers//
}