Dynamic Drawing – Project 3

function setup() {
    createCanvas(600, 400);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    var w = width
    var h = height
    var mX = mouseX
    var mY = mouseY
    var diam= dist(w/2, h/2,mX,mY) //diameter of center circle
    var diam2= 2 * (dist(w/2,h/2,w/2 + w/4, h/2)- diam/2)// diameter of peripheral circles
    background(255);
    noFill();
    strokeWeight(constrain(diam/10,3,6)); //stroke 
    stroke(diam,diam/3,170)
    circle(w/2,h/2,diam); //this is the big circle in the middle
    
    push();
    noFill();
    strokeWeight(constrain(diam2/10,5,15));
    translate(w/2,h/2);// translates origin to canvas center
    
    var angle = atan((mY -h/2) / (mX - w/2)) //this outputs the angle of the cursor to the center of the canvas
    
    if(mX < w/2){
    var x = diam/2 * cos(angle - PI) // x position of peripheral circle based on angle of cursor
    var y = diam/2 * sin(angle - PI) // y position of peripheral circle based on angle of cursor
    } else {
    var x = diam/2 * cos(angle )
    var y = diam/2 * sin(angle )
    }
    for (var r=0; r<=2 * PI;r+=PI/4){ //the circles rotate every 45 degrees
    rotate(r);
    circle(x ,y,diam2); // these are the peripheral circles
}
    pop();

}