Project 03: Dynamic Drawing

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;
        }
}