I had another opportunity recently to make a visualization out of JavaScript; I thought I’d share two examples of using the language for this purpose.

The 6-Stroke Wankel

Last winter, there was brief flurry of activity over some guy building a six-stroke engine. The principle was ingenious—rather than waste excess heat through a cooling system, why not harvest it as an extra power stroke, by injecting distilled water into your cylinder? The rapid expansion of the liquid into gas would provide a small boost, plus drastically reduce the amount of cooling infrastructure necessary on the engine block.

My immediate thought was, well, what about doing that with a Wankel? A Wankel rotary engine is a lightweight, high-torque system. Mazda uses standard 4-cycle Wankels with their RX7 and RX8 cars, but what about a 6-cycle one, that implemented this water-injection cycle?

Jeff helped me out with some of the formulas, and we ended up figuring out what the thing should look like. Now, it could certainly be modeled in a tool like SolidWorks, or AutoCAD, or maybe even MATLAB, but what’s the fun of that, when only people who have the software can look at it?

Instead, I tried going the SVG route. SVG is an open standard vector language that’s positioned to compete with Flash. Through various problems, it’s not as widespread as it could be, but all of Firefox, Opera, and Safari provide reasonable support for static SVG, and Firefox provides excellent support for SVG animation. So you’ll need to be using Firefox to view this, but here’s the animated demo of the six-stroke Wankel.

The real-world feasibility of the thing is a topic for another day, but I was very pleased with myself to be able to come up with an attractive demo like that within a few hours of a concept. Although I didn’t know SVG at all, all my knowledge of JavaScript DOM operations was completely transferable, and thus the coding of it was a snap.

Crickets and Fireflies

The second demo was from a few days ago. The guy I’m living with this term was explaining to me about synchronized oscillators, the principle that explains how a group of crickets—all apparently acting on their own—can all chirp in unison. He’d been looking for a visual aid to use with his students, and I mused about the feasibility of implementing such a simple thing in straight JavaScript.

The final demo is here, this time without any SVG at all, just straight HTML, JavaScript, and CSS. It only took about two hours, but there it is, you can play with the knobs and switches, and see the math at work.

I guess the funniest thing in all of this is that the JavaScript involved in both of these demos is frightfully simple stuff. Just a few functions, a timer, some event handlers, and a bit DOM tree manipulation. Compared to what goes on at work, it’s nothing. But it’s just neat to see how much can be accomplished with so little.

Mike

← Earlier Later → Posted at 10:40 pm to Programming.