Move your mouse over the image from the top left corner to the bottom right corner. If you move just outside the bottom right corner, something colorful will happen!
I apologize for not using the 640 x 480 canvas size, that caused my program not to work last time I posted.
My program changes color, and fades into the background,
The lines (Which are rectangles) change size and end-location,
The squares rotate with the mouse location.
I hope I satisfied all the requirements! 🙂
//variable created to the size of the canvas
//(I used numbers here because width/height
//can't be input into global variables, I think
var blockW = 480/6;
var blockH = 480/6;
//The different fade variables I created
//to make each rotating square fade into
//the background seperately from each other
var fade = 255;
var fade1 = 255;
var fade2 = 255;
var fade3 = 255;
var fade4 = 255;
var fade5 = 255;
var angle = 0;
var side = 0;
var red = 255;
var blue = 255;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(0); //black background
noStroke();
//The lines are now strobe-party-effected ONLY
//when the mouse is beyond the bottom right edge
//of the canvas
if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
fill(random(0,255), random(0,255), random(0,255));
} else {
fill(255);
}
//These are all the vertical lines
rect(blockW, 0, 5, 2*mouseY);
rect(2*blockW, 0, 5, 2*mouseY);
rect(3*blockW, 0, 5, 2*mouseY);
rect(4*blockW, 0, 5, 2*mouseY);
rect(5*blockW, 0, 5, 2*mouseY);
//These are all the horizontal lines
rect(0, blockH, 2*mouseX, 5);
rect(0, 2*blockH, 2*mouseX, 5);
rect(0, 3*blockH, 2*mouseX, 5);
rect(0, 4*blockH, 2*mouseX, 5);
rect(0, 5*blockH, 2*mouseX, 5);
rectMode(CENTER);
side = min(blockH/2, blockW/2);
//The side of the rotating squares is based off the
//length of the smallest
//This is the rotating square in box 1x1
if ((mouseX > blockW) & (mouseY > blockH)) {
fill(fade);
push();
rectMode(CENTER);
translate(blockW/2, blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade -= 1;
} else {
fade = 255;
}
//This is the rotating square in box 2x2
if ((mouseX > 2*blockW) & (mouseY > 2*blockH)) {
fill(fade1);
push();
rectMode(CENTER);
translate(3*blockW/2, 3*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade1 -= 1;
} else {
fade1 = 255;
}
//This is the rotating square in box 3x3
if ((mouseX > 3*blockW) & (mouseY > 3*blockH)) {
fill(fade2);
push();
rectMode(CENTER);
translate(5*blockW/2, 5*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade2 -= 1;
} else {
fade2 = 255;
}
//This is the rotating square in box 4x4
if ((mouseX > 4*blockW) & (mouseY > 4*blockH)) {
fill(fade3);
push();
rectMode(CENTER);
translate(7*blockW/2, 7*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade3 -= 1;
} else {
fade3 = 255;
}
//This is the rotating square in box 5x5
if ((mouseX > 5*blockW) & (mouseY > 5*blockH)) {
fill(fade4);
push();
rectMode(CENTER);
translate(9*blockW/2, 9*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade4 -= 1;
} else {
fade4 = 255;
}
//This is the rotating square in box 6x6
if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
fill(fade5);
push();
rectMode(CENTER);
translate(11*blockW/2, 11*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
fade5 -= 1;
} else {
fade5 = 255;
}
//The red square in the cell 2x5
if ((mouseX > 2*blockW) & (mouseY > 5*blockH)) {
fill(red, 0, 0);
push();
rectMode(CENTER);
translate(3*blockW/2, 9*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
red -= 1;
} else {
red = 255;
}
//The blue square in the cell 5x2
if ((mouseX > 5*blockW) & (mouseY > 2*blockH)) {
fill(0, 0, blue);
push();
rectMode(CENTER);
translate(9*blockW/2, 3*blockH/2);
rotate(radians(angle));
angle = (mouseY + mouseX)/2;
rect(0, 0, side, side);
pop();
blue -= 1;
} else {
blue = 255;
}
}