I was feeling the urge to try out generative art recently, and through many hours of researching tools / frameworks / tutorials, realized that I could hone my JS skills at the same time. This led me to the Coding Math YouTube channel – it has JS tutorials for anything from fractals to physics.

Kinematics Part 1 was a blast, I followed it closely and realized that the random numbers used for angles could be applied to color the line produced. A few Stack Overflow searches later, and I was able to feed the numbers into a color blend function (grabbed from this post).

The resulting arm angle determines how which color the traced stroke is:

context2.strokeStyle = blendRGBColors(
	'rgb(17,211,188)',
	'rgb(255,179,123)',
	Math.sin(arm.angle)
);

For all the code, check out the full pen here.

An GIF of the arm tracing the line.