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.
http://www.generative-gestaltung.de/P_2_3_2_01

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.
P_2_3_2_01_GDV_01

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.
P_2_3_2_01_GDV_02

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.
P_2_3_2_01_GDV_03

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.
P_2_3_2_01_GDV_04

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.
P_2_3_2_01_GDV_05

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.
P_2_3_2_01_GDV_06

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.
P_2_3_2_01_GDV_07

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.
P_2_3_2_01_GDV_08

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.
P_2_3_2_01_GDV_09

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.
P_2_3_2_01_GDV_10

Henk Lamers