mmirho – Project 3 – Dynamic Drawing

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! 🙂

sketch

//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;
    }
}