- Size of large circle changes
- Shade of large circle changes
- Rotation of smaller circle changes
- 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);
}