Sketch: https://editor.p5js.org/nkumar23/sketches/GoX7ueD-x
Github: https://github.com/nkumar23/tearcloth2D
Original Plans
I originally entered this final hoping to create a sketch that visualized the quality of my sleep and was controlled by a muscle tension sensor I had already built. I wanted to visualize the entirety of my night’s sleep as a continuous fabric slowly undulating, with holes ripped through it when I clenched my jaw -- detected by the sensor.
I drafted up an initial roadmap that looked like this at a high level (sparing you the detailed steps I created for myself):
Create the fabric using ToxicLibs and p5
Adding forces and texture ripping to Shiffman’s example
Start with mouse/key interactions for rip and forces (like wind/gravity)
Create a clenched/not-clenched classification model
Collect and label sensor data for training
Create simple interface in p5 to record clench/not-clenched with timestamp so that I can label sensor values
Train ml5 neural net using labeled data
Link fabric ripping to sensor data
Run this in real time and capture video of animation during sleep
I headed into this project knowing that I’d most likely tackle chunks 1 and pieces of chunk 2, but likely not the entire thing. Along the way, I wound up focusing entirely on the cloth simulation and abandoned the rest of the project for the time being. I added some audio interaction to round out this project in a way that I thought was satisfying.
I’ll describe the process behind building this cloth simulation, and what the next steps could look like from here.
Inspiration
As difficult as dreams are to remember, I have short, vivid memories of an undulating surface, slowly changing colors, that at times looks like a grid from the matrix, and at other times looks filled in. As I began thinking of how I might want to visualize my sleep, I went immediately to this sort of flowing fabric-like image.
Luckily, as always seems to be the case, there is a Shiffman example for cloth simulation! I also found this example of a tearable cloth in native Javascript.
Process
I started with Shiffman’s 2D cloth with gravity example. He did the legwork of importing the Toxiclibs library and aliasing some important components, like the gravity behavior.
Rip detection
From that starting point, I first wanted to figure out how to rip the cloth. To begin, I calculated the distance between a clicked mouse and a particle and console logged the particle coordinates when the distance was less than 10 (i.e. which particle was clicked?).
https://editor.p5js.org/nkumar23/sketches/4NsLvcVlO
Rip detection, but make it visual
Next, I wanted to see if these particles were where I expected them to be, and nowhere else. To do this, I displayed the particles rather than the springs and made them change color upon click.
https://editor.p5js.org/nkumar23/sketches/cz2XdRYfH
Spring removal
Then, I wanted to remove springs upon click -- which would “tear” the cloth. To do this, I had to add a reference to the spring within the particle class so that specific springs could be identified upon click.
I spliced spring connections and decided to stop displaying the spring upon click, which led to this aesthetic:
https://editor.p5js.org/nkumar23/sketches/-dtg2SCCy
That doesn’t really look like a cloth was torn! Where’s the fraying? This behavior happened because the springs were not removed from the physics environment-- they were just no longer displayed.
Removing the springs required adding a bit more logic. Instead of adding springs in the draw loop, we now have the framework for adding/removing springs within the Spring class’ logic.
In the draw loop, we check whether a spring is essentially marked for removal upon click and remove it via the remove() function created in the Spring class. Thanks Shiffman for the help with that logic!
https://editor.p5js.org/nkumar23/sketches/uykP2GyE2
Adding wind + color
Now that the spring removal creates a more realistic cloth physics, I wanted to add another force to gravity - wind. I wanted to simulate wind blowing through the fabric, creating an undulating, gentle, constant motion. But I did not want the wind to blow at one consistent “speed” -- I wanted it to vary a bit, in a seemingly unpredictable way. Perlin noise could help with this.
I brought in a “constant force behavior” from Toxiclibs and created an addWind() function that incorporated changes to the parameters of the constant force vector based on Perlin noise.
Next, I wanted to add a similarly undulating change in color. As I looked at ways to use Perlin noise with color, I came across this tutorial from Gene Kogan that had exactly the kind of surreal effect I wanted. Here’s the implementation of everything up until now + wind and color:
https://editor.p5js.org/nkumar23/sketches/ugZc9Sry7
Adding sound
At this point I had a visualization that was pretty nice to look at and click on, but seemed like it could become even more satisfying with some feedback upon click-- maybe through sound! I added a piece of music I composed and a sound effect I made with Ableton Live -- the finishing touches. Check it out here -- the same as the sketch at the top.
https://editor.p5js.org/nkumar23/sketches/GoX7ueD-x
Next Steps
I would like to add some physical sensors to control parameters for this sketch — things like the way the wind blows, ways to stretch the fabric, rip it in the physical world, etc. I’m not wedded to using the muscle tension sensor anymore, though!
I’d also like to add more thoughtful sound interactions. Perhaps there are different interactions depending on when your rip the hole, where you rip it, how much of the fabric is left.
More broadly, this assignment made me want to explore physics libraries more. It is pretty impressive how nicely this cloth was modeled with Toxiclibs’ help; there’s a whole world of other physics library fun to be had.