GDV P.2.3.2 Relation and distance

Here is the text I copied from the Generative Design book: ‘In the previous example, a new element was drawn on the display in each frame when the mouse-button was held down. This function is now restricted: a new element is positioned only when it stays a minimum distance from the previously drawn element. There are several ways to do this. Variation 1: The new element is not placed directly at the mouse position but rather at the exact specified minimum distance from the last element. Variation 2: The new element is placed at the mouse position, and the minimum distance only serves as a threshold value.’ And here you can find the original program.

In case you are not able to run JavaScript or Processing I have put all images of this session on a Flickr summary page.

The first thing I did was to reduce the display size to get a more web friendly size. I got rid of the very thin lines. Used a strokeWeight of 120 pixels and a StepSize of 20. I also introduced the HSB colorMode because its easier to understand by humans than the RGB colorMode. Now there are two DrawModes in this sketch. And I must admit that I only used DrawMode 1.

Increased the strokeWeight to 400 to get even thicker lines. Left all other settings as they were. As you might have noticed these images are being inspired by Daniel Buren and that’s why they are looking very Bridget Riley-ish.

Decreased the strokeWeight to a 100 pixels. Oh… I forgot to mention that I changed the LineColor variable. Its HSB values are now random in H 360, S 80 – 100 and B 50 – 100.

Changed the LineLength to 100. I did not like the randomness in the Saturation and Brightness. So I gave it a fixed value of 100.

Now it can be that you cannot get the same images as I have made. You might have to tweak the code itself to get them. I introduced a random strokeWeight between 0 and 20. I also commented out the Y_Position locations. This means that you only can get horizontal interaction. And that is what I wanted at that time.

In this sketch I increased the strokeWeight again to 120. Because I would like to see more of those 3D-ish lines. I also added some more randomness in the LineColor variable.

In the Processing version you can generate very straight lines. Position the cursor at a point near the side of the display. And point the cursor again near another side of the display. A straight line is drawn. That is more difficult in the JavaScript version because JavaScript does not react on cursor positions which are outside the display field.

In this sketch I added a more circular behaviour in the objects. To calculate the X_Position of the object I divided StepSize by 2. To draw the line I also divided the Y-Position in 2.

At that moment I decided to start from the beginning. I used P_2_3_2_01_GDV_01 again as the starting point. Changed the StepSize to 2.0 and the LineLength into 3. Commented out the line function and replaced it with  the arc function. This gives me thicker arcs when I move the mouse very fast from left to right. Or from right to left. In the end I replaced the stroke function with a fill. That gave me triangles with very subtile gradients. Something I did not now when I started this sketch.

This last sketch let’s make you shapes. If you move your cursor fast the size of the shape will get thicker. Slow movement will create smaller shapes until the shape ends in a line only. It’s still using the arc function between 45 and 270 radians.

Henk Lamers


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s