The Dancing Scrollbars!
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. Read more...
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. Read more...
A few Pixastic updates
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
After processing an image, the options object now holds the resulting canvas in a property called
The options object can now also take a boolean
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. Read 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. Read more...
JavaScript + Canvas + SM2 + MilkDrop = JuicyDrop
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:
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..
Read more...
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
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..
Read more...
Chrome Experiments and DOMTris
"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! Read more...
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! Read more...
Creating pseudo-3D games... part 2
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. Read more...
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. Read more...
Music visualization with Canvas and SoundManager2
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
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
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
Another puzzling issue I came across: I get a security error from Flash's
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
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). Read more...
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.
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). Read more...
FsckVPS review
WARNING: I no longer recommend this host in any way whatsoever. I no longer host my sites at FsckVPS. While their product was more or less what was advertised on the tin, the support turned out to be shit and the guy in charge a common crook. In particular, the kind of crook who shuts down affiliate programs without settling the accounts. You owe me money, man. :-(
I am now a happy customer of KnownHost and have had nothing but good experiences with them. 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.
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.
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.
Read more...
I am now a happy customer of KnownHost and have had nothing but good experiences with them. 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.
Read more...
Games round-up for February 2009
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
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! Read more...
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.
ProtoRPGNot 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 BattleA fun little diversion in this Final Fantasy inspired battle game.
JS BombermanA nice Bomberman-like game by Gabriel Munteanu.
CanvexI really wish Philip Taylor would do something more with this since it's just awesome cool. Raycasting for fun and profit.
Digg AttackOne 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 TroubleThe second XWUZ game is a SameGame-like puzzle game.
ClixAnother puzzle game like Bubble Trouble.
Invaders from MarsSpace Invaders meets Galaxians in this great looking game from Mark Wilcox.
RedlineFun little side-scrolling racing game.
Z-WarOdds are against you as zombies try to eat your brains in this shooter.
World of SolitaireThis is a really impressive collection of online solitaire games.
Canvas Breakout TutorialA 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! Read more...
