// 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.