Processing Month, Day 2 - Connecting Points, Part 2

Today’s sketch will be similar to the one from yesterday, only we’ll use random points and connect them in a different way. We will draw a line if the distance between the points is less than a certain number. The distance will also be used as the value for the transparency of the line. Points close to each other will have a less transparent connection between them, points that are further away will be connected by a very transparent line.

To calculate the distance between points, we’ll use the dist() function. First two parameters are for the x and y coordinates for the first point, the third and fourth parameter take the x and y coordinates for the second point. The method returns the distance between the two points as a float. If this value is less than 255, we will draw the line.

float dst = dist( points<i>.x, points<i>.y, points[j].x, points[j].y );
if ( dst < 255 ) {
    stroke( 255, 255 - dst );
    line( points<i>.x, points<i>.y, points[j].x, points[j].y );
}

Once we have drawn the fine lines between the points, we need to draw the points themselves, with a bigger stroke weight. This will make our final image look a lot better. So this code will be added at the end the first for-loop, right after the inner loop.

stroke( 255 );
strokeWeight(4);
point( points<i>.x, points<i>.y );

The Results

Documentation

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

• dist()
• strokeWeight()

Download

Sketch for Processing Month, Day 2