Bézier Curve Rainbow

I decided to learn more about Bézier curves, so I read this excellent Wikipedia article about them. The part that I used the most shows animated diagrams of Bézier curve formation. What I got out of it was this: if we have the x and y coordinates of points a, c, and b we can create a quadratic Bézier curve from them. As we move a point along from a to c, and from c to b at the same time, we can draw a line between them, and as we move across this line, we trace our Bézier curve. I wrote a JavaScript program to create a rainbow from Bézier curves slowly moving around the screen (it’s really only one Bézier curve, duplicated 5 times).

A small rainbow on a black background, consisting of 6 bézier curves

The starting and ending points, a and b, and the curve control point, c, move randomly to a new location every time they get close to the last one. The curve is created between them. Learning about these curves makes me remember the old Windows screensaver “beziers“. You can run the program here or view the code here.