# 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 );                }    }}  ```

### Documentation

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

Sketch for Processing Month, Day 1