Rotating rects around a circle perimeter pointing to the center

[Michalis]

Hello,
I want to achieve something like this but I have no idea how. I checked almost every example, on the application and on the website, checked libraries, googled, but still, I didn’t manage to find a solution (sorry if I didn’t see something similar for processing already existing). I don’t know how to write this code written in p5.js for processing. Any help would be really appreciated. Thanks in advance!

[TfGuy44]

Sample code:

void setup(){
  size(400,400);
  rectMode(CENTER);
}

void draw(){
  background(0);
  noStroke();
  fill(0,200,0);
  translate(width/2, height/2);
  for( int i = 0; i < 20; i++){
    rect( 150, 0, 40, 10 );
    rotate( TWO_PI / 20.0 );
  }
}

[kll]

so the example is in p5.js,
but you want play

processing IDE 3.5.3 JAVA mode?

and need a translation?

translate( width/2,height/2);
fill(200,0,0);
for ( int i =0; i<30; i++ ) {
  rotate(TWO_PI/30.0);
  rect ( 30,0,10,2);
}

pls understand how rotation works in processing

• first move to center with translate
• rotate ( 0 ) starts right side
• rotate ( dalpha ) is clockwise.

[Michalis]

Thanks for the replies so far. However I can’t rotate them without having them overlapping.

float x=TWO_PI/30;
void draw() {
  x+=.0001;
  background(0);
  translate(width/2, height/2);
  fill(200, 0, 0);
  for (int i =0; i<30; i++ ) {
    rotate(x);
    rect (30, 0, 10, 2);
  }
}

[kll]

@Michalis

x+=.0001;

disable that line and try again

[Michalis]

I mean, I can’t animate them to move around…

[kll]

i go in a total other way,
but ok, even can rotate this:

float many = 60;
float x=TWO_PI/many;
float ang = 0, dang= 0.01;

void setup() {
  size(200, 200); 
  noStroke();
  fill(200, 0, 0);
  textSize(10);
  rectMode(CENTER);
}

void draw() {
  background(200, 200, 0);
  translate(width/2, height/2);
  rotate(-PI/2.0+ang);
  ang += dang;   
  show_sec();
}

void show_sec() {
  for (int i =0; i<many; i++ ) {
    rect (75, 0, 10, 5);
    if ( i%5 == 0) { 
      text(i, 87, 5);
      strokeWeight(0.1);
      stroke(0);
      line(0, 0, 70, 0);
      noStroke();
    }
    rotate(x);
  }
}

[Michalis]

Thank you!