PROJECT-03 (dynamic drawing)

// SEAN CHEN
// 15-104 A

var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1; 
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle

function setup() {
    smooth();
    createCanvas(400, 400);
    background(255,219,88);
}

function spin(speed, vari) { // white orbiting circles
    push();
    noStroke();
    rotate(radians(angle));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6); // each big stationary orbit circle
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
    angle += speed*flip;
    pop();
}

function spin2(speed, vari) { // same as 'spin' but cyan
    push();
    noStroke();
    fill(0,255,255);
    rotate(radians(angle2));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle2 += speed*flip;
    pop();
}

function spin3(speed, vari) { // same as 'spin' but magenta
    push();
    noStroke();
    fill(255,0,255);
    rotate(radians(angle3));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle3 += speed*flip;
    pop();
}

function draw() {
    var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
    background(0);
    translate(width/2, height/2); // new origin at center
    noStroke();
    circle(0, 0, size); // center circle
    spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
    spin2(1.5*vari/150, vari); // for cyan
    spin(2*vari/150, vari); // for white
    if (mouseIsPressed) {
        flip = -1; // reverse rotation if pressed
    } else {
        flip = 1; // clockwise otherwise
    }
}