Nihilogic

New round of JS1K: Love

2012-02-03T04:00:00.000-08:00

There's a new round of JS1K going on! This time the theme is "Love" and there are some pretty sweet prizes. My publisher has also agreed to sponsor 5 copies of my HTML5 Games book for the top five entries.

I hope I can find some time to work on something for the compo.

Book link correction

2011-12-27T14:23:00.000-08:00

It appears that the link mentioned in the book is incorrect. I've contacted my publisher to get this fixed but until then, you can download the project and sample files at: http://wiley.com/go/html5games.

If you have bought the book and like it, please consider leaving a (hopefully positive!) review on Amazon. Thanks!

My HTML5 Games book is now available

2011-12-21T02:25:00.000-08:00

Just a quick post to say that my book HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL is now available on Amazon.com.

So far, it's only in stock on the US site but you can of course still pre-order it through the other Amazons.

Happy holidays!

Amazon links

And if you buy it and like it, please consider leaving a review on Amazon!

Stop American Censorship

2011-12-17T02:12:00.000-08:00

My book: HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

2011-09-29T16:43:00.000-07:00

I just finished writing a book! How cool is that?

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL
ISBN: 978-1-1199-7508-3
Paperback, ~416 pages
Due out in January 2012

Writing a book is crazy. Like eating strawberries while stabbing yourself in the leg. Painful yet delicious. I have massive respect for people who can just put words on paper like it was nothing.

This has easily been one of the most difficult tasks I've put myself in front of, which I suppose is why I haven't been doing much around here lately. That should hopefully change now that I get some free time again. Anyway, for the past 6 months or so, I've been working on my first book, titled HTML5 Games - Creating Fun with HTML5, CSS3 and WebGL. It's all about HTML5 and related technologies and how they can be utilized in the context of game development on the Web and on mobile devices. It's not out yet but it should be in a few months (edit: it is now out!). Amazon links further down.

Here's a short blurp about it, made by Wiley (my publisher):

Discover new opportunities for building 2D and 3D games with HTML5

The newest iteration of HTML, HTML5 can be used with JavaScript, CSS3, and WebGL to create beautiful, unique, engaging games that can be played on the web or mobile devices like the iPad or Android phones. Gone are the days where games were only possible with plugin technologies such as Flash and this cutting-edge book shows you how to utilize the latest open web technologies to create a game from scratch using Canvas, HTML5 Audio, WebGL, and WebSockets. You'll discover how to build a framework on which you will create your HTML5 game. Then each successive chapter covers a new aspect of the game, including user input, sound, multiplayer functionality, 2D and 3D graphics, and more.
Aims directly at a new way to develop games for the web through the use of HTML5
Demonstrates how to make iOS and Android web apps
Explains how to capture player input; create 3D graphics; and incorporate textures, lighting, and sound
Guides you through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL, and WebSockets
By the end of this invaluable book, you will have created a fully functional game that can be played in any compatible browser or on any mobile device that supports HTML5>

If you'd like to buy it, consider using the Amazon affiliate links below, so I can earn a few extra coins.

WebGL Music Visualizer

2011-03-24T04:33:00.000-07:00

I'm not going to comment on the number of months since my last post here. I know I'm a slacker.

For most of December and some of January, I was travelling in East Africa. It's been about 5 years since I last visited there and it was fantastic to be back. Yay for sunburns and lions. Anyway, just before I left, I finished a neat little WebGL project that I never got around to posting here.

Google asked me to do a demo for when WebGL moved from Chrome dev channel to beta. The project I did was a music visualizer - yes, I'm that predictable. It's more like a visualizer building tool, actually, with a few pre-made visualizers. Well, WebGL landed in the beta channel on December 16th, the day after I left. Fortunately, I didn't have to do any remote debugging.

Have a look-see: WebGL Music Visualizer

To get started, click "Load preset", pick a visualizer and start the music. Elements in the scene can be modified by double clicking in the object list. Most parameters can take both constant values and expressions using math functions and/or pre-defined variables (time, beat, bass, mid, etc..).

What's also cool is that the visualizer was used at a Google-hosted party at the Game Developers Conference. I just had to modify it a bit to allow music input from the DJ's setup. Sadly, I wasn't there myself but I believe everything worked out great. I like to close my eyes and imagine that the Android was my representative there, so I was almost (almost!) at GDC.

Here are a few pics from the event:

Sweet!

WebGL and HTML5 audio fixes

2010-09-23T01:09:00.000-07:00

A couple of updates and fixes to some of my earlier WebGL and HTML5 audio experiments which have stopped working since I first put them online.

First up is the musical solar system which went and got horribly broken due to changes in the WebGL spec. I published it when the WebGL implementations were still very much evolving and changes were happening almost faster than you adapt to them.Now with the spec having reached a more mature level, things have slowed down and the implementations are almost in agreement so browser-specific workarounds aren't so necessary. So anyway, after a few tweaks here and there, the planets should once again be dancing. Check it out.

Next up, Worlds of WebGL which had suffered pretty much the same fate. I'd already updated it once to accommodate some of the spec changes and now it should be fully working again.

However... In both WebGL projects, I had to reintroduce some code I had previously taken out because it was causing problems for some Mac users (iirc). So if you experience any problems with either experiment, please let me know. In particular, the affected parts would be the sun in the solar system and all the particles/planets in Worlds of WebGL.

Finally, my HTML5 audio project Pocket Full of HTML5 had lost its support of the new HTML5 audio data api, so it used the SoundManager2 fallback even when using a audio-data-enabled Firefox build. Again, the problem was due to changes in the API, which is still very early in its development, but fortunately the necessary changes were few and simple and Yury Delendik even provided me with a patch (thanks Yuri!). So check that out too.

Planet #1024 - my JS1K entry

2010-09-11T02:10:00.000-07:00

So, the JS1K contest is closed for submissions. The goal was to create something cool in just 1024 bytes (or less) and there have been lots and lots of entries, some of them pretty damn cool. I just had time to submit something before the deadline - a planet generator featuring random zooming, rotating planets, complete with cloud system, shading, atmospheric glow and a star filled background. Check it out here.

Should work in current versions of Firefox, Opera, Chrome and Safari.

My 10K Apart entry: Filterrific

2010-08-21T23:57:00.000-07:00

My entry for the 10K Apart contest is now up. It's a small image manipulation app showing some of the same functionality available in my Pixastic library, but this time squeezed into a 10K web app. Check it out and be sure to vote! Cheers.

3D chess developments

2010-07-26T23:35:00.000-07:00

A long time ago I started working on a 3D chess game using canvas but never got around to finishing it. Well, Stefano Gioffré took it upon himself to add some very cool features and not least, integrate a chess engine allowing you to play against the computer. Awesome work, Stefano.

Check it out here: http://htmlchess.sourceforge.net/demo/example.html

HTML5 audio visualizations

2010-04-15T13:24:00.000-07:00

For a while now I've been playing around with music visualization, you can see some of my previous endeavours here. The canvas element gives us everything we need to draw all sorts of cool stuff in the browser but the audio part still needs Flash to be any fun. While the new HTML5 audio element does allow for audio playback, it doesn't give us much in terms of audio data information - which is crucial if the visualizations are to react to the music. In another experiment of mine I tried to solve it by doing a pre-analysis of the MP3 file and saving the data as JavaScript. The result was decent, I think, but having to pre-bake the data is a pretty severe limitation.

However, a few people have been hacking away at Firefox, attempting to provide just that functionality for the audio element. Some documentation of the new API is available here and if you're interested, you can follow the development in this bugzilla thread.

Anyway, I've been wanting to mess around with this and I figured that retro-fitting my "Pocket Full of Canvas" experiment to use HTML5 audio would be a fairly easy task. You can check out the result here.

At the moment you'll need a patched version of Firefox to get access to these extras but if you're not comfortable with building your own version, there are builds available here. It will still run in other (canvas-enabled) browsers but it will fall back to using SoundManager2 for the audio. While Flash audio is not that exciting anymore, it lets it run in eg. Chromium and Opera - and man, that's something else. Even if Firefox/Minefield has the upper hand with the audio stuff, it is feeling reaaally sluggish compared to those two (and you should definitely be using a nightly Minefield build). Chromium has always been speedy and Opera has gotten really crazy fast as well, running the visualizations in full-screen is just great (click the viz area to toggle).

And if you feel like playing around with the demos yourself, just click the "Show code" button and start hacking. I made a quick write-up of the very simple API here. The emphasis has been on making it easy to get from zero to something and not so much on making a lot of fancy functionality, so it is not very advanced.

Try it out: http://www.nihilogic.dk/labs/pocket_full_of_html5/

More examples:

Worlds of WebGL video

2010-04-10T05:07:00.000-07:00

In case anyone has trouble watching the Worlds of WebGL demo I posted recently, I just saw that Delan Azabani made a video of it and put it up on his site. I know the demo is currently broken in at least Chromium, due to recent changes there. I'll get that fixed as soon as possible. Check out the video here until then.

Edit: Ok, the demo should work again in both Minefield and the latest Chromium build.

Worlds of WebGL

2010-03-18T14:19:00.000-07:00

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

Link: Worlds of WebGL

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

WebGL Cheat Sheet update

2010-02-16T06:33:00.000-08:00

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

Links

WebGL Cheat Sheet (PDF)

WebGL Cheat Sheet (HTML)

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.