Processing Month, Day 2 - Connecting Points, Part 2

Posted by Jan Vantomme on 02 May 2011.
Tags:

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 distpoints[i].xpoints[i].ypoints[j].xpoints[j].);
if ( 
dst 255 {
    stroke
255255 dst );
    
linepoints[i].xpoints[i].ypoints[j].xpoints[j].);

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.

stroke255 );
strokeWeight(4);
pointpoints[i].xpoints[i].); 

The Results

Connecting 16 random points based on distance

Connecting 20 random points based on distance

Connecting 28 random points based on distance

Connecting 40 random points based on distance

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 2

Tweet this article

Oldskool Comments (4)

Gravatar for Dan Bernier

From: Dan Bernier
Date: 04.05.2011

Very nice - it's a good 3D effect in 2D. One trick I like to use for static sketches like this is to put all the work in draw(), add noLoop() at the bottom of draw(), and add a mouseClick handler: void mouseClicked() { loop(); } This way, you can just click to re-run the sketch. BTW, for anyone who missed the earlier post, you can see this sketch in action at http://www.openprocessing.org/visuals/?visualID=28023.

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 04.05.2011

Thanks for the tip to regenerate static sketches. Might be useful for other readers.

Top · Permanent link to this comment

Gravatar for Simon

From: Simon
Date: 05.05.2011

This is excellent, thanks for sharing it.

Top · Permanent link to this comment

Gravatar for Ian Bowman

From: Ian Bowman
Date: 05.05.2011

I really like these Processing Month sketches. They are informative, yet concise. I've expanded upon your Sketch 2 idea by adding animation and an image generation component: http://ibowman.loni.ucla.edu/2011/05/04/processing-month-day-2-—-remix/

Top · Permanent link to this comment