Differential Line Trails

If you haven't read about the underlying mathematics of Differential Line Growth I suggest you start with a previous code poem I did as the one you are reading right now is essentially just a graphical follow up.

Before I start fondling around with 3D differential growth I wanted to show you some different ways of seeing it in 2D first. And by that I simply mean drawing trails. By sampling the line into an unrecognizeable amount of points and letting each of these points leave a trail we can easily get an impression of third dimension provided that every point is set to a small opacity value.

Drawing the trails of growing structures really puts dimensionality into perspective. In some sense, we are using time as a third dimension to our 2D space, and doing so here, we are overlaying every state in time of the differential line into one single canvas, thus creating an augmented line. Except the growing instance doesn't feel like a line anymore, it feels like the edge of a differential plane, which is a key idea to grasp 3D differential edge growth.

If i sample the line with less points, you'll start making them out and clearly see the individual trails that they each leave, which give off a vertical texture vibe (see simulation above). We could also try giving it a horizontal texture vibe by only drawing the line every 100th frame (see simulation beneath).

I think this one's my favorite ! And that about wraps it up for today too. I'm sorry there isn't much code or drawings in this one, but If you've read the previous article then you probably have all the code you want already, all you need to do now (in processing or p5js) is comment that background drawing function and add some alpha to your stroke and you're done !

Kaspar Ravel ~ for the Institute of Something
If this resonated with you and you'd like us to work together, let's talk ! I'm as much of a performance artist than a teacher / researcher in the new media arts, so feel free to shoot me anything at kaspar.ravel @ gmail dot com.

This code was developped in javascript using p5.js, three.js and <3.
All is licensed as CC BY-SA 4.0 (Attribution-ShareAlike) meaning you are allowed to copy, share, remix, build upon, as long as you give appropriate credit and reshare with the same license.