Make rects point to center of circle

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);
  }
}

Answers

  • 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);
      }
    }
    
  • edited January 2018

    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?

Sign In or Register to comment.