Processing Month, Day 2 - Connecting Points, Part 2
Posted on 2011-05-02 by Jan Vantomme
Tags:
processing, tutorial
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.
