-The triangles rotate clockwise when mouse moving to the right, and counterclockwise when moving to the left
-The color become lighter when mouse moving to the bottom right, and darker when moving to the top left
-The triangle and change distance as mouse moving left, and it do the opposite when moving right.
– The smile faces shrink as mouse moves.
/* Jiayi Chen
jiayiche Section A */
function setup() {
createCanvas(600, 450);
rectMode(CENTER);
}
function draw() {
print('mouseX='+ mouseX +'mouseY'+mouseY)
//change background
backgroundchange();
// smile face background
for (var a=5;a<600;a=a+35){
for (var b=0;b<450;b=b+35){
push();
translate(a,b);
smileface();
//change size
var mx =constrain(mouseX,0,450)
var my =constrain(mouseY,0,300)
if(dist(mx,my,a,b)<= 150){
d=30* dist(mx,my,a,b)/150;
}
pop();
}
}
//floating triangle and rectangle
translate(constrain(mx,0,575),constrain(my,0,425));
push();
noStroke()
cr=mx/450*255
fill(cr,cr,cr,200)
rect(0,0,50,50);
var ang=mouseX/600*360
//6 triangles
push();
scale(3*constrain(my,0,450)/450*3)
push();
triDist=100*constrain(mx,0,600)/600
rotate(radians(ang));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
push();
rotate(radians(ang+60));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
push();
rotate(radians(ang+120));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
push();
rotate(radians(ang+180));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
push();
rotate(radians(ang+240));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
push();
rotate(radians(ang+300));
translate(triDist,0);
triangle(0, 30, 30, 30, 15, 15);
pop();
pop();
pop();
}
var x=16
var y=16
var d=30
//single simle face
function smileface(){
push();
fill('yellow')
//head
ellipse(x,y,d);
//mouth
arc(x, y+d*1/7, d/2, d/2, 0, PI);
//eye
fill(0)
ellipse(x+d*1/5,y-d*1/5,d/6);
ellipse(x-d*1/5,y-d*1/5,d/6);
pop();
}
//change in background
function backgroundchange(){
var r = mouseX/600*255
var g = mouseX/600*255
var b = mouseY/600*255
background(r,g,b)
}