How would I start making art that animates?

[xrd]

I went through your tutorial. Fascinating project and beautifully done.

I've been interested in learning how to make artwork like in the game Engare for a long time:

https://www.youtube.com/watch?v=e4Yl-BTaOxo

Do you have any suggestions on how to start thinking about that?

• I don't see how to make something that generates a line that accumulates over time. I see that I can use t but not sure where to go from there.
• Am I correct in that due to the inherent nature of the 3D focus, this might not be a good place to try art like this?

Wonderful teaching tool, thank you!

[ianthehenry]

Hey thanks!

At the moment Bauble animations are "stateless" -- you write a function that produces an image, but it doesn't know anything about the image at the previous frame. This makes certain kinds of animations difficult.

From quickly skimming through that video, it looks like you're trying to do something that would be tricky to do in this "stateless" way. The most natural way to express such a thing is to have something stateful -- it reminds me strongly of "turtle" style graphics, if you've ever heard of that. This is a pretty common approach for generating art -- very different from Bauble's approach -- so I imagine you can find something much better suited to that than Bauble.

Shadertoy allows you to make animations that use the previous frame as an input when you're drawing the "next" frame, so you can make animations like this where you're adding new color to an image. It only really works if you can write a closed-form equation for "the current position of the turtle" (because the only state you have is the previous frame) but you can make a lot of complex and interesting shapes using simple functions. If you want to learn how to make some very cool animations in this style, I would start right here: https://www.shadertoy.com/results?query=spirograph

[jonnydubowsky]

I was just playing around with a MaxMSP sketch that might be another good fit for making a game that centers around Spirographics.

The template can be found here:
https://cycling74.com/tutorials/rainysnowy-day-max-spirographics

MaxMSP is a really powerful and creative visual programming language that helps you build complex, interactive programs without any prior experience writing code.

MaxMSP is especially useful for building audio, MIDI, video, and graphics applications where user interaction is needed.

The free version and trial are sufficient to exploring the software and if you like it, the subscription is pretty reasonable.

https://cycling74.com/products/max

https://cycling74.com/get-started

There's also a cool javascript example of Spirographics mentioned in the first blog post:

https://www.maissan.net/articles/javascript-spirograph

Ian, Bauble is really wonderful and I'm already having fun with it. Thanks for building it!

[ianthehenry]

You're very welcome! Glad you're enjoying it. I'd never heard of MaxMSP; will have to check that out.

[xrd]

I'm only familiar with MaxMSP because there was something on HN (two degrees of separation or so) about Miller Puckette who invented PD (Pure Data) which is used by so many other generative audio tools. His name is where MSP comes from (http://msp.ucsd.edu/).

[ianthehenry]

@xrd Hi! Random message for you today. I made another weird art website called https://toodle.studio/, and it's focused on stateful line-drawing animation. I'm not sure if it can do what you're after out of the box, but it's hopefully general enough to support lots of styles of art if you're willing to write some code, and I included an example of how to do spirograph stuff.

[xrd]

It's gorgeous. I'll definitely check it out. Thank you for sharing it!