Austin Treu – Project-03 – Dynamic Drawing

atreu – project-03

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-03

var circX = 300, circY = 300, rad = 100, circStroke = 1,
    stripeC = 50, circC = 20, backC = 100, 
    strokeC = 0, sr, sg, sb;

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

function draw() {
    //draw back and stripes
    background(backC);
    noStroke();
    fill(stripeC);
    rectMode(CORNER);
    rect(width/4, 0, width/4, height);
    rect(3*width/4, 0, width/4, height);
    //change to colors on mouse pos
    if(mouseX < width/4 || mouseX > 3*width/4){
        backC = 100;
        stripeC = 50;
        circC = 20;
        strokeC = mouseX/4;
    }
    else{
        backC = 'rgb(50, 100, 255)';
        stripeC = 'rgb(100, 20, 150)';
        circC = 'rgb(0,100,50)';
        //set circle stroke color values
        sr = int(mouseX/4);
        sg = int(mouseY/2);
        sb = int((mouseX+mouseY)/4);
        if(mouseY < 0){
            sg = 0;
            sb = sr;
        }
        strokeC = 'rgb('+sr+','+sg+','+sb+')';
    }
    //set a variable stroke
    circStroke = (mouseX/10);
    strokeWeight(circStroke);
    stroke(strokeC);
    circX = width - mouseX;
    circY = height - mouseY;
    fill(circC);
    //draw circles/squares/triangles
    /*NOTE: circ vars initially intended to deal with
        only circles, later adapted to deal w/all shapes
        so they are circ due to the default shape being a circle*/
    if(mouseX+mouseY < width/3+height/4 
        || mouseX+mouseY > 2*width/3+3*height/4){
        rectMode(CENTER);
        rect(circX, circX, rad*3, rad*3);
        rect(circX, circY, rad*2, rad*2);
        rect(circY, circX, rad, rad);
        rect(circY, circY, rad/2, rad/2);
    }
    else if(mouseX+mouseY < width/3 + 3*height/4){
        triangle(circX, circX-3*rad, 
            circX+3*rad, circX+3*rad, circX-3*rad, circX+3*rad);
        triangle(circX, circY-2*rad, 
            circX+2*rad, circY+2*rad, circX-2*rad, circY+2*rad);
        triangle(circY, circX-rad, 
            circY+rad, circX+rad, circY-rad, circX+rad);
        triangle(circY, circY-rad/2, 
            circY+rad/2, circY+rad/2, circY-rad/2, circY+rad/2);
    }
    else{
        ellipse(circX, circX, rad*3, rad*3);
        ellipse(circX, circY, rad*2, rad*2);
        ellipse(circY, circX, rad, rad);
        ellipse(circY, circY, rad/2, rad/2);
    }
}

I found this project to be incredibly interesting to experiment with, especially when it comes to utilizing the mouse’s position to control everything that happens. Reversing the x and y coordinates and using them in various transformations created ways to line all the shapes up in the middle of their motion.