Dynamic Drawing

Sean McGadden

sketch

//Sean McGadden
//Section C @ 1:30
//smcgadde@andrew.cmu.edu
//Project-03-Dyanmic Drawing

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0);
    noStroke();
    
//Size and Position Variable
    var blackDot = 300;
        
    if (mouseX > 320) {
        blackDot = (320 - (mouseX - 320));
    }
    
    if (mouseX < 320) {
        blackDot = ((320 - mouseX) + 320);
    }
    
    //Orange Rectangles
    //Color Change
    if (mouseX < 340) {
        fill(129, 224, 20)
        rect(blackDot, mouseX, mouseY, mouseX);
        rect(blackDot, 100, mouseY, mouseX);
        rect(blackDot, 200, mouseX, mouseX);
        rect(blackDot, 300, mouseY, mouseX);
        rect(blackDot, 400, mouseX, mouseY);
        rect(blackDot, 150, mouseY, mouseY);
    }
    //Color Change
    if (mouseX > 340) {
        fill(229, 79, 20);
        rect(blackDot, 250, 100, 100);
        rect(blackDot, 350, 250, 350);
        rect(blackDot, 350, blackDot,              blackDot);
        rect(blackDot, 350, mouseX,                blackDot);
        rect(blackDot, 350, mouseY,                blackDot);
        rect(blackDot, 350, blackDot,              mouseX);
    }
    
    //Blue Rectangles
    
    fill(66, 134, 244);
    rect(mouseX, 240, blackDot, mouseY);
    rect(mouseX, blackDot, blackDot, mouseY);
    rect(mouseY, blackDot, blackDot, mouseX);

    //White Rectangles
    
    fill(255)
    rect(blackDot, 60, blackDot, mouseY);
    rect(mouseX, blackDot, blackDot, mouseY);
    rect(mouseY, 400, blackDot, blackDot);
    
    
    // White Ellipses
    
    fill(255);
    ellipse(mouseX, 100, 20, mouseX);
    ellipse(mouseX, 100, 20, mouseX);
    ellipse(mouseX, 100, 20, mouseX);
    
    
    //Orange Ellipses
    //Color Change
    if (mouseY < 250) {
        fill(129, 224, 20)
        ellipse(blackDot, mouseY, 30,                 mouseY);
        ellipse(mouseY, mouseY, mouseX,               100);
    }
    if (mouseY > 250) {
        fill(229, 79, 20)
    
        ellipse(blackDot, mouseY, 30,                 blackDot);
        ellipse(mouseX, mouseY, 20, 20);
        ellipse(blackDot, mouseY, 30, 30);
        ellipse(blackDot, mouseX, 100, 100)
    
    }
    
    //Blue Ellipses
    fill(66, 134, 244)
    ellipse(blackDot, mouseX, 50, 50);
    ellipse((mouseX + 50), 300, mouseY, 20);
    ellipse(mouseY, blackDot, 40, 40);
    
}
   

This project was interesting to play with shapes and colors. There are many ways that mouse tracking can ultimately lend itself to input changes. I think I would’ve liked to have had slightly more control over the movement of the shapes, I think perhaps more diagonal or rotational movements would’ve been nice. This project is built from assignment 2A and as I layered more changes I seemed to have  lost track of some of these changes and I believe there is some redundancy from the layering. Overall, I learned more processes of javascript which is the goal.