DOM – CreativeJS http://creativejs.com The very best of creative JavaScript and HTML5 Wed, 03 Jun 2015 20:19:39 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.1 GIF Dance Party – yes, really! http://creativejs.com/2013/08/gif-dance-party-yes-really/ Fri, 16 Aug 2013 17:15:39 +0000 http://creativejs.com/?p=5782 Continue reading ]]>

Thought you’d seen it all, huh?

Join Scumbag Brian, The Wizard and Smooch in celebration of the fact that as long as we have the Internet we’ll have nonsense to amuse us!

Place, scale & depth-sort any combo of 17 familiar characters then sit back and relax while they Twist the night away. “No Shorts” + “We Got You” is particularly entertaining :)

GIF DANCE PARTY by Fuzzy Wobble

]]>
Survivor – a C64 remake http://creativejs.com/2012/03/survivor-a-c64-remake/ http://creativejs.com/2012/03/survivor-a-c64-remake/#comments Tue, 27 Mar 2012 12:00:53 +0000 http://creativejs.com/?p=3537 Continue reading ]]>
It’s 1983. It’s very late. You’ve got school tomorrow but you’re damned if you’ll accede to ridiculous demands for sleep with such an epic score hanging in the balance…

Survivor was one of those games that frequently led to suspension of my Commodore 64 privileges. No save games and a solitary level that got tougher the more you conquered it!

Scott Shiller has done us proud with this superb remake of the ’80s classic, complete with faux-C64 loading screen. He’s pulled together a ton of DOM elements, CSS and SoundManager2 (a cross-browser audio library) to produce a truly enjoyable retro feel.

There’s an interesting development diary that details his original game analysis and design decisions, and a flickr set. I’d love to see more people detail their projects in this way.

Anyways, must dash. I’ve a high score to beat!

Survivor – C64 remake
Write-up/dev diary
Flickr set

]]>
http://creativejs.com/2012/03/survivor-a-c64-remake/feed/ 1
Analog or digital http://creativejs.com/2012/02/analog-or-digital/ Wed, 22 Feb 2012 09:00:11 +0000 http://creativejs.com/?p=3011 Continue reading ]]>

You may have noticed that we’re fond of a bit of retro, so it was hard to resist this pixelated music video from Wildlife Control… from their blog:

We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool. At the time, we were thinking it would be a quick little animated ASCII thing. After digging in a little more, we decided to go way bigger.

Each jumbo pixel in the grid is a plain old <div> with a coloured background, while scenes are broken down into reusable sprites to keep things snappy.

Cute 8-bit dinosaurs, robots & zombie dogs all make an appearance, with SoundCloud comments embedded at the correct time-index – a nice touch.

I strongly suspect there’s some nice tooling behind this, if the large arrays of data in the source are anything to go by. Perhaps they’ll let us know!

The song isn’t half bad, either :)

Analog or digital – Wildlife control

]]>
Fluid ascii animation http://creativejs.com/2012/02/fluid-ascii-animation/ http://creativejs.com/2012/02/fluid-ascii-animation/#comments Fri, 10 Feb 2012 13:24:56 +0000 http://creativejs.com/?p=2891 Continue reading ]]>

We’ve already featured posts on fluid dynamics and ascii animation but here’s a very pleasing demo that combines the two. Nick Kwiatek, a web designer and developer in New York took Oliver Hunt‘s excellent JS fluid solver and rendered it in ascii.

We recommend switching on hacker mode. Let’s face it, everything looks better in green on black.

Nick Kwiatek‘s JS ascii fluid

]]>
http://creativejs.com/2012/02/fluid-ascii-animation/feed/ 1
Google gets frosty http://creativejs.com/2011/12/google-let-it-snow/ http://creativejs.com/2011/12/google-let-it-snow/#comments Fri, 23 Dec 2011 11:00:00 +0000 http://creativejs.com/?p=1961 Continue reading ]]>

Google recently snuck in another fun Easter Christmas egg; a festive snow effect, with a steamy twist!

Searching for let it snow adds snow-fall to the results page, no-doubt to distract you while your browser window subtly mists up.

Delightfully, you can then draw in the steam.. or in my case, scrawl swear words.

Oh, and defrost button is sensibly provided, should you decide that you really ought to do some work today.

Google “let it snow”

]]>
http://creativejs.com/2011/12/google-let-it-snow/feed/ 2
Animated characters http://creativejs.com/2011/08/animated-characters/ http://creativejs.com/2011/08/animated-characters/#comments Tue, 30 Aug 2011 20:41:01 +0000 http://creativejs.com/?p=1391 Continue reading ]]>

ASCII art is cool. Ask anyone. Even Google pay homage when you search for ascii art.

Still, you know what’s cooler? Computer generated ASCII animations of course!

“Morph”, by the rather talented Skylined is a great example of just what can be achieved with a mere 94 printable characters, and a <pre> tag.  The static/distortion effects are surprisingly effective.

If you liked that, his Mandelbrot and Julia fractal roto-zoomers are well worth a look.

More, you say?  How about some real-time ASCII raytracing?! As someone who grew up in an 8-bit world, it’s fantastic to see that this art-form is far from dead. Viva la ASCII!

]]>
http://creativejs.com/2011/08/animated-characters/feed/ 2
Rorschmap: Making new things with maps http://creativejs.com/2011/07/rorschmap/ http://creativejs.com/2011/07/rorschmap/#comments Fri, 29 Jul 2011 17:00:58 +0000 http://creativejs.com/?p=607 Continue reading ]]>

Rorschmap, by James Bridle, gives you a kaleidoscope view of google maps. Look at your hometown in a whole new way! (And use the handy “Where am I?” link to know for sure that you are in your hometown, because you probably won’t recognize it.)

Rorschmap is cartographic navel-gazing, a reframing of the map. It will not help you find anything.

Check out the full story behind the project on James’ site.

]]>
http://creativejs.com/2011/07/rorschmap/feed/ 1