Nihilogic

WebGL Musical Solar System

2009-11-10T09:36:00.000-08:00

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 Cheat Sheet

2009-10-30T02:51:00.000-07:00

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!

Strange attractors - beautiful chaos and canvas

2009-10-05T12:49:00.000-07:00

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

Pocket Full of Canvas

2009-08-27T12:15:00.000-07:00

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

Book review: Object-Oriented JavaScript

2009-08-15T08:01:00.000-07:00

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.

Photo editing with Ubiquity

2009-06-27T09:53:00.000-07:00

This is the first release of the new image editor that has actual Ubiquity functionality. Yay. In my previous post I introduced a new JavaScript image editor based on my Pixastic image processing library and let you play around with a "static" demo version. Now I've made a few Ubiquity commands that lets you take the editor with you around the web and edit any image you want.

Before we start

You should only use this with Firefox 3.5, anything older will probably not work at all (at least it didn't last time I checked). I haven't looked too deeply into it but I'm not sure it's possible to make it work for earlier versions due to some changes in security concerning the canvas image data acccess. That said, even with 3.5 this is still in the alpha stage and things occasionally fail.

When the commands are executed a whole bunch of JavaScript is injected into the page which then takes care of setting up the editor, loading CSS, images, etc (about 100KB gzip'ed, everything included). All these assets are currently fetched from www.pixastic.com, maybe they'll eventually be bundled with Ubiquity.

Once you've got Firefox 3.5 and the Ubiquity extension up and running you can subscribe to the commands at http://www.pixastic.com/ubiquity/. This will add the commands edit-image and edit-screenshot to your Ubiquity arsenal. The latest beta of Ubiquity supports hyphen-less commands but doing "edit image" seems to get mixed up with a Flickr search.

Image editing

The edit-image command lets you edit any image on any web page using the Pixastic editor. Just execute the command and click on the relevant image to load the editor. Currently only elements are supported, I don't know if support for background images will be added at some point. I'd also like some more UI feedback when in this "image selection" mode, and possibly allow for selecting an image with the mouse prior to command execution.

Screenshots and zooming

The other command, edit-screenshot, does pretty much what it says. It takes a picture of the current page (only the visible portion and no browser UI) and then loads the editor using that image.

Since the screenshots are always bigger than the image viewport in the editor, I've implemented some zoom functionality. There are just a few different pre-defined zoom levels and it doesn't allow for much zooming in, it's not very pretty anyway due to the interpolation when rescaling images in the browser. You'll see the current zoom level in the top left corner, some buttons or something for zooming in/out will be added later but for now you can use the mousewheel.

Image upload and Flickr

Ubiquity allows the editor to do stuff it wouldn't normally have access to (eg. taking a picture of the current page, editing images regardless of where they're hosted, etc) which means it is also possible to post the image to any destination such as photo hosting services and what not. An obvious one to implement was Flickr since it's widely used and has a nice and detailed API.

So you'll notice in the "Done" tab that there's now also an "Upload to Flickr" option where, with just a few clicks, you can authorize the editor with Flickr and then upload your edited image. It shouldn't be too hard to figure out. An authentication window is opened where you'll have to grant Pixastic the necessary privileges, you then confirm the authentication back in the editor and if all is ok, you can then fill in a few image details and begin the upload. It's all a bit rough around the edges and it needs a bit more work, better feedback to the user, more image info fields, etc.

A feature I might try to implement is to register if the original image was loaded from a Flickr photo page and then ask if the user wants to update the existing image or just upload to a new one. That shouldn't be too hard, I think. And of course more destinations, maybe Facebook and also something like ImageShack for quick and simple image hosting.

Other changes since last time

Most actions now let you apply them to a selected region of the image. Just drag a rectangular area on the image to make a selection. The selection stays active across actions until you click "Apply" on one of them, at which point the selection is reset.

To reduce the risk of forgetting to click "Apply" after setting the parameters for an editing action, the "Apply" button is now highlighted when any of the parameters are changed. If there are no parameters, eg. the invert action, the button will always be highlighted just as it will be for those actions where there are no "non-image-changing" default parameters (for instance the "mosaic" action, no value for the block size will leave the image untouched).

If you still manage to move on to something else without committing your changes, you can simply go back to the action you came from and the settings should be intact and ready for you to apply. I hope that's a reasonable compromise but I'm open to suggestions on how to improve the process.

Have fun

In case you missed it, you can find the Ubiquity commands here where you'll also have a few images to play around with if you're too lazy to find some yourself.

Be sure to let me know what you think. And since the web is such a hostile environment there might some pages where things get messed up, just give me links so I can check it out.

So, have fun, I know I will. That special Roskilde Festival type of fun! Back in a weeks time.

Grab colors from web pages with Ubiquity and Firefox

2009-06-05T05:42:00.000-07:00

It has always bothered me when I wanted to grab the color code of some HTML element of image on a web page and I had to either dig through a whole bunch of CSS or take a screenshot and load up Photoshop or whatever. I'm sure somewhere someone has made a tool that lets you do something similar, but with Ubiquity and my new color grabber command I can now quickly put a page into color picking mode and grab any color I want, all from within Firefox.

The idea came to me while working on the new Pixastic image editor. One of the Ubiquity-specific features will be an "edit-screenshot" command that takes a picture of the current page and loads it up in the image editor. This is possible via the HTML5 canvas element. While in normal web pages you can only paint regular images via the drawImage() method, running with Ubiquity's privileges also gives you access to a drawWindow() method that simply takes a window object instead. Pretty cool stuff. So that makes it rather easy to just grab a screenshot and use that in place of a regular image and, for this color picking command, to put the page in a "click somewhere" mode and then use the mouse coordinates to grab the pixel value from the screenshot image.

So what you do is this. If you don't have Ubiquity installed, do that first. Then get the grab-color command here (notice the bar at the top and the "Subscribe" button in the top-right corner).

You can now toggle Ubiquity (ctrl+space or whatever your command is) and type grab-color. And that's it. When you move the mouse over the page, the color under the pointer is displayed in a box and when you click the page, the color is prompted to you for easy copying.

The command has one optional argument that determines the format of the color returned to you, either "hex" or "rgb". So to get the color in rgb([r],[g],[b]) format, do grab-color rgb.

Photo editing in the browser with Pixastic - revisited

2009-05-19T10:54:00.000-07:00

A bit delayed, some progress has been made on the new Pixastic powered photo editor which will eventually find its way into the Mozilla Labs Ubiquity project. Here's a first preview of how the editor is going to look. It's still very alpha-ish and in a stage where I'm just trying to get something up and running, so wear your hard hats.

In very few words, the current situation is that I have an editor application running on the Pixastic library (the one featured on the Pixastic site doesn't actually use the library). There's no Ubiquity version yet (or rather, there is but it blows up every other time I run it), but I've made a test page with a few images that you can play around with.

In a lot more words, the main goals for this editor are:

Embeddable

I want it to be as easy as possible to embed into an existing page. This ties in with the goal to make accessible it via a Ubiquity command since this also means that it has to be all ninja like and there shouldn't be any trace of it post-edit. On the other hand, I'd also like it to replace the editor on http://www.pixastic.com/ so it should also run as a stand-alone app, but that shouldn't be a problem if the aforementioned criteria is met.

Some JavaScript files obviously need to be included (in Ubiquity's case, they're injected when the command is triggered) and in its current form the application is then loaded in an iframe where the DOM is filled and all the necessary CSS is loaded, keeping the editor separated from the page from which it was loaded.

Extendable

Well, it's based on Pixastic which is itself pretty easy to extend with new actions. Even though the internal API has a few flaws, it's easy and flexible enough that adding new actions and effects requires very little effort besides the actual image processing code. I'd like it to be just as easy to add new functionality to the editor so I'm working on a format that allows adding the most basic controls (text inputs, sliders, etc) with very little code but at the same is also flexible enough that you can create something like the cropping tool.

Load and save from/to anywhere?

Loading images is done programmatically at the moment but is as simple as calling loadImage(image) where image is an HTML img element. It would be great if it was possible to load up images from anywhere (other websites, Flickr albums, local images, etc), but same-origin security restrictions limit us to accessing images from the same host. There should be more freedom when running from Ubiquity and that feature would be more useful to have in the general case.

When it comes to saving, there are a few different options. The first - and most obvious when editing an in-page image - is to simply save the image back to the page. This is done by generating a data: URI and setting the src on the original image element. Second option is to save the image to the user's computer. This can be done by either making a link with the data: URI for the user to right click or by triggering a download dialog. The last option would seem like the best but in order to do that, the mime type of the data: URI has to be altered and it seems that Firefox is then unable to figure out the actual format of the image and defaults to giving it a .png extension, so that's only good for saving PNG images. I'd like to also take advantage of some browsers' ability to generate both PNG and JPG data: URI's so at the moment I'm not sure what to do. Any suggestions?

But with the cross-domain XHR abilities available from Ubiquity it should also be possible to post the image to something like Flickr or maybe Facebook. I've only just started looking at Flickr integration and I don't actually know if the Flickr API will even accept the image data - the data: URI is base64 encoded and it would be nice to not have to mess around too much with it since it can be quite big. I'll also have to look into what other online photo services are accessible.

Skinnable

To some extent the editor should be skinnable but I'm not going out of my way to make every detail customizable. In terms of layout I'm sort of going with Aza Raskin's Lightroom inspired proposal, at least for now. I'm using jQuery UI as a base for the UI elements, so all the theming that comes with that should apply here as well. It will likely end with a compromise with a somewhat fixed layout but color schemes and so on can be changed via CSS and jQuery UI themes if need be.

Feedback

At this point I'm very much looking for feedback on just about every aspect (features, UI, usability issues, etc.), but a couple of specific things I'm thinking about/that were brought to my attention are:

The undo feature: How does it work for you with the vertical bar? Is it in the right place? Should it stay hidden until there's actually something to undo?
Preview: On or off by default? I've hesitated turning preview on by default since JavaScript image processing can still be a CPU intensive task (especially with large images), even with today's fast JS engines. If processing was instant, I would have no problem making "on" the default state. Maybe turning it on/off once should toggle it for all actions (ie. globally)?
Apply: You have to actively click "Apply" before anything actually happens to the image. If you select another action/tab without clicking "Apply", your changes are lost, followed by much frustration. It's been suggested that all changes are applied right away (since you can just undo them). I'm not sure if that's the right thing to do due to the way the UI works right now, but that might just be me being used to the extra layer of confirmation. Perhaps it would be better if the button was highlighted in some way as soon as there are any changes that would be lost?

So many words

Ok, go on and play with the preview. When you're done, please let me know what you think.

At the moment it only works in Firefox but the aim is to have it working in all appropriate browsers. That means Opera 9.5+, Safari 4 (and Chrome once it gets [get|put]ImageData support in stable.

Nihilogic Games is now JavaScript Gaming

2009-05-15T00:07:00.000-07:00

At some point I'd like the games portal to be able to live on its own and it didn't sit right with me that it was a subdomain of nihilogic.dk. So it now has a new home at http://www.javascriptgaming.com/, check it out. Nothing but the name has changed (yet), though. The games feed is also still the same. Happy friday!

Games round-up for April 2009

2009-05-05T13:03:00.000-07:00

I had hoped to get a good chunk of Brent Silby's games added to the games portal during April but I had to postpone that mission. Only one Silby game made it but fortunately a few other people were also kind enough to email me about their games. As always, just let me know if you know of a cool game that fits the profile.

3bored
A very creative and somewhat abstract canvas-based shooter. If you ever wanted to be a white rectangle with the power of flight and bad odds of survival, this is the game for you.
Read more about 3bored

Balloons and Droids
The only one of Brent Silby's games I got around to adding, Balloons and Droids delivers exactly what it promises - balloons and droids, all in good arcade style fun.
Read more about Balloons and Droids

Canvas Invaders
Yet another Space Invaders clone, made by Jason Brown to gain more canvas experience.
Read more about Canvas Invaders

Coverfire
A remake of the old Crossfire game - and it's Wii enabled.
Read more about Coverfire

mBlocks
Now, there are a lot (and I mean a lot) of Tetris clones out there but this one is so well done that it just puts most other attempts to shame.
Read more about mBlocks

Sarien.net
Sarien.net lets you play old Sierra On-Line adventure games in your browser and spices it up with some interesting multiplayer "action". Absolutely one of the coolest things I've seen in a while.
Read more about Sarien.net

Tetris Bricks Car Racing
Valentin Galea linked me to his nostalgia inducing racing game a'la Tetris, inspired by the handheld devices of yore.
Read more about Tetris Bricks Car Racing

Word Wombat
A fun way to hone your typing skills. Type the falling words before they hit the bottom of the page.
Read more about Word Wombat

Canvas Cheat Sheet update

2009-05-05T11:38:00.000-07:00

As zcorpan was so kind to point out, my Canvas Cheat Sheet wasn't quite up to date and I finally got around to fixing it up. Here are the links to the revised version:

PDF document
PNG image

Besides a few minor corrections the only significant change is that createPattern and drawImage can both take HTMLVideoElements now.

Canvas Visualizations of Sorting Algorithms

2009-04-15T03:49:00.000-07:00

Via Simon Willison, I was made aware of an old but interesting post dealing with visualizing of sorting algorithms. Aldo Cortesi explains his dislike for animated visualizations and argues that their explanatory power equals that of a "glob of porridge flung against a wall".

He decided to make something better and ended up with some pretty cool static visualizations rendered with Python using the Cairo graphics library. Now, I don't know if these are really that much more informing than other attempts (especially if you're comparing algorithms), but I do think they're quite pretty.

Anyway, I thought they could use a little canvas love so I've spent my morning making a quick and dirty JavaScript / canvas port of Aldo's original Python program. It's a bit rushed and I don't have much experience with Python, so I might have missed a few details in the code, but it looks to be producing similar results.

See the canvas visualizations here

You can adjust the number of elements in the array and the dimensions of the canvas. When you click the "Render" button, an array of length NumElements is filled with random numbers and sorted using the algorithm of choice.

And make sure to read Aldo's original post for the full story.

FsckVPS review update

2009-04-05T05:47:00.000-07:00

As promised, here's a 1-month update on my experience with FsckVPS.

Well, once during one of my initial setting-things-up sessions, I did have some problems with either a very slow network or some other form of heavy load on the server. However, the problem disappeared before I could locate the cause and it hasn't come back (but I haven't been "active" on the server as much as in the beginning, so I might just not have noticed it). Other than that, ping times look ok according to host-tracker.com, with most US locations in the 50-200 ms range and the rest of the world just above that. As for download speed, I'm able to get about 8 Mbit/s here from Denmark, I haven't really tested upload speeds.

I didn't want to go through all the hassle with setting up FTP access, so I'm currently using SCP/SFTP to transfer files. I've never used SFTP much and found a program that would let me map a drive letter to the connection. Pretty nice but also horribly, amazingly slow. I realize there must be some encryption overhead and all that, but wow. So, back to WinSCP for me. Anyway, that has nothing to do with the VPS as such.

I've still seen no sign of my open source developer discount. I got no response to my email to FsckVPS (I replied to the mail I got from Rus with the coupon code) and I've just given up hope of saving those few dollars. $20/month is still cheap.

The HyperVM control panel is a bit glitchy at times and responds very slowly some times, but fortunately I don't need to use it much.

A few days ago, they had to shut down the HyperVM instance due to a "potential security issue" (which turned out to be relatively harmless). It didn't affect the VPS itself, though, and everything was up and running again later that day.

Overall, I'm still pretty satisfied. I've moved more and more over to the VPS, everything on pixastic.com and www.nihilogic.dk is now hosted there. The blog is still hosted at Blogger, as is the Games site, but now I'm considering switching to Wordpress and moving both of those to the VPS as well. It will probably be a while before I can find the time for that, though.

Games round-up for March 2009

2009-04-05T04:43:00.000-07:00

I've been so busy this month, especially the past week or two, that I haven't had time to add a lot of games, but the collection did expand a bit afterall. A few new games were added in addition to a bunch of oldies as well as some of my own game-related experiments.

3D Tomb II
The master of all things tiny, Mathieu 'p01' Henri, created this impressive FPS game in just 4KB.
Read more about 3D Tomb II

Amoeba
A fun, little Roguelike where you have to survive in a dog-eat-dog world (or amoeba-eat-amoeba, I guess).
Read more about Amoeba

BeSlimed
Everyone's favorite puzzle game Bejeweled - MooTools style.
Read more about BeSlimed

DHTML Lemmings
This game says JavaScript gaming like no other. A classic game with a near perfect DHTML implementation.
Read more about DHTML Lemmings

HatenaRunner
From the talented Satoshi Ueyama comes a fun Lode Runner clone.
Read more about HatenaRunner

Helicopter 2K1
Classic chopper action in this nice arcade game.
Read more about Helicopter 2K1

Leisure Suit Larry AGI interpreter
One of my favourites, António Afonso has made an interpreter for the old AGI adventure game format used by Sierra OnLine way back when and is showing it off with some old school Larry Laffer fun.
Read more about Leisure Suit Larry

Scriptris
Tetris clones are plentyful and JavaScript versions are too, but this one has some nice multiplayer options.
Read more about Scriptris

Shapes
A DHTML arcade game inspired by the fast paced Geometry Wars.
Read more about Shapes

Space Invaders Emulator
Not just a JavaScript version of Space Invaders, this is an actual emulation of the hardware used in the old arcade games. It also runs a few other classic Taito games.
Read more about Space Invaders Emulator

Super Mario and Wolfenstein
Also added was three Nihilogic experiments/demos from last year. First the Super Mario game that basically gave life to Nihilogic about a year ago and was later followed up by a Mario Kart experiment. Finally, a partial remake of the first map of Wolfenstein using my own crappy 3D engine.
Read more about Super Mario Bros.
Read more about Super Mario Kart
Read more about Wolfenstein 3D

VideoPoker
Get a piece of casino action with this video poker game by Juan Mellado. No risk of loosing the kids' college funds.
Read more about VideoPoker

I think for April, I might try to dig into Brent Silby's archive of DHTML games. I've been putting it off since there are just so many but there's really no way around it.

The Dancing Scrollbars!

2009-03-26T14:14:00.000-07:00

I had an hour to kill and got inspired by this entry on the Chrome Experiments site. Andrey has made a nice wave simulator using scrollbars and some JavaScript magic. Taking that idea and mixing it up with what I've been doing lately (see here and here), here is the magnificent troupe of Dancing Scrollbars (ok, they're more like the Jumping Scrollbar handles, really).

The music is Tom Cruise Crazy by Jonathan Coulton.

Have fun!

And now I'm totally done with this. For now.

A few Pixastic updates

2009-03-26T03:01:00.000-07:00

A few minor updates to Pixastic before I begin working on the next edition of the photo editor (the one that will eventually also work as a Ubiquity command). Undo/revert functionality, a color histogram action, and more..

A few people have requested a way to revert the image back to the original, so Pixastic now remembers the original image and lets you call Pixastic.revert(img) to undo all the processing done on an image. It's important to know that the resulting image from a process() call is not the same element as the one passed to the process() call. Pixastic creates a new canvas element which means that most properties, attributes and events are not carried over to the new canvas element. For instance, if you are making a mouseover/out effect on an image, you'll have to listen for the mouseout event on the new element after calling process() in the mouseover event. The example on the introduction page has been reworked to use this.

After processing an image, the options object now holds the resulting canvas in a property called resultCanvas. Example:

  var options = {};
  Pixastic.process(image, "action", options);
  options.resultCanvas; // <- holds new canvas

The canvas is also returned by the Pixastic.process() method itself, but only if the image is completely loaded by the time of the call (if it is not, the actual processing is deferred until the onload event on the image)

The options object can now also take a boolean leaveDOM option that will leave the DOM untouched after processing. If not set (or set to false), Pixastic behaves as it did before and replaces the original image with the new canvas element. The new revert() method will also put the original image element back in the DOM, if possible.

Bill Mill did some color histogram code for his article series on canvas image processing. This code has now been integrated (and slightly modified for consistency with the brightness histogram). Thanks Bill!

Lastly, I made few performance improvements in some of the actions (brightness/contrast, color adjust, desaturate). More will come as I get around to it.

JavaScript + Canvas + SM2 + MilkDrop = JuicyDrop

2009-03-24T10:02:00.000-07:00

More canvas music visualization - now with 100% more Winamp-iness.

A couple of weeks ago I played around with music visualization using JavaScript/canvas and SoundManager2. Well, I couldn't leave it at that and as I mentioned in the comments, I had an eye on the MilkDrop plugin for Winamp. The result so far is a little Winamp lookalike called JuicyAmp with its own music visualizer JuicyDrop that feeds on Milkdrop preset files.

If you just want to see the pretty colors -> CLICKY. (But please use Chrome or Firefox 3+)

MilkDrop is nice because, although there's a built-in editor in the plugin, the presets are in plain text. They are basically just lists of variables and equations that, with a bit of mangling, can be evaluated as JavaScript. There are also extensive guides that explain how to author presets and how variables are passed around between the different equations. And, even better, the source code for the plugin was released a couple of years ago.

MilkDrop presets consist of a number of different elements (waveforms, shapes, per-pixel effects, etc). Some of them I haven't touched at all, but JuicyDrop supports enough at the moment that a good handful of presets run just fine. That said, there are a whole bunch of problems to work out and the presets included were selected because they looked alright and didn't make it blow up.

I strongly recommend using Chrome for this. Firefox 3 can play too but is probably somewhat slower. There's something screwy going on with Safari, it's like it's refusing to update the display (try holding down a key on your keyboard) (Edit: at least a few people have reported that Safari is working fine for them, YMMV), I'm not sure what exactly is causing it. Opera is a mixed experience for me and it seems to have a problem with playing the music that I haven't found the reason for yet.

The issue with open Flash/sound-using tabs, etc. is of course still here as well (read the comments here for more).

A couple of keyboard controls:

Z : switch to smaller (128x128) visualization view (in case of low framerate)
X : switch back to normal (256x256) view
D : Toggle rendering of deformation mesh points
1 : Toggle basic waveform
2 : Toggle custom waves
3 : Toggle custom shapes
4 : Toggle borders
5 : Toggle per-pixel effects
6 : Toggle video echo

Note that not all presets use all of the features that you can toggle with the keys 1-6.

So without further ado, go have yourself a canvas trip.

I'm not sure where to go from here (besides a lot of optimizing). I'm not done with this, but I'm not sure I want to try to get full MilkDrop support. I believe the presets of today use a lot of pixel shaders anyway, which obviously is no good here. What I might do, though, is add another preset format (probably JSON?) that's a bit easier to work with and then shape that into something more suited for canvas and JavaScript. But for now I have a date with Pixastic..

Chrome Experiments and DOMTris

2009-03-19T01:25:00.000-07:00

"Not your mother's JavaScript". Google has just launched their new Chrome Experiments site, a showcase for experimental JavaScript projects. Anyone can submit an experiment and if it's deemed good enough, it will be included. There are already a bunch of cool experiments to play around with.

They contacted me a while ago, asking for a project of mine to include in the "initial batch". First it was supposed to have been the Digg Attack game, but for some reason they later decided to use my DOMTris Tetris game. That's cool, at least a lot of people are playing Tetris right now, my logs tell me. :D

Anyway, check out the Chrome Experiments site (and the DOMTris entry), lots of fun!

Creating pseudo-3D games... part 2

2009-03-13T10:34:00.000-07:00

Part 2 of my series of articles about how to use JavaScript, DHTML and Canvas to create raycasting games like Wolfenstein 3D is up at Dev.Opera - read the article here.

In this article I've taken the result of the first article and improved upon it by, among other things, optimizing performance and adding sprites and scary (not really) enemies that run after you.

Note that the titles of the articles are a bit misleading since Canvas is only really used for drawing the minimap, everything else is plain DHTML.

Music visualization with Canvas and SoundManager2

2009-03-09T13:12:00.000-07:00

I'm not much of a Flash person and I guess I just hadn't been paying attention since I only found about the new audio features when Scott Schiller added support for them in his SoundManager2 JavaScript/Flash library and later posted a (very cool) favicon VU-meter that would just dance all night to the sound of your music. Since then I've been wanting to do something with those abilities since I figured canvas and live audio data would be a perfect match for some groovy audio visualization.

This is the first of hopefully many such experiments. It's a fun little music video of sorts, where I've just thrown in all sorts of things to the tune of some Radiohead. If you don't care about all the details, scroll down to the end for the link.

So, apparently Flash has a function called computeSpectrum which returns the current audio state, either as frequency data or as a waveform. In SM2 this has been split into two separate properties of the SMSound object (you have to specifically enable both with a setting and it's only available in Flash 9 mode). The data is available as 256-element arrays of values between 0 and 1.

For the frequency bars at the bottom, I've simply summed the values in 9 broader groups rather than paint the full spectrum. The same goes for the binary values on the left sides, they're simply averaged in 16 groups and then converted to binary. At the top of the screen you'll see the waveform, drawn at intervals of 8 for performance reasons.

The fun part is the flock of boids that is spawned at the beginning of the song. They are controlled by simple rules similar to those described by Craig Reynolds' original 1987 model for emergent flock behaviour (cohesion, separation, alignment) but will also start to react to the beat of the music. Every frame, the audio is analysed and if certain areas of the spectrum reaches a threshold limit a "pulse" is fired, making the boids attract each other and then repel each other again. When this happens, they also form grids and shapes that are drawn on the canvas. As the song progresses, the drawing takes the shape of Thom Yorke's lovely face (see the image at the beginning), but each playback is random and thus will produce a new drawing.

You can pause the whole thing by clicking on the main area. Clicking on the waveform at the top controls the playback position.

Naturally, this is only for canvas enabled browsers (no Internet Explorer). It runs a lot better for me in Chrome than any other browser. I have not tested it in Firefox 2 but Firefox 3 runs ok but slow (might be better on more powerful machines than mine) as does Opera 10. Safari 4 is fine as well although it stutters a bit at times. I'm sure there's plenty room for more performance improvements but that will have to wait for another time.

Another puzzling issue I came across: I get a security error from Flash's computeSpectrum when trying to run this if I also have a tab open with a YouTube video (probably some other Flash sites as well). Exact error from SM2: "(Flash): computeSpectrum() (waveform data) SecurityError: Error #2122". Happens in at least Firefox and Chrome and a bit of googling tells me it's a Flash issue.

I chose Radiohead because I'm a big fan and it just seemed like a nice place to start, given the Flash based visualization of their House of Cards "video" last year. And in case you're wondering, the track is Idioteque off of Kid A, taken from a 2001 performance in Paris that can be seen on YouTube here (just remember the tab issue I just mentioned).

I'm not aware of any other music visualization projects using JavaScript and canvas as its output medium and Flash as the "backend" (besides simple dancing bars and such), so I'd be very interested if you know of any.

Now have fun with the demo!

If you like this, you should definitely check out JuicyDrop, another music visualization project of mine (think Canvas meets Winamp).

FsckVPS review

2009-03-05T13:18:00.000-08:00

Following is a long (and potentially boring) account of me trying to find a new host and how I eventually end up at FsckVPS. This was written as I went along, excuse the journal format. WARNING: I no longer recommend this host in any way whatsoever. I no longer host my sites at FsckVPS. While their product was more or less what was advertised on the tin, the support turned out to be shit and the guy in charge a common crook. In particular, the kind of crook who shuts down affiliate programs without settling the accounts. You owe me money, man. :-(

March 4, 15:00

For a long time, I've been wanting to switch hosts and possibly move to something a bit heavier than the simple $3/mo host I've been using so far (your typical shared web hosting service). For most purposes it's been fine but there have been a few annoying limitations (e.g. outbound connections are blocked) and coming from, at one time, having my own small server stowed away in a closet, I've felt rather amputated - even though I've also enjoyed not having the burden of system administration (something I'd rather avoid but can do if necessary).

So, a number of times I've been looking around, trying to find a suitable alternative, but until now nothing ever came of it. Price is pretty important (when isn't it?) since I don't really feel that my needs should warrant something more expensive than $20-$30/mo while still having enough resources to let me play around a bit without worrying too much. I don't plan on doing anything that would really stress the server and my bandwidth requirements are not that high, although it should be able to handle the occasional spike. A good compromise seems to be a cheap VPS (Virtual Private Server) solution.

March 4, 16:00

After a bit of googling and digging through a number of really horrible hosting review sites, it seems that Web Hosting Talk is the place to go when you're shopping around. Investigating further..

March 4, 20:15

At WHT I've now learned of the UK based CheapVPS - would you look at that, it even says cheap in the name! Now, of course this puts me off immediately, since putting "cheap" in your brand name usually means you're peddling crap, but the reviews are overwhelmingly positive, they're regularly recommended and they actually do offer some pretty cheap VPS hosting. The owner (Rus) and some other employees frequent the forums at WHT, so you can even get an impression of the kind of people running the business before buying and they all seem nice and helpful (at least to the extent that you've paid for since these are unmanaged VPS hosting plans).

March 4, 21:30

Ok, I've decided to try this supposedly great service. Off to CheapVPS to find a plan that sounds ok. After debating myself a bit, I've settled on a $19/mo 256MB (512MB with a RAMX2 coupon code) plan and fired off the order. The price is low and paid on a monthly basis, so I can afford to close it again if it turns out to be crap.

March 4, 21:45

Got a confirmation email. Shutting down for today.

March 5, 08:30

It appears another email was sent out a few hours after the confirmation email. I wasn't really expecting any more until today. Anyway, now they want me to scan and email some form of photographic ID (passport, drivers license, etc). Well that's just great, because I think I'm the only person on the planet who's never had a scanner. Way to be a 21st century digital boy, Jacob.

March 5, 09:00

Bummed out that I can't really do anything more right now, I went back to WHT to read some more experiences with this service. It turns out that CheapVPS is actually just one of several companies operated by a parent company called VAServ. They also run a2b2 which offers managed VPS plans, and then another, younger and very interesting sibling, FsckVPS. FsckVPS is an almost fully automated, unmanaged VPS solution and their goal is to make things as automated as possible, ie. everything from ordering to setup, billing, etc. in order to lower prices as much as possible. This means the VPS is instantly setup within minutes (at least according to the website) and for the same 20 bucks I can now get 1024MB RAM (burstable to 2048), 50GB disk and 850GB transfer - or half those numbers for $10. Of course, in turn you also give up pretty much all support. Hmm..

March 5, 09:05

Oh, look. They even have a 10-20% discount for open source developers. Nice! A better deal for me and karma points for them. Sending email to sales department requesting coupon code.

March 5, 09:10

Well, that was quick. A 15% discount code received from Rus the boss. Now pondering which direction to take.

March 5, 10:40

Oh my, it seems all their websites just went down with 502 Bad Gateway errors. Nice timing!

March 5, 11:10

Some of the websites are back up, fsckvps.com not included unfortunately. I'm pretending this didn't happen or that it at least only affects their own websites..

March 5, 11:20

Ok, I've more or less decided to go with a 1GB plan from FsckVPS instead. The things CheapVPS offers over FsckVPS (as far as I can see) are optional control panels (DirectAdmin, cPanel), choice of Xen or OpenVZ (FsckVPS is OpenVZ only), choice of UK or US location, a few more Linux distros to choose from and 3, 6 and 12-month payment plans. All things that don't really matter much to me. Now I'm just waiting for the website come back online. Their test download file (http://server1.fsckvps.com/test.100M) is still working, so hopefully that means the problem is just with their own sites.

March 5, 12:50

After much waiting, the fsckvps.com website is still down, but I think they only serve a few static pages there anyway. Their order module is hosted elsewhere and I've now completed my order. However, the coupon I received does not appear to have much effect. Even though the discount appears on the order, the price remains the same. I've left a note about it in the "additional comments" field and am now waiting, hoping for a response before I finalize the payment (via Paypal, yay.)

March 5, 13:50

Screw that. Payment done. Ding! Paypal confirmation email is followed by email from FsckVPS telling me my VPS is ready. Instant actually means instant, not bad. Logging in. The HyperVM VPS control panel (about which I know absolutely nothing) seems to be running ok. Time to play!

March 5, 14:00

Seems my new VPS is running CentOS and not Ubuntu as I'm pretty sure I had requested. Nevermind, there's a rebuild option where I can choose between a whole boat load of distros, guess I was wrong earlier when I said there were more options with CheapVPS. Anyway, I don't feel like familiarizing myself with yet another Linux distro, so a rebuild it is. And now it's done, nice. In the mean time their website is also back up. Preparing myself for a day of apt-getting.

March 5, 21:00

Been messing around with my new toy for hours, spent way too much time on simple things like getting SSH up and running (helps when you bind to the right IP), but now it seems I've finally got a basic LAMP box set up. For testing purposes, I've cloned the Pixastic site to http://www2.pixastic.com/ which is now located on the new host. I'll probably let it sit for a few days and then move it for real and if things are still looking fine, I'll begin looking at moving the Nihilogic stuff. Anyway, so far it's been a mostly pleasant experience. My discount is still nowhere to be seen, though, so I'm sending an email now.

I'll probably post a follow up in some time when I've got more experience with their service and maybe my posts will help someone else decide whether or not to give FsckVPS a shot. And if you have any experience with this company and their services or have reviews of similar services, feel free to comment.

TL;DR: Looking for new hosting, signed up for a VPS at CheapVPS, changed my mind and went with FsckVPS, will post more later.

Games round-up for February 2009

2009-03-03T13:25:00.000-08:00

Last month, I opened up another section of Nihilogic devoted to JavaScript games and I got a lot of nice feedback, so I'm hoping it will grow to be a successful site with time. To keep a connection between that section and the blog and for those who want to stay up to date without getting spammed every time a new game is added, I think I'll do monthly round-ups here, briefly summing up all games added during the month.

Ok, on with the games for February. I'll only mention those that were added after the initial announcement and since I'm still largely playing catch-up with several years worth of existing games, most games aren't that fresh anymore but there might a few that catch your eye anyway. As I work my way through the pile of games to add, the old-to-new ratio should hopefully improve.

ProtoRPG
Not really a game as such, ProtoRPG is actually a game engine ready to use if you feel like making your own roleplaying game. Built on Prototype and Scriptaculous.

Final Fantasy Mini Battle
A fun little diversion in this Final Fantasy inspired battle game.

JS Bomberman
A nice Bomberman-like game by Gabriel Munteanu.

Canvex
I really wish Philip Taylor would do something more with this since it's just awesome cool. Raycasting for fun and profit.

Digg Attack
One of my own experiments, a mashup of shoot'em-up action and data from the Digg API.

Stack the Log!
The first of two games from XWUZ, this is a test of quick reactions.

Bubble Trouble
The second XWUZ game is a SameGame-like puzzle game.

Clix
Another puzzle game like Bubble Trouble.

Invaders from Mars
Space Invaders meets Galaxians in this great looking game from Mark Wilcox.

Redline
Fun little side-scrolling racing game.

Z-War
Odds are against you as zombies try to eat your brains in this shooter.

World of Solitaire
This is a really impressive collection of online solitaire games.

Canvas Breakout Tutorial
A step-by-step manual to creating your own Breakout clone with canvas by Bill Mill.

Feel free to use the comments feature to comment on the games or to suggest games you'd like to see added.

I'm also looking for any tutorials and other good resources that would fit in, so don't keep them to yourself!

HTML5 Canvas Cheat Sheet

2009-02-22T12:14:00.000-08:00

My memory isn't very good and I often find myself looking up simple things in various specs but sometimes they're just too damn long-winded when you're simply looking for argument x of function y. That's where cheat sheets and reference cards come in handy with their compact, bare-bones information crammed into, at most, a few pages. There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better.

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla's examples). So, it's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

Choose between a 2 page PDF document or a PNG file. Thanks!

Corrections and comments are welcome!

Introducing Nihilogic Games - A JavaScript games portal

2009-02-11T10:37:00.001-08:00

A small expansion to the Nihilogic site! A new games subsite is now located at http://games.nihilogic.dk/, dedicated to JavaScript games.

As you probably know, there are about a billion sites that collect Flash games (yes, I've counted them), some small and dedicated to niche genres, some big and elaborate. But I've yet to come across a good resource dedicated to just DHTML/JavaScript games, which is why I decided to expand my little site here with a games portal of sorts. It's a subsite of nihilogic.dk and is located at http://games.nihilogic.dk/. It's still very much a work in progress, so I'm still moving things around and stuff.

So far I've only got about 35 games catalogued but there's a whole bunch more in the queue just waiting to be added. The games get tagged with genres, authors, year of production and the technologies used and a small review blurb will tell you what the game is about. The idea is that you shouldn't be able to just browse for, let's say, nice JavaScript platform games, but - since this is a code focused site - also find games that use a certain type of technology, like the YUI library, SoundManager2 or just plain DHTML.

You'll find that the left sidebar is dedicated to these categories and functions as the main navigation bar, while the right bar has a few dynamic lists, featuring the latest games and the popular games. Popularity is based on the ranking of the games, so I hope visitors will share their opinions both by leaving comments and by clicking the pretty stars.

I'll add a "suggest a game" form soon (right now there's just an email link), but until then you are more than welcome to suggest games to be added, either by leaving a comment here or by emailing me. There are not a lot of criteria for what I'll add, except that it should be at least somewhat noteworthy (ie. not Tic-tac-toe or something equally trivial). Tech demos are also welcome if they're in a "presentable" state. And of course - only games based on JavaScript/DHTML/Canvas (although Flash is allowed for sound and such).

There is of course also an RSS feed (in addition to the regular feed) with the latest games for those of you who are into that sort of thing.

Thoughts and ideas about what you'd like to see on such a site are of course more than welcome, just leave a comment below!

Pixastic to power Ubiquity photo editor

2009-02-04T13:05:00.001-08:00

I've been talking to Mozilla's Aza Raskin about a photo editor command for Ubiquity based on my Pixastic library. He posted an article today explaining what such an editor might look like, check it out! If you don't know what Ubiquity is, it's a really interesting extension to Firefox from Mozilla that lets you interact with your browser using typed commands.
Anyway, as the post says, I hope to begin working on the photo editor within a month so.