Anti-rotation command

Processing Coding Questions
1

float angle = 0, radius = 300;
int num = 6;

void setup() {
size(800, 800);
fill(255);
}

void draw() {
fill(0, 20);
rect(-50, -50, width+100, height+100);

translate(width/2, height/2);
rotate(angle);

if (mousePressed) {
angle = angle + -0.05;
radius = radius * 0.975;
} else {
radius = radius + (300 - radius) * 0.05;
}

for (int i=0; i< 8; i++) {
fill(#214EFC);
ellipse(100cos(iTWO_PI / 8), 100sin(iTWO_PI/ 8), 50, 50);
}

for (int i=0; i< 8; i++) {
fill(#19F5E8);
ellipse(300cos(iTWO_PI / 8), 300sin(iTWO_PI / 8), 150, 150);
}
}

I would like to ask how to make the outer ring rotate in the opposite direction.

2

Please format your code. Also, you placed this code in p5.js but this is java. I have fixed the category of this post for you.

Kf

1 Like
3

You can counter the rotation using another rotate() before the outer ellipses are drawn. Just add a rotation(-angle) and using pushMatrix() and popMatrix() before and after the first and second rotation(). Or you could just use rotate(-angle-angle) right before the outer ellipses are drawn.

1 Like