Lissajous Art

For more information about lissajous figures see Wikipedia.

Advanced Controls
Clear & Draw on preset change
Horizontal Amplitude: Vertical Amplitude:
Horizontal Frequency: Vertical Frequency:
Horizontal Phase: Vertical Phase:
line width: line width inc:
line height: line height inc:
speed/line continuity:
x factor: x factor Inc:
y factor: y factor Inc:

center X: center Y:
Coloring Type:
min red:
max red:
init red:
red inc:
min green:
max green:
init green:
green inc:
min blue:
max blue:
init blue:
blue inc:
Background Color:

This interactive lissajous art playground requires a browser that supports the HTML5 canvas element. Your browser does not support this.

Lissajous Instructions

Create your own lissajous art! This page can be used as a playground or learning tool to see how changing basic parameters affects the generated images. Or it can be used to create and save your own lissajous artwork.

Lissajous Art Creator/Playground only works in browsers that support the HTML5 canvas tag. Unfortunately versions of Internet Explorer older than version 9 do not support this. Other browsers tend to have a longer support history.

Lissajous curves are created from plotting the following parametric equations:
x = A * sin(a * t + p)
y = B * sin(b * t)
where A is the horizontal amplitude, B is the vertical amplitude, a is the horizontal frequency, b is the vertical frequency, p is the horizontal phase, and t is the parametric variable.

For greater flexibility, this Lissajous Art Creator allows for both a vertical and horizontal phase.

A complement of nine basic preset images are available to generate by picking them from the drop down at the top left of the page. Each preset chosen populates the controls below the image so that you can see how they are generated or tweak them to your liking.

You can combine multiple lissajous designs, but only in advanced mode. Advanced mode is initiated by checking the "Advanced Controls" checkbox at the top left of the page. Advanced mode enables the additional presets and it allows you to change more parameters for a greater variety of image generation.

By default, basic mode clears the image first when a new preset is chosen. In advanced mode, the default is not to clear the image first when a new preset is chosen. In advanced mode there is a "Clear & Draw on preset change" checkbox that can be used to alter the default behavior while in advanced mode.