Processing Month, Day 1 - Connecting Points, Part 1

Posted by Jan Vantomme on 01 May 2011.
Tags:

In this first article, we’ll take a look at how we can calculate points on the circumference of a circle and how we can connect them. We need to do this in a flexible way so we can draw images based on 6 points as wel as images based on 18 points.

h2. Calculation

To calculate the x and y coordinates of these points, you’ll need to know how many points to draw, and the radius of the circle. In this example, I’ll start with 12 points.

bc. int numPoints = 12; float radius = 150;

The next thing to do is to calculate the angle between the points. A circle is 360 degrees or 2 * π radians, so to know the angle between the points we need to divide 360 degrees with the number of points. I’ll use radians in the example because the @cos()@ and @sin()@ functions expect a number in radians, not in degrees. Processing has a few constants for circles and half circles, so for 2 * π, we can use the @TWO_PI@ constant.

bc. float angle = TWO_PI / numPoints; for (int i = 0; i < numPoints; i++) { float x = cos( angle * i ) * radius; float y = sin( angle * i ) * radius; points = new PVector( x, y ); }

I do the calculations in the setup() method and store them in a PVector array so I don’t have calculate the x and y coordinates over and over again while drawing. By using a for-loop you can easily calculate the coordinates for each of the points: @angle * i@ will give you a different angle each time the block of code inside the loop are executed.

h2. Drawing

To draw a line from each point to all other points on the circle, you’ll need to use a nested for-loop to go through the array of points. The if statement is used to compare the i and j counters. If they are not equal, the computer will draw a line between the two points. If i and j are equal, they represent the same point, so you don’t need to draw a line.

bc. for (int i = 0; i < numPoints; i++) { for (int j = 0; j < numPoints; j++) { if ( j != i ) { line( points.x, points.y, points[j].x, points[j].y );
} } }

h2. The Results

!http://img.vormplus.be/blog/circle-connections-6.png (Connecting 6 points located on the circumference of a circle)!

!http://img.vormplus.be/blog/circle-connections-12.png (Connecting 12 points located on the circumference of a circle)!

!http://img.vormplus.be/blog/circle-connections-18.png (Connecting 18 points located on the circumference of a circle)!

!http://img.vormplus.be/blog/circle-connections-24.png (Connecting 24 points located on the circumference of a circle)!

h2. Documentation

Here are some links to the Processing documentation for the functions I used. The might be handy if you need some extra information.

  • “cos()”:http://processing.org/reference/cos_.html
  • “sin()”:http://processing.org/reference/sin_.html
  • “TWO_PI”:http://processing.org/reference/TWO_PI.html

h2. Download

“Sketch for Processing Month, Day 1”:http://img.vormplus.be/downloads/processing_month_day_001.zip

Tweet this article

Oldskool Comments (2)

Gravatar for WILL

From: WILL
Date: 01.05.2011

coooool. i think i'm gonna do this one !

Top · Permanent link to this comment

Gravatar for Mathias

From: Mathias
Date: 02.05.2011

Count me in :)

Top · Permanent link to this comment