Dynamic

 
 

This project intended to use the way mouse interact on the screen to generate different composition. Motion is controlled directly by the human gesture of mouse movement, multiple parameters are coordinated and coupled to the mouse movement. The center cirles spins in respond to mouse movement and their color and size also changes accordingly.  The four side square also changing shapes and postion accoding to the motion of mouse.

To view the entire interactive Javascript, please click here.

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background('lightPink');

    //box
    fill(255-(0.1*mouseX));
    noStroke();
    rect(0, 400-(0.75*mouseX), 0.125*mouseX, 0.125*mouseX);
    rect(mouseX, 0, 0.125*mouseX, 0.125*mouseX);
    rect(560-mouseX, 400, 0.125*mouseX, 0.125*mouseX);
    rect(560, 0.75*mouseX, 0.125*mouseX, 0.125*mouseX);

    //circles
    push();
    fill(255-(0.5*mouseX));
    noStroke();
    translate(320, 240);
    rotate((millis())/(mouseX*10));
    ellipse(-50, 0, 100, 100);
    fill(0+(0.5*mouseX));
    ellipse(50, 0, 100, 100);
    pop();

}