sketch
var j=25
var l=15
var x=0
var y=0
var state=0
function setup() {
createCanvas(600,450);
background(0);
}
function draw() {
//draw square according to the distance to the mosue
/*if(mouseX<width/2){
background(0);
}else{
background(255);
}*/
background(0);
noStroke();
for (x=5;x<=width;x+=j){
for(y=5;y<=width;y+=j){
//define variables for color changes
var r =dist(mouseX,mouseY,x,y)
var r2=dist(mouseX,mouseY,0,0)
var r3=dist(mouseX,mouseY,width,height)
var r4=dist(mouseX,mouseY,0,height)
var r5=dist(mouseX,mouseY,width,0)
var r6=dist(mouseX,mouseY,width/2,height/2)
fill(r6,100-r,255-r+100)
//fill(r+10,150-r,255-r+200);
//color test 01
/*if(mouseX<width/2 & mouseYheight/2){
fill(r4,r4+100,r4+200);
}else if(mouseX>width/2 & mouseYheight/2){
fill(r3,r3+100,r3+200);
}*/
//color test 02
/*if(mouseX<width/2 & mouseYheight/2){
fill(r4,255-r,255-r+200);
}else if(mouseX>width/2 & mouseYheight/2){
fill(r3,255-r,255-r+200);
}*/
//color test 03
/*if(mouseX<width/2 & mouseYheight/2){
fill(255-(r+10),255-(150-r),r-200);
}else if(mouseX>width/2 & mouseYheight/2){
fill(255-r,r+100,r+200);
}*/
var l=(dist(mouseX,mouseY,x,y)/20+7)
if(state==0){
rect(x,y,l,l);
}else if(state==1){
circle(x+l/2,y+l/2,l);
}else if (state==2){
triangle(x,y,x+l,y,x+l/2,y+l);
triangle(x,y+l,x+l,y+l,x+l/2,y);
}
}
fill(255);
text('press mouse please :)',10,15);
}
}
function mousePressed(){
state+=1;
if(state>=3){
state=0;
}
}