Fourier Series Intuition : circle slider

I much enjoyed Kalid Azads Interactive Guide to Fourier Transform article on BetterExplained.com [ and was much impressed he mentioned my animated sine demo, which he extended upon in wonderful ways. ]

With recent javascript and web 2D/3D, I think we’re at the cusp of a kind of interactive learning renaissance.. because Math concepts can be made really physical, tactile and intuitive :  Show-me-how-it-works + let-me-drive beats verbose-monologue every time.

I wanted to mention another variant of the animated sine demo, where you can add a second circle and slide back and forth to see the first 2 terms of a Fourier series.

It seems like a gentle intro that would get young people thinking..’hmm, what if I add another circle… and how big should that circle be…’.

Obligatory Tolkien quote : “It’s a dangerous business, Frodo, going out of your door. You step into the Road, and if you don’t keep your feet, there is no knowing where you might be swept…”

Adding Circles – Javascript animation of Fourier Series

I get a few hits for the Animated Sine demo in Javascript – maybe this is a good way to introduce young people to math?

Here is a minor update I did a while ago that shows what happens when a second circle spins around the point on the outside of the first circle…

[click the pic or here to view the animation ]

This might be a nice lead into Fourier Series…

Xeno : simple tile game demo in HTML5+js

Xeno is a small demo project done over the weekend.  Click matching alien heiroglyphs to dissappear them.  Basic gameplay in HTML5 was pretty quick to prototype.

You can view it using Safari or Chrome browsers.  For iPhone, open in Safari and save to Home Screen, then you click the icon to load [for some reason fails to load directly, but works fine launched from Home Screen ]

For the path checking.. at first I did an exhaustive depth first search of all empty squares, but this exploded combinatorially.. so I used memoizing to reduce the repeat subpaths.. and then added a heuristic to find straight paths if they exist.  I probably should have looked up a decent path finding algorithm.  Sometimes its good to do things the blunt way yourself, so that you understand the problem and can then enjoy the beauty of a more elegant approach.

Hope you like the pictographs.. did them myself :]

Backstory

Lost in the dense Cambodian jungle you see what looks like an outcropping of ancient ruins.  Could that plynth be the entrance of an alien spacecraft which has lain dormant for thousands of years?  You wipe away the dust showing an irregular pattern of grooves.. you accidentally spill some water on the  console.

You hear a hiss followed by a gentle deep hum, and the panel under your palm begins to glow.   You must quickly match the glyphs to enter the Xeno’ ship…