xxxxxxxxxx
108
let angle1 = 0;
let angle2 = 0;
let angle3 = 0;
let angle4 = 0;
let spinSpeed1 = 0.05;
let spinSpeed2 = 0.07;
let spinSpeed3 = 0.09;
let spinSpeed4 = 0.11;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let centerX1 = width / 4;
let centerY1 = height / 4;
let centerX2 = 3 * width / 4;
let centerY2 = height / 4;
let centerX3 = width / 4;
let centerY3 = 3 * height / 4;
let centerX4 = 3 * width / 4;
let centerY4 = 3 * height / 4;
let radius = width / 4 - 25;
// calculate the position of the first circle based on its center, radius, and angle of rotation
let x1 = centerX1 + radius * cos(angle1);
let y1 = centerY1 + radius * sin(angle1);
// rotate the canvas around the center of the first circle
push();
translate(centerX1, centerY1);
rotate(angle1);
// draw the first circle at the calculated position
ellipse(0, 0, 50, 50);
// reset the rotation and translation
rotate(-angle1);
translate(-centerX1, -centerY1);
pop();
// increment the angle of rotation for the first circle
angle1 += spinSpeed1;
// calculate the position of the second circle based on its center, radius, and angle of rotation
let x2 = centerX2 + radius * cos(angle2);
let y2 = centerY2 + radius * sin(angle2);
// rotate the canvas around the center of the second circle
push();
translate(centerX2, centerY2);
rotate(angle2);
// draw the second circle at the calculated position
ellipse(0, 0, 50, 50);
// reset the rotation and translation
rotate(-angle2);
translate(-centerX2, -centerY2);
pop();
// increment the angle of rotation for the second circle
angle2 += spinSpeed2;
// calculate the position of the third circle based on its center, radius, and angle of rotation
let x3 = centerX3 + radius * cos(angle3);
let y3 = centerY3 + radius * sin(angle3);
// rotate the canvas around the center of the third circle
push();
translate(centerX3, centerY3);
rotate(angle3);
// draw the third circle at the calculated position
ellipse(0, 0, 50, 50);
// reset the rotation and translation
rotate(-angle3);
translate(-centerX3, -centerY3);
pop();
// increment the angle of rotation for the third circle
angle3 += spinSpeed3;
// calculate the position of the fourth circle based on its center, radius, and angle of rotation
let x4 = centerX4 + radius * cos(angle4);
let y4 = centerY4 + radius * sin(angle4);
// rotate the canvas around the center of the fourth circle
push();
translate(centerX4, centerY4);
rotate(angle4);
// draw the fourth circle at the calculated position
ellipse(0, 0, 50,50)
// reset the rotation and translation
rotate(-angle4);
translate(-centerX4, -centerY4);
pop();
// increment the angle of rotation for the third circle
angle4 += spinSpeed4;
}