Make rects point to center of circle

SnailPropulsionLabs

Hi all, I have the below code that draws rects around the circumference of a circle but I would like them to point to the center which I am unsure how to do.

The ultimate plan is to have each rect actually be a group of 60 rects (it'll be bigger that what it is currently) so that I can change the colours of the segments but one step at a time, can anyone suggest how to make them point toward the center of the circle?

Thanks.

float a, amt = 0.0008;
ArrayList<PVector> pos = new ArrayList<PVector>();
ArrayList<obj> shapes = new ArrayList<obj>();
int r = 0, rotation = 0;

void setup() {
  fullScreen();
  noStroke();
  rectMode(CENTER);
  drawRing(0, 0, 350, 60);
}

void drawRing(int cX, int cY, float cirqRad, int numElems) {
  //Distribute shapes around circle dependant on arc length by user: quarks
  //https://forum.processing.org/one/topic/distribute-shapes-around-circle-dependant-on-arc-length.html
  float r = cirqRad; //radius of circle
  // Calculate number of ellipses round circumference
  int numDots = numElems;//round(TWO_PI * r / circWid);
  // Calculate angle between two ellipses
  float theta = TWO_PI / numDots;
  pushMatrix();
  translate(cX, cY);
  for (float p = 0; p < numDots; p++) {
    float myTheta = p*theta; //calculate current angle
    float x = r*cos(myTheta); //calculate xPos
    float y = r*sin(myTheta); //calculate yPos
    pos.add(new PVector(x, y));
  }
  popMatrix();
}
float tmp = 0;
void draw() {
  background(0); //draw BG
  translate(width/2, height/2);
  for (obj o : shapes) o.draw();
  if (r < pos.size()) shapes.add(new obj(pos.get(r).x, pos.get(r).y, 10, 35, rotation));
  else r = 0;
  r++;
}

class obj {
  PVector pos;
  float w, h, rot;

  obj(float x, float y, float w, float h, float rot) {
    this.pos = new PVector(x, y);
    this.w = w;
    this.h = h;
    this.rot = rot;
  }

  void draw() {
    rectMode(CENTER);
    rect(pos.x, pos.y, w, h);
  }
}

Chrisir

0,0

Chrisir

float a, amt = 0.0008;
ArrayList<PVector> pos = new ArrayList<PVector>();
ArrayList<obj> shapes = new ArrayList<obj>();
int r = 0, rotation = 0;

void setup() {
  fullScreen();
  noStroke();
  rectMode(CENTER);
  drawRing(0, 0, 350, 60);
}

void drawRing(int cX, int cY, float cirqRad, int numElems) {
  //Distribute shapes around circle dependant on arc length by user: quarks
  //<a href="https://forum.processing.org/one/topic/distribute-shapes-around-circle-dependant-on-arc-length.html" target="_blank" rel="nofollow">https://forum.processing.org/one/topic/distribute-shapes-around-circle-dependant-on-arc-length.html</a>;
  float r = cirqRad; //radius of circle
  // Calculate number of ellipses round circumference
  int numDots = numElems;//round(TWO_PI * r / circWid);
  // Calculate angle between two ellipses
  float theta = TWO_PI / numDots;
  pushMatrix();
  translate(cX, cY);
  for (float p = 0; p < numDots; p++) {
    float myTheta = p*theta; //calculate current angle
    float x = r*cos(myTheta); //calculate xPos
    float y = r*sin(myTheta); //calculate yPos
    pos.add(new PVector(x, y));
  }
  popMatrix();
}
float tmp = 0;
void draw() {
  background(0); //draw BG
  translate(width/2, height/2);
  for (obj o : shapes) o.draw();
  if (r < pos.size()) shapes.add(new obj(pos.get(r).x, pos.get(r).y, 10, 35, rotation));
  else r = 0;
  r++;
}

class obj {
  PVector pos;
  float w, h, rot;

  obj(float x, float y, float w, float h, float rot) {
    this.pos = new PVector(x, y);
    this.w = w;
    this.h = h;
    this.rot = rot;
  }

  void draw() {
    rectMode(CENTER);
    rect(pos.x, pos.y, w, h);
    stroke(255, 2, 2);
    line(pos.x, pos.y, 0, 0);
  }
}

SnailPropulsionLabs

Sorry, I used the wrong word in my original post. I have edited it now.

How can I do this with a rect instead of a line? Do I need to use Heading to get the correct rotation?

Chrisir

yes.