kelvinluck.com

a stroke of luck

Not my mother’s javascript!


Last week Google launched Chrome Experiments – a set of javascript experiments – to spread the word about their browser, Chrome. One of the major selling points of Chrome (can something free have selling points?) is V8 – it’s new and optimised javascript engine. I guess the idea is that by sponsoring a site of cool experimental stuff they can virally drive people to download and play with their product. And it worked on me! When some of the experiments ran a bit jerkily on my Firefox I decided to download it and give it a go.

Most of the javascript I write is fairly serious with a strong requirement for cross browser compatibility and graceful degradation, but the experiments inspired me. Having recently had some fun with tweetcoding (where you ignore every type of best practise to squeeze “something cool” out of 140 characters of actionscript 3) I felt like trying the same sort of thing with javascript.

For my first attempt I ported my first ever as3 experiment. Click on the image below to try “boingPic” which will split an image of your choice into 100 squares each of which is scared of the mouse (or view it in it’s own window if you want to boing larger images).

boingpic

Then I was reading an interview with Toxi about the creation of Social Collider (one of the chrome experiments). In it he mentioned Raphaël – a javascript library which uses the SVG W3C Recommendation and VML as a base for generating vector graphics.

I decided to check it out and found out that it’s a really great library which gave me the freedom to easily experiment with graphical stuff in javascript. I had loads of fun playing around with it – you can see some of my experiments below. They do appear to run best in Chrome so I’d recommend using that (looks like google’s ploy is working!) or at least Safari (FF doesn’t seem to render the width of paths but webkit does). [Thanks to Dmitri for pointing out the error in my code, it now works in FF too]

  • test3
  • test6
  • test7
  • test8
  • test12
  • test13
  • test17
  • test18
  • test19
  • test20

Most of my experiments were inspired by my previous tweetcoding entries. Feel free to view source on any of them to see how they are done – there is nothing at all complex going on. Big thanks to all of the chrome experiments for getting me to start playing with this and to Raphaël for the vector js goodness – I’m hoping to find more time to do some more complex experiments in the future!



Flash on the Beach and some Perlin Noise


Last week I went to the Flash on the Beach conference and as has been said by many people, it was amazing.

I decided to go for more of the inspirational rather than technical sessions and saw some absolutely amazing speakers including (in order of appearance): Hoss Gifford, Joshua Davis, Brendan Dawes, Craig Swann, Mario Klingemann, Robert Hodgin, Erik Natzke, Chris Allen, Dr Woohoo, Andre Michelle, Marcos Weskamp and Jared Tarbell. Wow!

And as well as all these amazing talks there was the opportunity to meet loads of friends – old and new – and to chat about geeky stuff. And then there was all of the booze and the parties… And a girl in a box!

Anyway, one particular example from Robert got me thinking and wanting to play… He mentioned the PerlinNoise function and talked about how it could be used to simulate flocking. And he showed a slide where a perlin noise image had been used to set the rotation of a set of arrows displayed on top of it. I wanted to play with this and had a little bit of time over the weekend so I managed to come up with this:

My perlin creatures

It’s really simple stuff – you can get the sourcecode and see the process that it evolved through here. The code isn’t beautiful or optimised as I was trying to concentrate on playing rather than doing it right (a concept which seemed to be a recurring theme of the conference).

And I wasn’t the only one who got interested by Robert’s mention of perlin noise. Seb Lee-Delisle posted on Sunday about 3D Perlin Noise in Flash – it looks like a really interesting way to take this further. I can’t wait to see what he comes up with and hopefully to find some more time to play with it myself :)