Project 03: Dynamic Drawing

1. Size of large circle changes
2. Shade of large circle changes
3. Rotation of smaller circle changes
4. Stroke of smaller circles changes

var uniX = 0;
var uniY = 0;


function setup() {
    createCanvas(600, 450);
    background(0);
}

function draw() {
    uniX = mouseX;
    uniY = mouseY;
    background(0);
    push();
    fill(255);
    ellipse (uniX,uniY,200);
    pop();
    for (let i = 25; i <= 575; i+=50)
    {
        for (let j = 25; j <= 425; j+=50)
        {
            circleChange(i,j);
        }
    }
}

function circleChange(Cx,Cy) {
    distanceO = Math.sqrt((uniX-Cx)*(uniX-Cx) + (uniY-Cy)*(uniY-Cy));
    distance = constrain(distanceO, 10, 200);
    var diameter = distance/4;
    var angle = Math.atan2((uniY-Cy),(uniX-Cx));
    push();
    strokeWeight(1);
    stroke(0,0,255,255);
    noFill();
    arc(Cx, Cy, diameter, diameter, -0.25*PI, 0.75*PI);
    pop();
    push();
    strokeWeight(1);
    stroke(255,0,0,255);
    arc(Cx, Cy, diameter, diameter, 0.75*PI, 1.75*PI);
    pop();

    push();
    strokeWeight(0);
    fill(distance/200*255);
    ellipse (Cx,Cy,diameter-2);
    pop();

    fill(255);
    strokeWeight(distanceO/60);
    ellipse((Cx+diameter*Math.cos(angle)/3),(Cy+diameter*Math.sin(angle)/3),diameter/3);

}