Kevin Riordan Project-03-Dynamic-Drawing

kzr-project-03

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_03*/
var lineX=0;
var lineY=0;
var colorX=0;
var colorY=0;
var colorR=0;

function setup() {
    createCanvas(640,480);
}

function draw() {
    background(0);
    //gridlines
    for(var c=0; c<=640; c+=20) {
        strokeWeight(0.3);
        stroke(200);
        line(c,0,c,480);
        line(0,c,640,c);
    }
    //lines coming in from the edges from top and bottom
    for (lineX=0; lineX<=640; lineX+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineX/4,colorX,colorY);
        line(lineX,0,mouseX,mouseY);
        line(640-lineX,640,mouseX,mouseY);
    }
    //lines coming in from the edges from left and right
    for (lineY=0; lineY<=640; lineY+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineY/4,colorX,colorY);
        line(0,lineY,mouseX,mouseY);
        line(640,640-lineY,mouseX,mouseY);
    };
    //lines going out from center to positions around the mouse
    for (var a=50; a<=650; a+=50) {
        //varying the color based on where mouse is
        colorR=(mouseX+mouseY)/2;
        colorR=constrain(colorR,0,255);
        colorX=255-mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=255-mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(colorR,colorX,colorY);
        line(width/2,height/2,mouseX+a,mouseY-a);
        line(width/2,height/2,mouseX-a,mouseY-a);
        line(width/2,height/2,mouseX+a,mouseY+a);
        line(width/2,height/2,mouseX-a,mouseY+a);
    }
    //large circle made up of smaller circles at certain increments
    for(var b=0; b<=360; b+=5) {
        colorX=(mouseX+mouseY)/2;
        colorX=constrain(colorX,0,255);
        fill(0,colorX,colorX);
        push();
        translate(width/2,height/2);
        rotate(radians(b));
        //loop used for incrementing the larger circles
        for (var g=1; g<=40; g++) {
            ellipse(mouseX*g,mouseY*g,5*(g/2),5*(g/2));
            ellipse(mouseX/g,mouseY/g,5/g,5/g);
        }
        pop();
        //triangular grid-like lines around circles
        push();
        translate(width/2,height/2);
        rotate(radians(b*2));
        for (var h = 1; h<=40; h++) {
            triangle((mouseX+b)/h,(mouseY-b)/h,mouseX/h,mouseY/h,(mouseX-b)/h,(mouseY+b)/h);
            triangle((mouseX+b)*h,(mouseY-b)*h,mouseX*h,mouseY*h,(mouseX-b)*h,(mouseY+b)*h);
        }
        pop();
    }
    //rectangles in background over gridlines
    for(var d=20;d<=640;d+=40) {
        //two different loops because I wanted to adjust color and placement, probably unneccessary
        for(var e=0;e<=640;e+=40) {
            fill(0,colorX-20,colorY-20,40);
            rect(d,e,20,20);
            fill(colorX-30,colorY-30,colorX-50,10);
            rect(d+10,e,mouseX/10,mouseY/10);
        }
        for(var f=0;f<=640;f+=40) {
            fill(colorX-40,colorY-40,0,50);
            rect(d+10,f-10,20,20);
            fill(colorY-40,0,colorY-40,60);
            rect(d+30,f-10,20,20);
        }
    }
}

I started by making the gridlines, and then started using loops to put in shapes, changing the color and position based on where the mouse was. I originally made it 800×800, but changed it to 640×480 at the end.