How to use for loop to draw a 9-sided polygon

Processing Coding Questions
1

I am trying to draw a 9-sided polygon, only use for loop, here is my code, but I don’t know what’s wrong with it.
int points=9;//9-sided polygon
size(600,600);//no setup and draw function
float angle=0;//angle start from 0 till TWO_PI
float radius=100;//polygon’s radius

for(int i=0;i<=9;i++)
{
float angle2=(i+1)/points*TWO_PI;

line(width/2+radius*cos(angle),height/2+radius*sin(angle),width/2+radius*cos(angle+angle2),height/2*radius*sin(angle+angle2));

}

2

Hi,

First remember to format your code by pressing Ctrl+T in the Processing IDE then use the </> button to insert your code on the forum.

First of all, I think that you should always structure your code with the setup() and draw() functions provided by Processing even if you don’t want it to loop like this :

void setup(){
  size(500, 500);
  
  // Put your setup code here
}

void draw(){
  // Put your drawing code here
  
  // Stop the loop
  noLoop();
}

Then it’s useful to program with functions. Functions are reusable pieces of code that you can call with custom parameters. Here it’s a typical example when drawing a polygon with a variable number of sides (9 in this case) :

void drawPolygon(int sides, float radius) {
  // Your code here
}

Now you can call it in your draw() function :

// 9 sided polygon with a radius of 100
drawPolygon(9, 100);

Then in your loop, you are using the number of steps so don’t say 9 directly but rather :

for (int i = 0; i <= steps; i++) { //... }

When drawing your lines, you added width / 2 and height / 2 each time but a common technique is to use the translate() function before you draw anything (remember to push and pop the transform matrix more info here) so you don’t need to add it each time :

pushMatrix();
translate(width / 2, height / 2);
// Draw your lines
popMatrix();

You want to draw a line for each side, so you need to compute the next position of the vertex of the polygon :

for (int i = 0; i < sides; i++) {
    float angleRange = TWO_PI / sides;

    float angle = i * angleRange;
    float nextAngle = (i + 1) * angleRange;
    
    line(cos(angle) * radius, 
         sin(angle) * radius, 
         cos(nextAngle) * radius, 
         sin(nextAngle) * radius); 
  }

So this is the final code :

void drawPolygon(int sides, int radius) {
  // The size of each pieces
  // Note that you can compute it outside the loop
  float angleRange = TWO_PI / sides;
  
  pushMatrix();
  translate(width / 2, height / 2);
  
  for (int i = 0; i < sides; i++) {
    // First angle
    float angle = i * angleRange;
    // Next angle
    float nextAngle = (i + 1) * angleRange;
    
    line(cos(angle) * radius, 
         sin(angle) * radius, 
         cos(nextAngle) * radius, 
         sin(nextAngle) * radius); 
  }
  
  popMatrix();
}

void setup() {
  size(500, 500);
}

void draw() {
  // Draw the 9 sided polygon
  drawPolygon(9, 100);

  // Stop the loop
  noLoop();
}

Nice, now you have a reusable function where you can specify an arbitrary number of sides!! :wink:

1 Like
3

Sorry, but I have not learned “translate” “pushMatrix” and “popMatrix”. I only can use “for” loop to draw this 9-sided polygon. Thank you for the code, but it’s out of my league. Could you help me again?

4

It would be better if you learned what pushMatrix(), popMatrix(), and translate() did.

Then you would very easily be able to solve your problem.

When your sketch starts, the origin for drawing, (0,0), is in the top left corner of the sketch.

But it doesn’t have to be there. You can move it. That’s what translate() does.

pushMatrix() saves the position that the origin was before you moved it with translate().

popMatrix() restores the last saved position.

So what are those three lines doing? Well, they’re saving the origin’s position, relocating it to the center of the sketch (So the polygon is drawn IN THE MIDDLE!) and then restoring the origin’s position back to the corner.

It saves you from having to add an x and y offset to every vertex you want to draw…

5

Sorry, I am just a beginner. This is a lab question, the only thing I can use is “for” loop, I can not use
pushMatrix(), popMatrix(), and translate() .

6

Yes. I understand. But you should try to understand too. Understand what those functions are doing. Try the code without them. See the difference?

7

I saw the difference without them. The polygon’s center is not on the center of canvas. I will try to understand the new command.

8

This is my code, I did not use them, and tried to fixed the position. Is it correct?

int sides=9;
int radius=100;
void drawPolygon() {
// The size of each pieces
// Note that you can compute it outside the loop
float angleRange = TWO_PI / sides;

// pushMatrix();
//translate(width / 2, height / 2);

for (int i = 0; i < sides; i++) {
// First angle
float angle = i * angleRange;
// Next angle
float nextAngle = (i + 1) * angleRange;

line(width/2+cos(angle) * radius,  height/2+ sin(angle) * radius,  width/2+ cos(nextAngle) * radius, height/2+ sin(nextAngle) * radius);

}

//popMatrix();
}

void setup() {
size(500, 500);
}

void draw() {
// Draw the 9 sided polygon
drawPolygon();

// Stop the loop
noLoop();
}

9

continued elsewhere

Chrisir