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.

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.

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.

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<i> = 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.

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.

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

The Results

Connecting 6 points located on the circumference of a circle

Connecting 12 points located on the circumference of a circle

Connecting 18 points located on the circumference of a circle

Connecting 24 points located on the circumference of a circle

Documentation

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

Download

Sketch for Processing Month, Day 1

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