[cg#43] Spirograph visualisation

Published 2023-06-12


My submission for code guessing round #43. It's a visualisation of a spirograph with adjustable parameters:

Edit it online!

Curve drawing stumped me for some time: they have infinite smoothness and calculating every pixel they go through sounds like an absolute pain and efficiency disaster. With parametric curves, like spiros and beziers, you can't even do that well, you can only make your parameter step as small as possible and hope it hits all the pixels. This is not a usable approach.

Then I realised: curves may be smooth, but PICO-8 display is not. I can approximate them with straight lines, which PICO-8 calculates for me! The only thing needed is a bunch of points on the line dense enough to create an illusion of smoothness, which PICO-8 doesn't require a lot of. In addition to that in most parametric curves go "slower" at sharp turns (have low derivative w.r.t. parameter) focusing the detail there, and approximating less curved sections with longer line segments.

You can see the function that calculates the points in tab 1 function curve(). It's calculated once every parameter change because it is a fair bit more resource intensive than just drawing it. i parameter indicates how far did the rolling circle roll around the centered circle, and based on that calculates angles and positions of the rolling circle and the drawing line, and the tip of the drawing rod is added to the list of points. Exactly the same approach is shown in the _draw function but split into steps: for a given t (how far the circle rolled) it calculates cx and cy (position of the rolling circle) and from that dx and dy (tip of the drawing rod).

Version 0: upload of the submission