Submerged: Processing Sketch Evolution

We expanded on the code from the second sketch for our visualizations. One of the main qualities we wanted to include in this iteration was the wrapping of the waves underneath the dancer. In order to achieve this, the addition of horizontal springs connecting the nodes was absolutely necessary. The position of the dancer (or in these earlier iterations, the mouse) controlled a repulsion force that would push away the nodes of the springs.

Visualization system rendered with white springs.

If the springs were stretched far enough, they were not rendered. This provided a base for the dancer to be framed by. The rendering algorithm went through many iterations as seen in the following figures.

Visualization system iteration: If spring is too stretched, node is not included in Bezier curve.

Here are two videos of the early system in action, one with springs rendered (to get a better idea of how the system is working) and without.

Visualization iteration: if spring is too stretched, use node above or below to continue Bezier curve.

Next, an attraction force was added into the sketch.

Visualization iteration: External attraction force added.

The system worked as expected; however, we desired more movement from the waves. In order to achieve this, the initialization of the sketch was changed to fix only the furthest left and right nodes, leaving the top and bottom nodes to travel with the force. This allowed more range of movement from the system.

Visualization iteration: Left and right side of mesh fixed, top and bottom of mesh free.

One force worked smoothly. However, when the second force was added, the mesh would sometimes get tangled up. This would result in undesired spring nodes rendered with the Bezier curve, causing the black void to be covered.

Visualization iteration: Added second attraction force. Mesh tangles up occasionally over void.

In order to handle these cases, an additional check had to be made. A vector was made between the node analyzed and the previous node included in the Bezier curve. A second vector was made between the node analyzed and the user (or repulsion force) position. If the angle between these two vectors was less than PI/2.0, that spring node was not rendered. This was more effective.

Final visualization iteration: Added algorithm to handle springs crossing through the middle of the void.

Here is a video demonstration (Note: the screen capture slowed down the frame rate of the actual visual).

Here we are testing out the Processing sketch with the costume!!! I’m super concentrated… I hardly move haha.

2 thoughts on “Submerged: Processing Sketch Evolution

  1. Hello!

    I came across your work as I am currently doing a masters degree for Design for Performance and Interaction at the Bartlett school and I am now learning how to code in Processing (started 2 weeks ago).
    I absolutely loved your work and was wondering if you could give me a few tips on how the meshes could be draw on processing and how they got deconstructed according to mouseX-mouseY, I am still drawing like basic geometric shapes and cant wait to step out get myself immersed in coding !

    Would really be grateful if you could help.

    Many thanks,
    Saria Ghaziri

    1. Hello Saria!

      Thanks for reaching out to me. I’d love to help out. I’ll send an email your way. ^.^


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 )

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