Instructions
The harmonograph is constructed as a function of these two equations:

x(t) = (a1 * sin(t * f1 + p1) * exp(-d1 * t)) + (a2 * sin(t * f2 + p2) * exp(-d2 * t))
y(t) = (a3 * sin(t * f3 + p3) * exp(-d3 * t)) + (a4 * sin(t * f4 + p4) * exp(-d4 * t))

The first set of hue, saturation, brightness (HSB) sliders controls the background color.
The line is colored using interpolation from a starting color to an ending color.
The second set of HSB sliders controls the starting color.
The third set of HSB sliders controls the ending color.

Key 'e': Save a high-resolution PNG of the current image.

Key 'q': Load the next saved image.

Key 'w': Load the previous saved image.

Key 'r': Choose a random set of parameters.

Key 'p': Choose a random set of phase parameters (p1, p2, p3, p4).

Key 'f': Increment the frequency parameters by 0.01 up to 0.1 (f1, f2, f3, f4).

Key 'd': Increment the damping parameters by 0.01 up to 0.03 (d1, d2, d3, d4).

Key 'a': Increment the frequency parameter f3 by 0.01.

Key 's': Decrement the frequency parameter f3 by 0.01.

RIGHT_ARROW: Increase the number of points drawn.

LEFT_ARROW: Decrease the number of points drawn.

UP_ARROW: Redraw.

DOWN_ARROW: Redraw.

Mouse pressed: Redraw.

The p5js code

This p5js code is scrollable.