Project-03 Dynamic Drawing

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-03


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(200);
    noStroke();
 

    var cornerDist = dist(width, height, width/2, height/2);
    var mouseDist = min( dist(width/2, height/2, mouseX, mouseY ), cornerDist );
    var reverseDist = (cornerDist - mouseDist) / cornerDist;
    //The ellipses' sizes are proportional to the ratio of the mouse's distance 
    //from the corners to the distance of the corner from the center
    if( reverseDist >= 0 )
    {
      fill(255);
      ellipse(width/2,height/2, 960 * reverseDist, 600 * reverseDist);
      fill(50);
      ellipse(width/2,height/2, 300 * reverseDist, 300 * reverseDist);
    }
    
    //Fill value for the spiral is dependent on mouse X and Y
    var startRed = ( mouseX / width );
    var startGreen = ( mouseY / height );
    var startBlue = ( abs( mouseX - width / 2 ) + abs( mouseY - height / 2 ) ) / width;
    var fillRed = startRed;
    var fillGreen = startGreen;
    var fillBlue = startBlue;
    //Draw a spiral of circles; the curvature of the spiral depends on mouseDist
    for( offset = 1; offset < cornerDist; offset *= 1.1 )
    {
      fill(fillRed, fillGreen, fillBlue);
      push();
      translate( width/2, height/2 );
      rotate( ( 8 * PI * log(log(offset)) * ( mouseDist / cornerDist) ) );
      ellipse( offset, 0, 10 + offset / 10, 10 + offset / 10 );
      pop();
      fillRed += 3 * startRed; fillGreen += 3 * startGreen; fillBlue += 3 * startBlue;
    }
} 

I worked with a spiral that unwraps based on the mouse’s distance from the center of the image.