Here's another thing I did while I was first playing around with WebGL, working on the musical solar system thing. Due to changes in the WebGL spec and the various implementations it got broken before I had a chance to put it online and it's just been sitting collecting dust ever since. I just tried fixing some of the issues and it seems to run ok now (let me know if it doesn't). It's a small experiment with a whole bunch of particles/planets forming larger shapes. Enjoy!

Link: Worlds of WebGL

Make sure you have a WebGL capable browser. Check out this page over at Learning WebGL if you need help getting one.

Long overdue, here's an updated version of the WebGL Cheat Sheet with a few adjustments. Since the original post, the official WebGL specs have been made public and there have been some changes to the API (see this article for a list) that I haven't incorporated into these docs until now. Thanks to Gonzalo for poking me a few days so I could get this done. Additional corrections are of course still more than welcome.

Links

WebGL Cheat Sheet (PDF)

WebGL Cheat Sheet (HTML)

A solar system of dancing planets, made with JavaScript, WebGL and HTML5 audio.

In my quest to get to know WebGL better, I've gradually been building my way up from the standard "paint one triangle" tests to more and more advanced things. Never having touched OpenGL before, this is all a nice learning experience for me and I can now render not only one but two triangles at once as well as cubes, spheres and what have you. There's been some nice progress around the web as well, most recently with Yohei Shimomae's Cube Defense, a tower defense like game built with JavaScript and WebGL - probably the first WebGL game ever but hopefully many will follow!

Without further ado, here's my own first, small pet project: A solar system of dancing planets.

You will need either a Firefox nightly build or a Chromium continuous build to run this (in my experience, it runs best in Chrome). I don't know if WebKit on Mac will work and I've only tested FF and Chrome on Windows. If you have any success running it on Mac, please leave a comment saying so. So far it doesn't look good, though.

In Firefox you need to enable WebGL by going to "about:config", searching for "webgl" and enabling it "for all sites".

Chrome needs to be launched with the command line arguments "--enable-webgl --no-sandbox", so make a shortcut to chrome.exe and add those arguments.

If for some reason you're unable to do that or you're just lazy, there's also a YouTube video. The real thing looks better, though.

For those interested, this time the audio comes from an HTML5 <audio> element and not from SoundManager2 (which is great but also Flash). However, HTML5 doesn't give you the same detailed audio data (FFT and such) that Flash does, so I'm actually reading the data from a separate text file. I would of course rather have had actual access to the data, but this will do - and it keeps it totally Flash-less.

WebGL has been getting a fair amount of buzz lately - and rightfully so, because it is cool. For those that don't know, WebGL is the 3D extension of the Canvas element, based on OpenGL ES 2.0. Having a standardized low-level graphics API like that available in the browser is pretty exciting stuff if you ask me. 3D canvas graphics has been long underway and not until just recently did it get to an interesting state when the first signs of WebGL showed up in both the (Mac) WebKit and Firefox nightly builds.

Note: This cheat sheet has become a bit out of date as the specs have been released and changes have been made that are not reflected in the cheat sheet. I will update it as soon as possible. Cheers. It's still very much a work in progress and the official specs haven't been made public yet, I'm not even sure how far they (Khronos, the working group responsible) are in settling on the specs. So that means there aren't much in terms of references out there for people like me who are anxious to play around with this new toy. There are a few example demos from both the WebKit and the Mozilla camps and cool sites like Learning WebGL are starting to pop up. There's of course the OES 2.0 reference and the source code for both WebKit and Mozilla implementations is also readily available. So, I decided to just make my own reference sheet by combining those sources and the result is a condensed WebGL cheat sheet which fits on 4 pages - or 2 if you have good eyes and print two on each page.

As an added bonus, this exercise forced me to dig through the entire OES2.0 spec, which was great since I'm an OpenGL newbie and learning stuff is cool!

Of course, given the current state of WebGL, any of the information in this document is subject to change from day to day. I might most certainly have missed a bunch of things as well due to lack of insight and good references. In addition to that there also seem to be a few differences in the two implementations, so those will be corrected when I know what actually needs correcting.

I also don't have access to a Mac and since the WebKit implementation is Mac-only for now, I haven't actually seen it action. There might be more differences between the two than I've found just by glancing over the source.

Anyway, here it is in both PDF and HTML:

WebGL Cheat Sheet PDF

WebGL Cheat Sheet HTML

The HTML version has the extra bonus feature of tooltip information when you hover the mouse over (most of the) function parameters and enum values.

And corrections and suggestions are of course most welcome!

Math has the ability to both be totally awesome and beautiful as well as make me bang my head into the wall. While the actual math involved at times goes way above my head, some things are just so damn elegant and when, on top of that, they can be visualized with pretty pictures, I'm sold. To make things even better, we have <canvas> and with it the ability to throw some JavaScript at this magic math. Links to gallery and generator at the bottom if you want to skip the details.

I'm sorry if I offend any math-enabled people with this post, I am but a mere mortal so bear with me if I mess up any of the math.

Anyway, fractals like the well-known Mandelbrot set (and many others) have that ability as do another category of mathematical creatures known as strange attractors. So what are they? I asked Wikipedia:

"An attractor is a set to which a dynamical system evolves after a long enough time."

While in every day use, one might think of an attractor as something that attracts stuff, in this context it's really the pattern or the result of what's going on in a system. E.g. if you're measuring and graphing the relationship between a number of variables over time, by connecting those points you could refer to the resulting pattern as an attractor.

A point attractor a simple form of attractor. Consider a pendulum. Release it and it will always, eventually, end up at rest in the same place. That resulting pattern (the point) would be the attractor for that system.

What about strange attractors, then?

"An attractor is informally described as strange if it has non-integer dimension or if the dynamics on it are chaotic."

Chaos, alright. Among other things, that involves being very sensitive to initial conditions (butterfly -> wing-flapping -> tornado, etc). It's more complex that than, but that's where it just goes beyond what I can grok.

Ok, so what we need is a function that, when called over and over again, shows unpredictable and radically different behaviour if we change some initial conditions (even just slightly). Fortunately there are smart people who already found such functions.

One of those is the quadratic map given by

x_n+1 = a₀ + a₁ x_n + a₂ x_n² + a₃ x_n y_n + a₄ y_n + a₅ y_n²,
y_n+1 = b₀ + b₁ x_n + b₂ x_n² + b₃ x_n y_n + b₄ y_n + b₅ y_n²

where a₀-a₅ and b₀-b₅ are constants that make up that attractor. Another is the Peter de Jong attractor using trigonometric functions:

x_n+1 = sin(a y_n) - cos(b x_n),
y_n+1 = sin(a x_n) - cos(b y_n)

I've only played around with a few but there are many more. These, however, produce some very interesting visuals.

One problem, at least in the case of the quadratic attractor, is that, if the a0-a5 and b0-b5 factors are chosen randomly, very few (like 1% for quadratic, the other formulas seem to have a higher rate of success) combinations produce a useful chaotic system. Determining which ones do is done using something called the Lyapunov exponent, which I won't go into but look it up if you're interested.

All this was heavily inspired by the work done by Paul Bourke who has done all sorts of awesome math visualization. The code itself is also partly based on a program available on Bourke's site.

View the gallery for pretty pictures or make your own using the generator. The way it works is that you pick a formula/attractor type and click "Generate". It then searches for potentially nice images by selecting random values for the a_i and b_i coefficients. When a chaotic attractor is found, it draws it on the screen, optionally with some pretty and colorful compositing (courtesy of Pixastic). You can recreate any attractor by using its seed number (displayed after the name). If you find some really nice ones, leave a comment with the seed and attractor type so I and others can see.

Also, If you're going to generate your own images, I really suggest using Chrome (or WebKit, although it has problems with the compositing). Any recent canvas enabled browser should work, though.

View the gallery
Try the generator