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. http://ioso.org/library/fun/spirograph.pdf
• 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…

• Man, Bret Victor is addicting.
• http://webaudiodemos.appspot.com/, might be useful for HTML5 interaction.
• http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html Another huge thumbs up, including the piano demo here: http://www.iquilezles.org/apps/soundtoy/index.html

• 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?

• Another source for a simplified API: http://mathiversity.com/Spirograph

• You can definitely do this online!
• http://webaudio-io2012.appspot.com/ WebAudio presentation, tons of tricks and javascript things
• http://airtightinteractive.com/demos/js/reactive/ very fast audio processing demo with 3D
  • Using Three.JS, works great
• Many fun Web Audio API demos here: http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html
• Maybe even a Javascript piano too: https://github.com/mrcoles/javascript-piano

• 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.

• Mathematica Notebook of Spirolab (plotted over time): https://www.dropbox.com/s/zwox3nvs42alsbx/Spirolab.nb
• Cyclic curves! Google search and very important looking paper: Cyclic Curves in R^N
• Perhaps below animations of 3D objects rotating is simply a matrix transformation of built-in coordinates?
• First attempts at characterizing this thing using a spirolab notebook:
• Great example Mathematica notebook: http://demonstrations.wolfram.com/Spirograph/
• iOS touch and audio application
• LibRocketGreat UI Library for C++
• both are made using X/Y input of oscilloscope

YouTube Link! https://www.youtube.com/watch?v=o4YyI6_y6kw

YouTube Link! https://www.youtube.com/watch?v=W5pTi3UEKioYouTube Link! https://www.youtube.com/watch?v=zAvMmnA4sTE

• Another awesome demo of combination tones using SuperCollider. There's more than just difference tones going on here…http://www.earslap.com/doodle/combination-tones-and-the-non-linearities-of-the-human-ear
• Also related to missing fundamental…http://en.wikipedia.org/wiki/Missing_fundamental. Maybe they look the same in time or complex domain?

• 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…

• 3D Spirographs

• Physics Oscillations Hands-On Demos

• Derivation of visualizing chladni patterns
• Need to read about laser hologram
• Visualization of sound intereferences from Australia UNSW physics website

• 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

• Also, another method described in Understanding DSP is simply
• Hilbert transform is as easy as taking FFT, multiplying negative frequencies by -1 and doing IFFT! http://www.math.upenn.edu/~cle/m584/matlab/ws_hilbert.html
  • Also, Minim can do IFFT, but I'm not sure that it does full spectrum?
• YouTube Link! https://www.youtube.com/watch?v=2tE2oLLXXHA (from http://www.youtube.com/results?search_query=Dr%20Ted%20Monchesky&search=tag)

• “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.

• Use PWM (with microcontroller) and 4 mirror setup. Not sure what to do about red laser or diffractors…
• Leyanda.de Project. Talks about effective PWM operation and using mosfet for laser switching.
• http://www.instructables.com/id/Four-Motor-Laser-Spirograph/4 Motor Setup! THE WAY TO GO :)
• Another option. He measured each angle of mirror using some math after the fact. Kinda cool!
• Take pictures of it on long exposure to get the full effect of the shapes (especially for higher numbers of mirrors)
• Hypotrochoid paper (CS guy)
• Plotting spirographs
• The landmark paper on this is Frank Farris' Paper, "Wheels on Wheels on Wheels"

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.

https://www.dropbox.com/s/dxcw98u3o90fx0t/spirolab_application.windows32.zip?dl=0

• 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

• Maybe ask Kalid Azad of BetterExplained for help? You talked with him before, and he's definitely interested…

• 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

• 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

YouTube Link! https://www.youtube.com/watch?v=wm2_qmC0qq4 YouTube Link! https://www.youtube.com/watch?v=0i0OLlrK49Q

• “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…
• Just Intonation and Five-Limit Tuning on Wikipedia

• 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

• Detect between OS's so that mouse scroll works normally. StackOverflow

• 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

• 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?

• 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)
  • motor1.click?, lights up for a bit. Helpful to know during tutorial what happened

• 3D???!! Might show more intuitive background of data.

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

• Port everything to a web-based thing using Processing.js
  • Mouse scroll
    • Feature ticket, final code
    • Another 3D example that works well. Don't know *how* it works though…
  • Exact javascript sine wave audio?
    • Great one! Javascript WAV by Albert
    • Rodrigo's tutorial, his other tutorial
    • MS Geek WAV Help
    • WAV Header Formatting Help (Josh sent you this page)
    • Mmmm, need to generate the full waveform (due to the beats needing to line up at slow speeds). Actually, you can just generate the length of 1/(f2-f1) (1/beat frequency) to get beat period I think…wonder what it's like for multiple tones?! >.<
      • Need to have it repeat that waveform
    • MAKE THE LOWER FREQUENCIES LOUDER!!! :) Maybe you'll actually be able to do it this time..
• 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.
  • Source 1, Source 2