Matthew Erlebacher Project 3 Dynamic Drawing

Interactive Drawing

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-03

var mouseX
var mouseY
// Allows the location of the mouse to be a variable

var squareSide = 50
// Creates a variable to control the size of the square

function setup() {
    createCanvas(640, 480);
    // Creates a blank canvas

}

function draw() {
    background(125);
    // Creates a blue background

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, height / 2, 30, height);
    // Creates a vertical rectangle to the far left

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the left

    fill(mouseX / 2.5 - mouseY / 1.9, mouseX / 2.5, mouseY / 1.9);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, height);
    // Creates a vertical rectangle that splits the canvas

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the right

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(width, height / 2, 30, height);
    // Creates a vertical rectangle to the far right

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 0, width, 30);
    // Creates a horizontal rectangle at the top

    fill(mouseX / 2.5 - mouseY / 1.9, mouseY / 1.9, mouseX / 2.5);
    rectMode(CENTER);
    rect(width / 2, height / 2, width, 30);
    // Creates a horizontal rectangle that splits the canvas

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 480, width, 30);
    // Creates a horizontal rectangle at the bottom

    fill(125);
    rectMode(CENTER);
    rect(0, 0, 30, 30);
    // Creates a gray square in the upper left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 4, 0, 30, 30);
    // Creates a gray square in the left quarter  top

    fill(125);
    rectMode(CENTER);
    rect(width / 2, 0, 30, 30);
    // Creates a gray square in the middle top

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, 0, 30, 30);
    // Creates a gray square in the quarter right top

    fill(125);
    rectMode(CENTER);
    rect(width, 0, 30, 30);
    // Creates a gray square in the upper right corner

    fill(125);
    rectMode(CENTER);
    rect(0, height / 2, 30, 30);
    // Creates a gray square in the far left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, 30);
    // Creates a gray square in the middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter right middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height / 2, 30, 30);
    // Creates a gray square in the far right middle

    fill(125);
    rectMode(CENTER);
    rect(0, height, 30, 30);
    // Creates a gray square in the quarter far left bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height, 30, 30);
    // Creates a gray square in the lower left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height, 30, 30);
    // Creates a gray square in the middle bottom of the canvas

    fill(125);
    rectMode(CENTER);

    rect(3 * width / 4, height, 30, 30);
    // Creates a gray square in the quarter right bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height, 30, 30);
    // Creates a gray square in the upper right corner

    fill(0, 0, 255);
    ellipse(width / 4, height / 2, mouseX / 5, mouseX / 5);

    fill(255, 0, 0);
    ellipse(3 * width / 4, height / 2, width / 5 - mouseX / 5, width / 5 - mouseX / 5);

    fill(255);
    rectMode(CENTER);
    rect(mouseX, height - mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseX and opposes mouseY

    fill(255);
    rectMode(CENTER);
    rect(width - mouseX, mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseY and opposes mouseX

    fill(0);
    rectMode(CENTER);
    rect(width - mouseX, height - mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that opposes location of mouse

    fill(0);
    rectMode(CENTER);
    rect(mouseX, mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that follows the mouse
}

This project was fairly difficult for me. Apart from struggling with how to make it interactive, it was very hard for me to come up with something to create. I ended up making a transforming light show.