Project 3 – Alison Hoffman

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 3

//*This Program is a dynamic drawing that responds to the mouseX and mouseY position
function setup() {
    createCanvas(640,480);
}

function draw() {
    background("lavender");
    noStroke();
    rectMode(CENTER);

    var boxColor = map(mouseX,0,width,0,180);
    var boxTrans = map(mouseX,0,width,100,255);
    //top row 
    fill(boxColor);
    push();
    translate(width*.15,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

    //middle row 
    fill(255,255,255,boxTrans);
    push();
    translate(width*.12,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.30,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.50,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.70,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.88,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    //rect(width*.25,height/2,25,25);
    //rect(width*.47,height/2,25,25);
    //rect(width*.69,height/2,25,25);
    //rect(width*.86,height/2,25,25);



    //bottom row
    fill(boxColor);
    push();
    translate(width*.15,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

}

For this project I focused on making the mouseX & mouseY interaction feel intuitive. As you move mouseX left to right, the boxes in the first and third row rotate alternatively based on the mouseX position. The shade of the boxes also get lighter as you increase mouseX. The transparency of the the smaller white boxes in the middle row also decrease as mouseX decreases. MouseY controls the scale of the middle boxes as well.