CODEWITHSUNDEEP
javascriptprocessing
Carlos Carlsen
Carlos Carlsen

Reputation: 373

How can I make a tetradecagon with Processing.Js?

I want to make a Tetradecagon, a polygon with 14 sides, with Processing.JS.
(I want to make the Tetradecagon like the one shown in the Image below!)

Using the numbers given in the image, which I would like to replicate, I concluded that each piece (I don't know it's proper name), has an angle of 25.714285714°.....

25 and 10/14 = 25 and 5/7 - 5/7 in decimal form = 0.714285714
So, I arrived at 25.714285714°

Now, in Processing.JS, I was wanting to use a while loop:



var r = 0;

var draw = function() {

translate(200,200);  
while(r < 361){
rotate(r);
r = r + 25.714285714;
line(200,0,200,200);
}

};

Here, I have set one variable, r. r will be the variable for the rotate() function. The while loop will keep going until r meets 360 - this will allow for the the change in r, the angle, to increase by 25.714285714°, while r < 361.
But, sadly, this is not happening.
What I see on my canvas is the line being shot off the screen.

(edit) I added translate(200,200); just above the while() loop - this helped, but the lines are still not looking like the picture above.

The second point of the line is not staying in the center; the whole line is being shifted. I only want the first (top) point to be shifted by the given change in angles.

How do I change the code in order to achieve the goal that I am striving for?
Any help would be appreciated - Thanks for your time!

P.S. This is my result with the current code -


enter image description here

Upvotes: 1

Views: 95

Answers (1)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

Processing.js is just for running Processing code. This looks like a mix of Processing and Javascript code so my first advice would be "write real Processing code".

With that said, if you want to do this based on coordinate rotation, look at your 14-gon: it's 14 repeated triangles, so analyze one triangle and draw that 14 times. Any triangular slice is defined by a line from "the center" to "a vertex on the 14-gon" at a (necessary) distance r, the radius of the circumscribing circle. So, given a vertex (r,0) on the 14-gon where is the next vertex (nx,ny)?

Simple maths: 

first vertex = (x, y) = (r,0)
next vertex = (nx,ny) = (r,0) rotated over (0,0) by (phi = tau/14)

(I'm using tau here because it's a far more convenient constant for programming purposes. It's simply equal to 2*pi, and as such represents an entire circle, rather than a half circle)

Now, computing that rotate coordinate using basic trigonometry:

nx = r * cos(phi) - 0 * sin(phi) = r * cos(phi)
ny = r * sin(phi) + 0 * cos(phi) = r * sin(phi)

Alright, done. And this nx,ny computation is clearly not specific to the number 14, it about arbitrary angles, so let's code the solution and make it work for any n-sided polygon:

void setup() {
  size(400,400);
  noLoop();
}

void draw() {
  background(255);
  // offset the coordinate system so that (0,0) is the sketch center
  translate(width/2,height/2);
  // then draw a polygon. In this case, radius width/2, and 14 sided
  drawNgon(width/2, 14);
}

void drawNgon(float r, float n) {
  // to draw (r,0)-(x',y') we need x' and y':
  float phi = TAU/n;
  float nx = r * cos(phi);
  float ny = r * sin(phi);

  // and then we just draw that line as many times as there are sides
  for(int a=0; a<n; a++) {
    // draw line...
    line(r,0, nx,ny);
    // rotate the entire coordinate system...
    rotate(phi);
    // repeat until done.
  }
}

And now we can freely change both the polygon radius and the number of sides by changing the input to drawNgon(..., ...).

Upvotes: 2

Related Questions