Howdy, Stranger!
We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Categories
- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 288
- General Discussion 365
In this Discussion
- _vk July 2014
- jas0501 July 2014
- koogs July 2014
- processor65 July 2014
- quark July 2014
Drawing regular polygons
Hi:
There are probably other ways of doing this; but I wrote this simple sketch to draw regular polygons and wanted to share it with you. They look better when run in P1.5.1. Let me know if you have any suggestions or find any problems.
Hope its useful for others.
Thanks.
final int minNumberOfSides=3;
final int maxNumberOfSides=10;
void setup()
{
size(1300, 600);
background(0);
}
void draw()
{
float radio=70;
for (int k=minNumberOfSides;k<maxNumberOfSides+1;k++)
{
int numberOfSides=k;
float centerPositionX=(k-minNumberOfSides+1)*2.2*radio-radio/2;
float centerPositionY=height/2;
drawPolygon(radio, centerPositionX, centerPositionY, numberOfSides);
}
}
void drawPolygon(float radio, float centerPositionX, float centerPositionY, int numberOfSides)
{
numberOfSides=constrain(numberOfSides, minNumberOfSides, maxNumberOfSides);
float sideAngle=TWO_PI/numberOfSides;
float halfSideLineLength=sin(sideAngle/2)*radio;
float lineY=cos(sideAngle/2)*radio;
strokeWeight(1);
stroke(255);
for (int i=0;i<numberOfSides;i++)
{
pushMatrix();
translate(centerPositionX, centerPositionY);
rotate(i*sideAngle);
line(-halfSideLineLength, -lineY, halfSideLineLength, -lineY);
//line(0,0, halfSideLineLength, -lineY);
popMatrix();
}
//fill(255);
//ellipse(centerPositionX, centerPositionY,4,4);
//noFill();
//ellipse(centerPositionX, centerPositionY,2*radio,2*radio);
}
Comments
Cool! Once I made a similar function, look:
Yeah, I see yours is pretty cool. Thanks
this was originally made to generate random polygons as an answer here
http://stackoverflow.com/questions/23861118/way-to-detect-intersecting-lines-in-beginshape-vertex/23862775#23862775
Excellent.
Trig is cool, isn't it : )
Oh yeah, I love it.
For the curious processor65's program output looks thus:
@ jas0501 thanks for the picture
Its better to clear the background at the beginning of each loop(), therefore background(0); should be in void draw() and not void setup(). Sorry.
like this:
The output looks better now:
those thick lines on the first one were due to accumulation of alpha - you'll notice that the horizontal and vertical lines aren't affected.
http://wiki.processing.org/w/Why_are_text_and_graphics_so_ugly_and_blocky?
the fix is, as you've realised, to call background() in draw()
BUT there's no point constantly redrawing an image that doesn't change - add noLoop() after line 19.
@processor65 - what is more interesting than the shapes is the algorithm you used to draw them.
If I had been asked to do this I would have used trig to calculate the vertices and then drawn lines between. @_vk also calculated the vertices but used vertex() to define the shape.
Your approach of using the transformation matrix is a powerful technique and a useful one to learn, so well done.
You might be interested to know that we can reduce the number of push/pop matrices to just one per polygon, this is shown below.
Hi: Thanks to all for your great replies.
@koogs Yes you are right there is no point in drawing the same thing over and over. That was the reason I forgot background(0) in void setup() as I was drawing everything there only once. Then I moved it to void draw() and forgot clearing the background. I decided to move it there because if this is going to be used for real its most likely to be together with other drawings and buttons, etc. Good point yours anyways. Thanks
@quarks Thanks, that was my real interest, to share the algorithm. I tried your approach of using push and popMatrix() only once and could not make it work as I was trying to rotate the polygons. Please take a look at what happens with that approach when trying to rotate the polygons with the mouse using your suggestion. I don't know why??
While using my original approach of multiple transformations it works fine. Does anybody knows why?
I think its because of the way in which the event mousePressed(); is treated in the software; but not sure.
Humm. Actually no because the rotation has nothing to do with mousePressed...
Botton line is the rotationAngle is not applied equally to all sides except for 0 and TWO_PI using only one push and popMatrix().
@goToLoop What I have done before was; but perhaps your suggestion is better???
void setup() { drawFigures(); }
void draw() {} // do noting;
You only need to apply the rotation angle before the loop not inside it.
yes, true. Thanks.
Corrections made thanks to quarks. Here it is:
And here is the output with some additions: Thanks to all.
By drawing triangles instead of lines the polygons can be filled. The junction lines can be seeing a little bit though. I tried strokeWeight(2); the lines disappear; but the corners overshoot a bit. Here is the example with strokeWeight(1);
This creates and exploded view of the Polygons:
And this creates Stars: (and I'll leave it there for you to play with this).
The instructions at the top should be written only once per loop() also, so they are not overwritten over and over everytime a Polygon is drawn, which causes the letters to look bad. Therfore taking that part from inside the drawPolygon(); function and moving it to void draw(); after the Polygons are drawn, is the way to go.
like this:
and now the text looks much better.
Although this is not the kind of work (art) I normally do, it has been a lot of fun to play with this code and perhaps its useful for the real artists here. If pushMatrix() and popMatrix() aren't used to apply and fully reverse the transformations and only part of them are reversed using translate(-x,-y); and rotate(-angle); then some useful effects can be achieved. I have used this before and tried here now. There is a problem though, anything else in the screen will go crazy. That's the reason why I did not write the instructions at the top in this case as they will keep rotating wildly. The instructions are the same though. "Move mouse sideways to see rotations. Press mouse to see additions". The effect in this case is a folding and unfolding spiral. You can run the program to watch the effect.