Drop is a new experiment that explores a droplet shape and it’s associated views in 3d space. Click and drag to rotate the shape. Alternatively, you can use the scroll wheel or right click and drag to move the shape to a particular view. Audio is set to ‘They Move On Tracks Of Never-Ending Light’ by This Will Destroy You.
You can view the debug version and all the 25 iterations here
Inspiration
I’ve had this idea of a droplet of water following a line for a while but I was never quite sure of how the line would behave. Creating lines that would meander around a center line would tie in the droplet idea nicely. The aha moment came when I realized that meandering line code and the droplet code were really just variations off of the same idea, a series of points that orbit around a center point.
Process
Sketching
One of the bigger roadblocks with creating 3d work is visualizing ideas. Sometimes ideas have complex moving parts and it’s hard to focus on a particular transformation. Sketching on paper is quick and painless but I constantly have to draw the same thing at different angles to see a complete picture. 3d modeling apps are great but they all feel unwieldy, like using a sledgehammer on a push pin (If anyone can recommend a simple intuitive one that works on an iPad that would be great). Instead I opted to build a simple ‘sketch’ using bendy straws, a hole puncher and some markers. It worked much better than expected and from now on, any new experiment will require raiding my fiancé’s craft closet.
Lines
Creating the center line was relatively easy. I used perlin noise to create and update the shape of the line. The meandering line was a little more involved which required the use of my bendy straw model.
Droplets
The position of the droplets along the string was more involved than I expected. To create a smooth motion, you had to interpolate between the points of a line. On top of that you had to loop the droplet back to make it happen again. Creating the droplet shape required some research on wiki-ing. I’ve been using waves to create similar shapes but using Gaussian functions provides a little more flexibility.
Views
My recent experiments can be divided into 2 parts. The first part uses math to create and parse data in real time. The second part draws different shapes based off of that data. Some of these views draw connections with each other, creating smooth connected lines while others take all points and use it to create a smooth shape. The hardest part of this step was the editing process.
At first I envisioned a toggle allowing you to switch from one view to another but after clicking through some of the Three.js examples (specifically the multiple canvases example), it was much more interesting to show all views at the same time side by side.
credits below
Three.js 3D framework.
Dat-gui gui framework.
jstween for animation.
Web Audio for audio data.
‘They Move On Tracks Of Never-Ending Light’
by This Will Destroy You
