Virtual Harmonograph Help

I would like to see your harmonographs. Export them and send them to me.

Overview

A harmonograph is a mechanical device that employs pendulums to create a picture called a harmonogram. Virtual Harmonograph replaces the mechanical device with a computer application so you can create them without having to build one.

This application emulates a real-world harmonograph with any number of pendulums. Drawing a harmonogram on a flat 2-D surface you can have up to 4 pendulums. Two of them control the horizontal and vertical movement of the pen, and two of them control the movement of the drawing surface.

Virtual harmonograph also allows you to rotate the drawing surface back and forth in an arc. Think of it as a swing. You can wind it up and let go and it will unwind then wind back up again until it runs out of energy.

Using one horizontal and one vertical pendulum produces Lissajous curves. Play around with different numbers of pendulums and rotation amounts to see what you come up with and let me know of any interesting results you get.

NEW! You can now add what I call pseudo-pendulums. These pseudo-pendulums control pen width, pen color, and pen opacity. You specify two values and it uses the same pendulum algorithm to move between the two values. For example, you might have a pseudo-pendulum for pen color where color 1 is red and color 2 is blue. As the harmonograph is drawn the color will gradually change from red to blue and back to red. It produces some very interesting results.

Browser Requirements

Virtual Harmonograph is an HTML5 web application. It requires a browser that supports the HTML5 features of local storage and canvas. Some examples of supported browsers are IE 9+, Firefox 3.5+, Chrome 4+ and Safari 4+.

Note: Because javascript can't access the local file system, this application uses your browser's local storage feature to save harmonographs. Therefore if you save a harmonograph on one computer it will not be available if you use a different computer or browser. Use the export/import feature to move harmonograms between computers or share them with others.

Tips

Since you can add any number of pundulums it is possible to create harmonographs that can't exist in the real world. You can get some interesting results by adding two rotation pendulums.
For frequencies whole numbers usually work best. Fractional numbers often produce a noisy graph. If you have a noisy harmonograph adding a rotation often helps make the drawing more harmonic.
If you really want to see how the graph is drawn set the block size to a small number and add a delay. Or, use the "Step" button to draw one block at a time. It's fun to watch.
If you want the graph to draw really fast set a large block size and set delay to zero.
As you would expect, making the horizontal and vertical frequencies equal and setting rotation to zero (with a horizontal phase of 1.57) creates a spiral. This is a good point to start exploring from.
Don't forget to play with the width and height. It can dramatically change the shape of the harmonogram.

Contact

Please contact me here if you have any questions, suggestions, comments or bugs to report-- or if you would like to be notified when new versions are released. Also send me any cool harmonograph settings you may come up with (use the export feature). I would like to see them.

License

Harmonograph Properties

The properties dialog is where you define the parameters for the harmonograph. It contains these tabs; Harmonograph, Pendulums, Graphics, Visualization.

Harmonograph Tab

This tab defines general settings of the harmonograph.

Width - The width of the drawing surface in pixels
Height - The height of the drawing surface in pixels
Time Delta - The amount that the time increments for each iteration; this determines the resolution of the drawing
Start Time - The time at which to start drawing
End Time - The time at which to stop drawing (leave blank to let the algorithm decide)
Scale - Use to zoom in or out of the drawing (leave blank to let the algorithm decide)

Pendulums Tab

This tab is used to define the pendulums. It contains a list all of the pendulums as well as a button to add more. Click on a pendulum in the list to edit its properties.

X-Axis and Y-Axis properties:

Amplitude - The initial amplitude of the pendulum, 1 is the entire span of the drawing surface
Frequency - The rate at which the pen moves back and forth in one unit of time
Decay - The rate at which the amplitude decays in one unit of time
Phase - Determines the starting point of the pen; 0 is center, -1.57 is top/left, 1.57 is bottom/right

Rotation properties:

Rotation - The amount that the surface rotates in one unit of time (in radians); 0 is none, 1.57 is 90 degrees, 3.14 is 180 degrees, etc.
Frequency - The rate at which the surface rotates back and forth in one unit of time
Decay - The rate at which the rotation decays in one unit of time
Phase - Determines the starting point of the rotation; -1.57 is 180° left, 1.57 is 180° right

Pen Color properties:

Color 1 - The first color.
Color 2 - The second color.
Frequency - The rate at which the color changes in one unit of time
Decay - The rate at which the pendulum decays in one unit of time
Phase - Determines the starting color; 0 is the first color, 3.14 is the second

Pen Opacity properties:

Opacity 1 - The first opacity value.
Opacity 2 - The second opacity value.
Frequency - The rate at which the opacity changes in one unit of time
Decay - The rate at which the pendulum decays in one unit of time
Phase - Determines the starting opacity; 0 is the first value, 3.14 is the second

Pen Width properties:

Width 1 - The first pen width.
Width 2 - The second pen width.
Frequency - The rate at which the width changes in one unit of time
Decay - The rate at which the pendulum decays in one unit of time
Phase - Determines the starting width; 0 is the first value, 3.14 is the second

Buttons

Add... - Shows a menu of pendulum types to add
- X-Axis - Adds a new X-Axis (horizontal) pendulum
- Y-Axis - Adds a new Y-Axis (vertical) pendulum
- Rotation - Adds a new Rotation pendulum
- Pen Color - Adds a new Pen Color pseudo-pendulum
- Pen Opacity - Adds a new Pen Opacity pseudo-pendulum
- Pen Width - Adds a new Pen Width pseudo-pendulum
Remove - Removes the selected pendulum
Randomize - Sets the values of the selected pendulum to random values
Randomize All - Sets the values of all pendulums to random values

Graphics Tab

This tab contains settings that determines graph colors and how the graph is drawn.

Transparent - Sets the background to transparent
Background Color - Color of the drawing surface
Pen Color - Color of the pen
Pen Width - Width of the pen in pixels
Pen Transparency - Transparency of the pen; left is more transparent, right is more opaque
Draw Points Only - If checked draws points instead of connecting them with lines

Visualization Tab

This tab contains settings that allow you slow down the harmonograph and see the pen position so you can see how it works.

Delay - Number of milliseconds to wait between drawing a block of points to the screen
Block Size - The number of points to compute before drawing to the screen. The larger the number the faster it will draw.

Toolbar

New - Starts a new harmonograph with default properties
Open - Opens a harmonograph from your browser's local storage
Save - Saves a harmonograph to your browser's local storage
Delete - Deletes one or more harmonographs from your browser's local storage
Export - Exports one or more harmonographs from your browser's local storage to a file
Import - Imports one or more harmonographs to your browser's local storage from a file
Export Image - Opens a new browser window with an image of the harmonograph that can be saved as a PNG file
Proprties - Opens the harmonograph properties dialog
Start Drawing - Starts drawing the harmonogram
Stop Drawing - Stops drawing the harmonogram
Step - Draws the next block of the harmonogram
Reset - Starts drawing the harmonogram from the beginning

Help Index