User Tools

Site Tools


Laser Spirograph Simulation


, cool visual demo of a phasor. Very intuitive now!


  • Read about configuration spaces and toroid-type shapes from the c.s. of pendulums in “Beyond the Third Dimension”. Might be good to explore again, very visual book.


  • Very good explanation of the weird “shape inside a shape” shapes. More mathematical in nature, but at least he defines them.
  • Plot in Mathematica again to see phasing of shapes in time (3 circles, but view them over time <z>)
  • Have a keyboard interface (use one of them from the site below), but make it sound cool.
    • Ease up to the new note (is it called a chirp?), change the frequency to new note slowly, but be sure to keep the phase correct
    • Maybe add a bit of harmonics but keep shape the same? Ehhh…


  • More equations at the GIF to the right.
  • Want to get tool-tip editing working, using either Bret Victor's implementation or Khan Academy
  • Display in a sphere (for 3D), maybe other views?




  • I think you can scale down higher speeds to lower speeds and still have the phase and rotation look right. You just need to scale the 3rd frequency accordingly. I have no clue how that'd work, but it seems possible.




  • Three.js is way cool implementation of OpenGL. Still need to learn OpenGL, but potentially useful for things. Processing should be fine though for now..


  • Waiting to hear back from Apple design guy, Bret Victor
  • Combination Tone, explains why there are tones going downward when you go upwards in pitch. More than just difference of frequencies…





  • Met with Pfr. Dannenberg. Human voice has formants for different shapes! Weird to explore and look at. “E”, “I” sound the same from different people, because they're focused on the same frequencies (your mouth shape is the same), it's just the harmonics of people's voices that make it up are different…


  • Similar demo, except with Lissajous curves. here, explains motion of planets as epitrochoids too!


  • Maybe you can just do FFT in Processing (which for some reason only gives you 1/2 of phasors (doesn't repeat), which is key for this…the negative phasors don't cancel out), and then do the IFFT but don't throw away the imaginary returned part. Play around with this some more…
  • REALLY annoying bug in Mac that only lets you play more than 3 keys at a time for certain keys. For example, try to play 'arf' or 'agt' or 'agy' in GarageBand…it doesn't work! But playing only home-row keys at the same time works fine. Wonder how this one slipped though…
  • So, finally realized that this spirograph plot is summing over the frequencies to get each time step. It's kinda doing the inverse fourier transform, except of both real and imaginary data. More to come on that…
  • Excellent OpenGL Processing implementations of things: at MisterCrunch



  • “Spirograph Math” on Google: Least-Common Multiple and really helpful presentation!
  • 3D Spirograph is possible Robert Inventor. Maybe just use one of the circles and rotate in polar? Plotting in OpenGL would prob be slow though…
  • PADSynth…explains generating audio for synths and making it sound good by adding random phase shifts along the frequency spectrum.
  • Time for sleep ;-)


  • What is difference between harmonograph and spirograph? Seem sort of related, but phase of harmonograph varies between real & imaginary whereas spirograph is fixed circle. I like spirograph better…more predictable!

(from Harmonograph: A Visual Guide to the Mathematics of Music)

  • In the movie at left two waves with slightly different frequencies are travelling to the right. The resulting wave travels in the same direction and with the same speed as the two component waves. The “beat” wave oscillates with the average frequency, and its amplitude envelope varies according to the difference frequency.

Lissajous Generator

where n is the number of engaged wheels: wheel k has its center fixed on a point of the circumference of wheel (k-1). On each wheel, a_k is related to the radius, n_k to the rotation speed, and \theta_k is an initial phase angle. Farris demonstrated that the z(t) curve has g-fold rotational symmetry if all the pairwise differences |n_k-n_j| have g as their greatest common divisor.

So, the radius here is the degree offset of the mirror (how wide of a circle it makes), and Nk is indeed the rotation speed. So, we want to have mirror angles as similar as possible to get good shapes.

Processing Spirograph Script

Processing Spirograph Script


  • Ask Harold Kim or Reza Ali or CMU professor for advice/review
  • Bret Victor might have some good advice too. (Apple guy that left to do visual work). He likes Lua too

Teaching Points

  • Maybe ask Kalid Azad of BetterExplained for help? You talked with him before, and he's definitely interested…
Relationship between rotating circle and sine wave / audio
  • Start off with something they know…a sine wave and the corresponding tone. Show it moving by on the screen, and let them interact with it by changing the x-axis.
  • Then fade just one circle moving around and drawing the corresponding sinusoid (it's the real (y) axis)
  • Not sure how to explain positioning of two circles yet. The subsequent circles are placed on the endpoint of the “pen” before it.
    • How is the speed of rotation of the circle related to the size of the spirograph shapes?
  • Similar to this animation

Frequency relationships and their shapes
  • On two mirrors, the shapes stay the same if their ratio stays the same
  • On three mirrors (one is set), I'm still not sure what happens! Shape is “similar” when you go over straight lines. But not sure how to keep the shape the same
  • “Scratch panels” apparently…for calibrating the turntable…more here


  • Zooming is still not working correctly on vertical screen


  • Double-clicking two points selects a line to follow.
  • Suggests convergence points (eventually)
  • Holding SHIFT holds X speed, holding CTRL holds Y speed. Holding both keeps relationship (slope) between the two speeds constant.
  • Tapping the spacebar holds and releases the current configuration across different modes.
  • Rising Difference Tone demo from some psychology website…really serious for musicians apparently! I'm just playing around with it…
  • Taking microphone input and plotting it in real and imag domain isn't so bad after all! Hilbert Transform, look it up in “Understanding DSP” book.
  • Play around with difference tones! It's a psychoacoustic phenomena where a third tone is generated when just two tones are played. Crazy! Wiki article and demo
  • Create chords with piano/keyboard input (coming soon).
  • Model audio and visual convergences based on harmonic series. Lots to learn from this page, apparently actual tuning is slightly off from perfect harmonics…Need to pick some significant harmonics and don't have to do all of space of mod n, etc. Piano is definitely key though…

HTML5 Implementation

  • Using Audio Tag in HTML5 Javascript WAV by Albert
  • Using Web Audio API. Works much better, but only by enabling a flag in Chrome and custom Safari! Might work in long run though…0xFE blog post. He uses “onaudioprocess” to trigger generating new data, and that's apparently how it's supposed to be done from this StackOverflow thread. The thread has a simpler bit of code too.
  • Perfect example code! . Solves clearing the screen on redraw and updates every 16ms, w/ minimum cpu usage! Other great examples too. Really neat site :-)
  • Is mostly already done through processing.js, but might be able to speed it up using HTML5 and raw javascript. Having access to a jQuery would be nice too…
  • Drawing in Canvas: Dive Into HTML5
  • Detecting Mouse Zoom in Javascript/Canvas: StackOverflow

To Do's (in approximate order)

  • Detect between OS's so that mouse scroll works normally. StackOverflow
Frequency Change
  • Do a frequency ramp instead of computing phase change each time?
  • Initial ramp should be a little longer? Make frequency quickly speed up and slow down to next frequency, kind of like starting up a motor
Pretty Colors and Tails (make it look awesome)
  • Do this by keeping a frame of what's been drawn and update the new frame and add back a fraction of the old frame, like a low-pass exponential. Should make this “tail length” a user-adjustable knob
  • Make it look awesome like this: (Hough Transform using “hot” colormap in Matlab)
  • Change color according to what color mix you're creating? Kind of a different domain (octaves double in frequency whereas low to high on color spectrum might be only double freq), but could work with log scale or something
    • The Math Behind Mixing Colors Our brain mixes EM frequencies in the visual spectrum. Red + Blue = Green (in our brain), and it looks visually the same as green light (white light through a green color filter), but a prism will split R/B apart and keep G the same. Way cool…
      • So, you could still potentially mix 950nm infrared and 550nm and get 400nm? (blue) Does heterodyning work with EM spectrum too?
Integrator Path
  • Adjust integrator so that it updates all speeds at one time, shortest net path instead of shortest path for each one.
    • This one is really weird…not sure how to fix. You see it as a curved path to get to new spot instead of straight line
  • Would be really cool to provide options to change graphing method. Graph x&y to get oscilloscope lissajous figures and allow phase to be open…?
  • Piano keyboard should be touch via mouse only, pressing multiple keys at one time is limited by hardware (called “keyboard ghosting”, explanation and great demo by microsoft)
  • MIDI, WAV input by drag and drop?! :-)
  • Should be able to provide a link to save them somehow. But, I think having a fast input method via keyboard will be good enough for now. Photoshop doesn't really have scripts, people just follow instructions
  • Oh…yeah. This stuff is really hard to understand and then teach! But it looks really cool.
  • For tutorial, make different objects have their own touch and move classes so that they can be controlled by different steps of the tutorial.
    • motor1.move(100), use integrator to move smoothly (esp when typing in characters)
    •, lights up for a bit. Helpful to know during tutorial what happened
Other Ideas
  • 3D???!! Might show more intuitive background of data.

* RESERVE DOMAIN NAME? ( is available :) ) $10

  • Port everything to a web-based thing using Processing.js
  • Have the app go full screen, but adjust max speeds accordingly so it's still square
  • Have an introduction animation with the actual circles
  • Incorporate controlP5? Reza's supershapes is a good similar example
    • Text input is a little hard. I kinda want to shy away from controlP5 as long as possible… :)
  • Save favorite spots


  • Finals are over! Geeking out…
  • Thinking of porting the whole thing to online-friendly things, but Processing.js (while really easy to port!) is a little underfeatured right now. It doesn't really do audio tones as far as I can tell, but it seems to do scrolling with a few tweaks.
programming/spirolab.txt · Last modified: 2017/09/15 17:58 (external edit)