What inspired me to create Ribbons was a top-down view of a beach umbrella, or the Maltese cross -- some form of a circle with sectors alternating in color. To introduce some randomness, I wanted the edges of the sectors to be wavy along their edges.
I introduced the waviness based on Bézier curves, which are generated by specifying a set of points, and then an algotithm draws a smooth curve between (or based on) them. If you've ever used the Pen tool in Photoshop and clicked around, making a bunch of curves that didn't actually go where you wanted them to go, then you've seen these before.
Since the program I use, p5.js, only lets you use cubic Bézier curves, specifying four points, I had to chain multiple Bézier curves together to make something that looked like a ribbon. The complex part was getting the curves to look continuous next to each other -- I unfortunately discovered composite Bézier curves only after doing this work.
Another trick I used was to vary the size of the ribbon. I did this by breaking the curve down into hundreds of tiny line segments and made them bigger or smaller as they followed the curve. This led me to add a "tadpole mode", in which each of the component Bézier curves started and stopped at repeating widths instead of growing or shrinking with each successive curve.
