How to create this kind of curve?

Hello,

I recently found about this animation on instagram and wonder how it was made.

Do you have any idea how to create a similar shape ?

By similar I mean a closed space-filling curve with pleats of similar size happening at regular intervals

According to the hashtags it is a bezier curve, evolving in real-time and coded using p5js. While I believe it is indeed a bezier curve, I tend to think it is neither made with p5js (feels like a hashtag chosen to increase visibility) nor “growing” in real-time (seems like a pre-computed curve that is unveiled bit by bit).

The whole thing feels organic as it was “grown” or using some springs with repulsion forces.

Any hint or idea would help !

Hello,

I also think that the bezier curves were first drawn manually and then the “algorithm” part is simply drawing the bezier curves bit by bit.

In any cases, you should be able to do it with p5js weither it was done with it or not.

1 Like

Glad to hear I’m not the only one thinking it’s not made in real-time. :slightly_smiling_face:

I still have a doubt about the making of the curve, do you really think it is hand-drawn ? The filling of the space is very homogeneous (uniformly distributed) and the overall shape seems to perfectly fit a circle, as if the whole procedure was automated.

I have looked for expressions like “space filling bezier” or “pleats generation” on OpenProcessing and Google but didn’t find anything so far.

1 Like

I think it’s quite easy to do with something like inkscape or illustrator.
You can use a real circle to guide you when drawing your curves and then delete it.

At least, I can’t think of any simple way to achieve this result with code only.
But now I’m intrigue =) If I think of something I’ll let you know.

1 Like

Didn’t know about such function in illustrator or inscape, thank you for the hint.

Still, I would love to come up with a strategy to achieve a similar result with code only. (I’m intrigued as well! :grinning:)

A few assumptions for brainstorming:

  • sophisticated random walk: sin/cos-based turning system + collision detection + tracking of already visited places

  • rounded path: generation of a maze on a circular mesh that outputs a single path that is then rounded (vertices become control points of a bezier curve)

  • physics simulation: long closed curve made of springs with repulsive vertices (repulsion forces) “compressed” within a circle

Turns out the author sold this animation as an NFT. The description says:

Built with code in rhino, gh3d and p5js.

I’m convinced now that most (it not all) of the creation process happened in Rhino and gh3d. Unfortunately I don’t know anything about these environments. :slightly_frowning_face:

He is probably using a “curve growth” plugin:

A good start would be this post:

The result is a bit too packed compare to the original you provided but I think with few tweaks it would work.

2 Likes

I thought about this as well but didn’t mention it because it doesn’t seem to be a plausible option to me. The pattern is too different, with nested pleats (pleats within pleats) and multi-layered curves (curves following the same path but with a slight offset). Those patterns usually don’t appear in a traditional “differential growth” algorithm.

Unless it is “grown” in a special manner. But then what would be “tweaks” ? :thinking:

Hi

I have found this

1 Like

On his Twitter, he implies that he uses what sounds like a particle simulation to grow the loops with collision avoidance and forces to keep the path straight.

1 Like

Thanks a bunch @scudly,

From he description it does sound like he’s using a “differential growth” algorithm as @jb4x suggested !

The output is still different from everything I’ve seen before though. Maybe he’s selecting the parts of the closed curve he wants to grow, instead of applying a growth behavior to the whole loop. That way it might allow for the formation of long non-folding curves.

I’ll have to try.

Hi, liukov!
I am still learning, Processing with emphasis Python, but I know JavaScript. The reason I say that at first is because I am reading a book, ‘Learn Python Visually, Creative Coding with Processing.py’ In this book the author, Tristan Bunn, Lissajous Curves and teaches how to create them using Processing. With some effort you would be able to convert the Python code to JavaScript (things like add ‘;’ at the end of a line of code, for instance). I hope this might take you in the right direction.

Tristan Bunn, talkes about Lissajous Curves (sorry, I was writing in a hurry)