Nihilogic

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 - Finding a good, cheap VPS hosting solution

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

Warning: 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.

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.

Photoshop blend modes with Pixastic

2009-01-22T03:05:00.000-08:00

I've added a new action to the Pixastic library called "blend". This action lets you blend two images using different blend modes like the ones available in Photoshop (multiply, screen, exclusion, etc.).

Example usage

var img = new Image();
img.onload = function() {
 var blendImg = new Image();
 blendImg.onload = function() {
  Pixastic.process(img, "blend", 
   {
    amount : 1, 
    mode : "multiply", 
    image : blendImg
   }
  );
 }
 blendImg.src = "blendimage.jpg";
}
document.body.appendChild(img)
img.src = "myimage.jpg";

The image on which you apply the action will be considered the base image when blending. You can use either an img element or a canvas element for the "blend image". It expects the images to be the same size but will simply crop the blend image if it's too large or leave untouched areas if it's smaller then the base image.

Check the demo page to see it in action.

Below are shown all the blend modes included. The images used are:
Base image:

Blend image:

Blend modes

Normal

Darken

Multiply

Color Burn

Linear Burn

Darker Color

Lighten

Screen

Color Dodge

Linear Dodge

Lighter Color

Overlay

Soft Light

Hard Light

Vivid Light

Linear Light

Pin Light

Hard Mix

Difference

Exclusion

So, basically all the Photoshop modes sans "dissolve" and the HSL based ones (which I guess I'll add at some point as well).

Genetic algorithms, Mona Lisa and JavaScript + Canvas

2009-01-08T12:27:00.000-08:00

About a month ago, there was an interesting article about using genetic algorithms to "evolve" images. Roger Alsing had made a small program and put it to the test by letting it make a very good approximation of the Mona Lisa with 50 layered, semi-transparent polygons. I figured I'd try to do something similar with JavaScript and Canvas.

Genetic algorithms

So, the basic idea of genetic algorithms is that you have a population of individuals, each carrying a DNA string representing a possible solution to the problem (in this case, the polygonal likeness of Mona Lisa). The initial population is assigned random DNA and subsequent generations are then created by mixing the DNA of the fittest individuals of the current population. In order to ensure diversity in the population, there's a small chance of mutation where a DNA value is randomly changed. However, Roger Alsing's project actually uses a population of only one parent, making it more like a hill climbing algorithm where the current solution is altered slightly and if it's a better fit, the old one is discarded.

I tried to go for a more proper genetic algorithm approach with an adjustable population size, selection, DNA mixing and everything. Now, Roger used just short of a million generations to get to his result (which was very accurate). It took 3 hours for his (compiled) program to generate the resulting image, and of course, even if JS engines are getting faster, it's going to take a bit more time than that to get as nice a result as his using JavaScript. Still, even after a few hundred generations/a few minutes in my demo, with the default parameters, you should see the shape of Mona Lisa starting to take form. I'm unfortunately not very patient, so I'm not sure if my experiment can even create as good an approximation, given the necessary time.

There are also a few other images you can play with. I've made the images pretty small (100x100) so that evolution would be as speedy as possible. The fitness function actually uses an even smaller (50%) version.

Options

Some of the parameters can be changed before starting the evolution. They are:

Number of polygons: The number of polygons used to in the image approximation.
Polygon complexity: The number of vertices in each polygon.
Difference squared: If checked, the squared differences of the RGB values are used when calculated fitness, otherwise simply the absolute difference.
Population size: The number of different candidates in each generation.
Succesful parents cutoff: The percentage of candidates selected for breeding the next generation, eg. 0.25 = the fittest 25% of the current population.
Mutation chance: The chance that a value will mutate when breeding new candidates, for example 0.02 = 2% chance of mutation.
Mutation amount: The amount the mutated value will be changed, for example 0.01 = 1% means a random change between -1% and 1%.
Uniform crossover: If checked, values are mixed at random one by one from each parent, otherwise a single random cut in the DNA string is made and one part from each parent is used.
Kill parents: If checked, the new generation will consist entirely of the children of the old generation. If not checked, the parents are left alive and will compete against their offspring.

If the parents are not carried over to the new generation, you will notice that the best fitness value in the new generation might actually be worse than the previous one. On the other hand, that could make it easier to avoid dead ends and premature converging towards local optima.

Note that changing the parameters won't have any effect until the evolution is restarted.

A few results

Here are a few quick runs, showing the results.

Mona Lisa after 25 minutes

Firefox logo after 25 minutes

Opera logo after 40 minutes

Mondrian after 14 minutes

Microbe after 9 minutes

Browsers

Since we're using canvas there's no support for IE. Furthermore, we're using the getImageData method, so only Firefox, Opera 9.5+ and WebKit nightlies will work. I suggest using either the latest Firefox beta/preview or a recent WebKit nightly as they seem to yield the best performance.

One last note

Only now, after I'd been playing around with this, have I noticed that someone had already done a JavaScript/canvas version of Alsing's program (where you can even use your own images) back when the original article was published, and for some reason I missed it. That version stays closer to what Alsing was doing, though, where mine differs in a lot of ways.

I think my approach gets to something resembling the target image faster, but it seems to have problems getting the details in place after that. I haven't had the patience to let it run for more than a couple of hours and it's quite possible that the other techniques are able to get a better approximation in the long run.

Play with it here

2008 - A Year of Awesome JavaScript

2009-01-02T12:51:00.000-08:00

2008 has been just great, not least because of all the great stuff people have been doing with JavaScript, the new canvas element and the web in general. Browser vendors are now competing, trying to outdo each other in terms of JavaScript performance, leaving developers and end-users as winners as we now get to do cool stuff that wasn't really feasible before. Here's a summary of the neat things of the year 2008 as I saw it.

Games

It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs.

Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game.

We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. Although they are mostly betas or demos at the moment, they look like they could turn out to be really cool one day.

2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library.

Last, a special mention to a great (but small) game, DEFENDER of the favicon. Mathieu 'p01' Henri squeezed a version of the old Defender game into the 16x16 space of the favicon. How sweet is that?

Demos

The canvas element is now supported in most browsers (that are not made by companies called Microsoft). That means we now have more options for creating dynamic graphics in the browser and people have not been shy to use it to show off their mad skills. Some have made small and simple demos showing the capabilities of the canvas, while others took it a step further, like Matt Westcott and his Antisocial demo, a social network satire in nice demo style complete with a demo making tool.

Others who have been busy this year include the talented Mathieu 'p01' Henri who, among other things, specializes in making really tiny things, including tiny pieces of code that do cool things, examples: Rubber effect, Tunnex, Mars. All in 256 bytes each, nice!

As if that's not enough, Mathieu Henri is also a regular over at the Ozone Asylum where he teamed up with the canvas element for the 20 lines contests to create visual goodies such as Dynamic Hypnoglow, Twinkle and Hypno Trip Down the Fractal Rug. These contest also gave birth to other great effects like colliding balls, some sort of 3D cube effect and dynamically generated BMP flames.

The Asylum inmates have even created small 20-line games, ranging from Lunar Lander to a Boulderdash clone and an impressive homage to Wolfenstein 3D

3D

At the moment, the canvas element only supports 2D graphics, although there are efforts to enable a hardware accelerated third dimension from both the Mozilla and Opera teams. That doesn't mean there's no 3D graphics being done, though. Everything from basic 3D cubes, texturing experiments to regular JavaScript/Canvas 3D engines have been done.

Also check out the stuff done by the guys over at the Wii Opera SDK (it's not just for Opera or the Wii) and of course the 3D stuff here at Nihilogic.

Emulation

That JavaScript performance is getting better and better must be true since it's now possible to emulate other systems in the browser. Matt Westcott (who also made the Antisocial demo) pulled another rabbit out of the hat, JSSpeccy the ZX Spectrum emulator. That's just way cool.

James Urquhart also played a bit and created a proof of concept SCUMM interpreter. It won't let you play Day of the Tentacle or even Maniac Mansion, but supposedly it can at least let you see a bit of OpenQuest.

A personal favorite of mine was António Afonso's JavaScript AGI interpreter. AGI was the system used by Sierra in the golden days of adventure gaming and when António made this little gem with an (almost) working Leisure Suit Larry, it just totally tickled my fancy.

Graphics

One of the most impressive feats this year must be John Resig's port of the Processing language to JavaScript, Processing.js, complete with a giga-ton of cool demos. In the same vein, Aza Raskin created Algorithm Ink, a JavaScript/Canvas port of the Context Free program, a method for creating images based on rules and instructions. And there's more! Eitan Suez liked Turtle, the old Pascal graphics programming tool, so much that he decided to make a JavaScript version of it, TurtleJS.

On a more mathematically nerdy note, a few people have also been tackling fractals using JavaScript. Once again, p01 decided to play and rendered the Mandelbrot set with 137 bytes of DHTML which, with a bit of friendly competition, ended up at a tiny 111 bytes (FF only). Oliver Hunt created a prettier, graphical Mandelbrot set (as did I), and Russ Hall even made a full-fledged fractal explorer application.

Audio

While waiting for proper support for the HTML5 audio element, most people have gotten used to settling for Flash-based audio but that doesn't mean you can't make weird experiments with sound and JavaScript. For example, check out the JS-909 drum machine by Cameron "The Man in Blue" Adams. Admittedly, it does rely on Quicktime, but cool nonetheless.

Or how about dynamically generating and playing WAV files, like this sine waveform generator by sk89q, and while we're at it, have some generated MIDI as well.

Odds and ends

Not just graphics and audio files can be generated, though. How about a small JavaScript library capable of generating ZIP files on the fly?

How much can you really do with CSS these days? Isn't it just for styling your text and placing your divs? Apparently not. Román Cortés has at least shown that an image of Homer Simpson can be created if your CSS-fu is strong enough.

Ernest Delgado mixed my Mario Kart demo with OpenStreetMap to create a nice little tech demo resembling the GPS navigation systems found in cars.

Finally, Cubescape is a cute, fun toy where you simply build a cubic landscape by dropping colored cubes. Great timewaster from The Man in Blue.

Of course, I've also been doing a bit of tinkering here at Nihilogic myself, so be sure to check the archive to see if there's anything you missed. I just hope 2009 will be as cool as 2008 was (and I don't see why that should not be the case!).

What do you think was great in 2008?

Edit: Chinese translation here

Alternative edge detection filter

2008-12-21T08:04:00.000-08:00

Oliver Hunt decided to share some edge detection code (uncreatively named edges2 by me). The result is different from the two existing actions in Pixastic and it is also a bit faster. Nice. Thanks Oliver!
Demo page

This is probably my last post before christmas, so happy holidays everyone!

More Pixastic actions

2008-12-18T11:42:00.000-08:00

A few new actions (Color Adjust, Mosaic, Pointillize and Solarize) are now available for the Pixastic library (if you didn't catch the first post about it, go here), bringing the total count to 25.

The new effects are as follows:

Color Adjust
This simply lets you add/subtract from each color channel (red, green and blue) of the image. Demo page.

Mosaic
Creates a pixellated effect. Demo page.

Pointillize
Paints the pictures with circular... points. Demo page.

Solarize
Creates a solarisation effect by inverting all colors that are above a certain treshold. Demo page.

All of these need image data access, so Firefox, Opera 9.5+ and WebKit nightly only. Got a few more coming in the not so distant future.