#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Make rects point to center of circle

edited January 2018

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

• 0,0

• ``````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>;
// 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
}
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?

• yes.