Tuesday, November 10, 2009

Comments 26 comments

WebGL Musical Solar System

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.
Read more...

Friday, October 30, 2009

Comments 5 comments

WebGL Cheat Sheet

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!
Read more...

Monday, October 5, 2009

Comments 43 comments

Strange attractors - beautiful chaos and canvas

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

xn+1 = a0 + a1 xn + a2 xn2 + a3 xn yn + a4 yn + a5 yn2,
yn+1 = b0 + b1 xn + b2 xn2 + b3 xn yn + b4 yn + b5 yn2

where a0-a5 and b0-b5 are constants that make up that attractor. Another is the Peter de Jong attractor using trigonometric functions:

xn+1 = sin(a yn) - cos(b xn),
yn+1 = sin(a xn) - cos(b yn)

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 ai and bi 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

Read more...

Thursday, August 27, 2009

Comments 5 comments

Pocket Full of Canvas

One thing I found interesting when I did the JuicyDrop music visualization was MilkDrop's deformation effects. Rather than processing deformations for each and every pixel it works on a grid of points and then just interpolates the results for the actual pixels. I sort of mimicked that in JuicyDrop but in a simpler way. The grids used in JuicyDrop are something like 5x5 to 9x9 where MilkDrop uses much higher resolution grids and instead of doing per-pixel interpolation, the grid points are used to cut out triangles from the previous frame and paint them on the new frame, slightly transformed.


Since the deformations are usually very small when seen on a frame-by-frame basis, you can get some pretty good results even with fairly low resolution grids, and most recent browsers are more than capable of rendering 100 or even more triangles on a canvas. In the end, I was pleasantly surprised at how well everything turned out since I wasn't even sure I was going to get anything remotely close to what the original MilkDrop plugin produced.

While I still plan on doing some more work on JuicydDrop eventually, I decided to rip out just the grid deformation part and built something new around it. You see, every now and then I get the urge to just throw something quick together and make some flashing light or dancing balls or whatever but usually that urge comes when I only have 30 minutes to spare. So I figured I'd try to build a mini framework for making stupid demo effects and stuff like that.

I've ended up with a small application that loads simple scripts, exposes a bunch of functions to these scripts and then takes care of rendering and processing whatever the script tells it to. It's probably best explained by just taking a look at it. The whole idea was to make it as easy as possible for me to just throw some silly effect together real quick and hopefully not write too much code in the process, so it might not be the most thought through design but it gets the job done. The functions available range from basic drawing and image processing (via Pixastic) to audio data and 3D (via Pre3D).

There's no larger goal with this and there are already more robust and more elaborate frameworks out there for programming and animating graphics with JavaScript/Canvas(Processing.js for instance) so this is just my own little time-sink. You're of course welcome to play around with it, modify the existing scripts or even make your own.

To wrap things up, I made a little a demo comprised of scripts I cooked up while testing and developing this thing (as well as a few adaptations of other people's work). I totally recommend using Chrome and if possible, the dev channel as it's given me by far the best performance and visual appearance.

Watch the demo here

Play around with the application here
Read more...

Saturday, August 15, 2009

Comments 8 comments

Book review: Object-Oriented JavaScript

The good people at Packt Publishing were kind enough to provide me with a copy of the book Object-Oriented JavaScript by Stoyan Stefanov and it's just been sitting on my desk for far too long before I finally got around to reading it. But I did and so here are my thoughts on this book.

What's inside

Weighing in at just under 300 pages (excluding appendices) in 8 chapters, the book promises to teach you everything from the very basics of JavaScript programming to more advanced object-oriented patterns, regardless of your previous experience with programming and JavaScript.

When it comes to layout and ease of reading, I can't really put a finger on anything. In the very beginning of the book, various typographic conventions and such used throughout the book are explained but there shouldn't be room for much misunderstanding even if you skip that part. The pages read easily and have a nice balance of text and whitespace. Code examples, of which there are plenty although usually very short, are all clear, concise and easily identified.

The book takes a rather hands-on approach to learning and you're encouraged to try out short code examples as you read them. It works nicely, I think, at least if you're using Firebug (which the author suggests you do and also instructs you how to set up) since the book shows you both what you should type as well as the expected response from the Firebug console.

JavaScript basics

The book is more or less divided in two parts, with the first part (consisting of the first 4 chapters) dealing with general, basic JavaScript programming and the second part taking on the object-oriented aspects as well as dealing with the browser environment and discussing some design patterns.

And the first chapters do really start with the very basics. After a short introduction to the language in chapter 1, including its history as well as how it fits in among other languages, you're taken through the basic syntax of the language, the available operators and the primitive data types. It then naturally progresses to discuss functions and objects, including scope, the important topic of closures and how everything in JavaScript is an object.

Prototypes, the browser and patterns

Now, part 2 is where it gets more interesting. Chapters 5 and 6 explain in great detail how JavaScript is a prototypical language and shows with many examples how to write object-oriented JavaScript using constructor functions and prototype chaining. It's my understanding that many people new to JavaScript have problems grasping this part and the two chapters seem appropriately thorough with many examples and even a few diagrams when necessary.

I won't say much about chapter 7. It simply walks you through the objects and functions available when running JavaScript in the browser, ie. the document and browser object models (DOM and BOM). It's not the most interesting chapter seen in the context of learning the language but for those wanting to use it for developing web sites/apps, it's a nice and quick introduction if you don't have a book dedicated to that.

Chapter 8 finishes the "meat" of the book with a discussion of various common coding and design patterns, ranging from namespacing to JSON and singletons. They are all good topics but some of them get so little space that they seem more like appetizers for further study than anything else. That said, it's a good chapter and highlights how the language features you've just learned can and are being used to build real applications.

Near the end you'll find a few obligatory appendices listing things like reserved words, built-in objects and regular expressions. They are nice and detailed and about what you'd expect from a book like this, nothing more, nothing less.

A few comments

As mentioned earlier, it's suggested that you use Firebug while reading the book, but I suppose any JavaScript console could work and it's only meant as a tool to give you instant feedback. For the most part, the book deals with JavaScript in a strict language-only way, ie. it doesn't care if you're using JavaScript in the browser, on the server or in more exotic places. In fact, I was a bit surprised to see that, given this environment-agnostic approach, the author still chose to devote all of chapter 7 to the browser environment (DOM, BOM, etc). Not that it's bad or useless information (and it's certainly a good start), but you might want to look at other books for a more thorough introduction to client-side web development.

On the other hand, there are some areas that perhaps could've used some more space. Eg. things like public/privileged/private methods and properties in the context of JavaScript objects are only mentioned briefly in chapter 8 and a few of the other patterns discussed there could easily be "upgraded" and given a few more paragraphs.

You also won't find much about the newest editions of JavaScript, perhaps due to the book being, after all, somewhat tied to the browser environment where the newest versions are far from ubiquitous. As such, the book doesn't deal with the features introduced in JavaScript 1.6 and newer.

I'd say the ideal reader for this book is one with at least a bit of programming experience. While the first chapters are very basic (more experienced programmers might want to just skim these) the later topics do get more advanced and if this is your very first experience with programming, some of it could provide a challenge.

Conclusion

To summarize, I think this is a great book for learning the JavaScript language. It could perhaps have been a bit heavier on the OO side of things and maybe let some of the browser stuff go, but for a good all-round book on modern JavaScript this is a good bet, whether you're looking to taking your JavaScript skills to the next level or adding another language to your resumé. Depending on what you'll be using JavaScript for, you might also want to supplement with some material about all the good stuff in version 1.7 and/or DOM scripting.

If you want to get a taste of the book, there's a sample chapter available here in PDF format. It's chapter 2 which mostly talks about basic stuff like primitive data types, arrays and loops.

Finally, you can get the book here: Amazon.com (or Amazon.co.uk)
- or directly from Packt Publishing.
Read more...
 
Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto