Virtual Harmonograph Help
Copyright © 2016 JM Gustafson, WorldTree Software
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 four pendulums. A harmonograph with two pendulums is called a lateral harmonograph. A harmonograph with four pendulums is called a rotary harmonograph. 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 simple Lissajous curves. Using two horizontal and two vertical pendulum produces more sophisticated 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.
You can also 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.
For a complete tutorial on lateral and rotary harmonographs and how to create them using Virtual Harmonograph read Intro to Harmonographs.
Browser Requirements
Virtual Harmonograph is an HTML5 web application. It requires a browser that supports HTML5 features such as local storage and canvas. Some examples of supported browsers are IE 10+, Firefox 3.5+, Chrome 4+ and Safari 4+. I recommend Chrome as it has the best support for HTML5.
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.
Views Pane
The views pane is on the left side of the screen and shows different views depending on the context. The default view is the harmonograph properties. The view will change depending on what action you are currently performing. If you are loading a graph it will show the load graph view. If you are exporting a graph it will show the export view. When you are done performing the action it always goes back to the default properties view.
At the top of the views pane is the name of the harmonograph. Click the expand button next to the name to also show the description field.
The views pane can be collapsed to the left by clicking the minimize button. This will give you more room to view the harmonograph. To restore the pane click the restore button. You may also unpin the settings view by clicking the pin button. This will make the view pane float over top of the harmonograph.
The following views are available:
Harmonograph Properties View
The properties view is where you define the parameters for the harmonograph. It contains these tabs: Settings, Pendulums, Graphics, Visualization.
Settings 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 of all of the pendulums. Click on a pendulum in the list to edit its properties. Use the buttons below the list to modify the list.
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
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
Graphics Tab
This tab contains settings that determines graph colors and how the graph is drawn.
- Background Color - Color of the drawing surface
- Background Opacity - Opacity of the background; left is more transparent, right is more opaque
- Pen Color - Color of the pen
- Pen Width - Width of the pen in pixels
- Pen Opacity - Opacity 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.
Load Graph View
The load graph view is where you can select a graph to load. You can either load a graph from your browser's storage or from your device's file system. To load from a the file system click the Choose File button and select a file that was saved using Virtual Harmonograph. To load from browser storage select a graph in the list and click the Open button.
You can remove graphs from the browser's storage by selecting a file in the list and clicking the delete button.
Export Graph View
The export graph view is where you can choose how to export a graph. You can either export the harmonograph's settings to your device's file system, export it as an image, or get a URL that will draw the harmonograph.
- Click the Download File button to export the graph settings to your device's file system.
- Click the Export Image button to open a new browser tab with an image of the harmonograph in PNG format. From there you can save the image to your device's file system (for example, right-click and choose Save image as...).
- To get a URL that will draw the harmonograph click in the text area and copy it to your clipboard. When someone visits this URL it will go to Virtual Harmonograph and draw the harmonograph. This allows you to easily share your graph settings from a web page.
Toolbar
- New - Starts a new harmonograph with default properties
-
Save - Saves a harmonograph to your browser's local storage
- You must give the graph a name in the views pane before saving
- Load - Opens a harmonograph from your browser's local storage
- Export - Exports the current harmonograph settings to your device's file system or to an image
- Stop Drawing - Stops drawing the harmonogram
- Start Drawing - Starts drawing the harmonogram
- Step - Draws the next block of the harmonogram when stopped
- Redraw - Starts drawing the harmonogram from the beginning
Tips
- Since you can add any number of pendulums 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.
- As it's name suggests, harmonographs work best with their pendulum's frequencies set to harmonic ratios. The same ratios that are used to produce musical notes in a scale (1:1, 2:1, 3:2, etc) work very well. Non-harmonic ratios tend to produce noisy graphs, but adding a rotation pendulum often helps make it look better.
- 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. On the other hand, if you want the graph to draw really fast set a large block size and set delay to zero. Also note that changing the time delta will affect how fast a graph is drawn.
- A good place to start is with one X and one Y pendulum with equal frequencies. If the phases are equal it will draw a diagonal line. Give on of the pendulums a phase of 1.57156 (PI/2) and it will create a spiral. Change the phase to the other pendulum and it will draw in the opposite direction.
- 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
Virtual Harmonograph is free to use. It may not be copied to any other server without the author's consent. Copyright © 2015 by JM Gustafson. All rights reserved.