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

Loop Waveform Visualizer is a seemingly simple realtime audio analyzer built with Three.js and Chrome’s new Web Audio API. Drag an mp3 over and watch the 3D graphic equalizer style visualization liven up your browser window. It’s mesmerizing and quite performant.

The visuals are made up of 160 loops with their geometry and colour modified based on the audio data:

The current time slice is rendered in the center, then displaced outwards over time. The level determines the brightness, thickness and Z scale of the loops. The Z displacement gives a nice ‘bounce to the beat’ effect. The waveform shape is drawn into the loop which means you can almost ‘see’ the sound.

It probably goes without saying, but this experiment doesn’t work everywhere. You’ll need a current version of Chrome to play along. Felix notes that it’s especially pretty when using a track with a wide range of volume changes, so pick something especially dramatic and go try it out. And if you want to find out more, he’s provided a nicely detailed write up on his blog too.

Loop Waveform Visualizer by Felix Turner

We explored creative uses of ASCII art a few months ago and again more recently, but we haven’t yet covered its lesser known and even more geeky cousin until now: ANSI art.

ANSI art originates from the late ’80s and early ’90s, back when the internet was merely a collection of a few thousand computers and before the World Wide Web even existed. Back then, geeks – sorry! – people used Bulletin Board Systems to communicate, share information and download files. To do this you would need to dial a phone number to connect to another computer over a modem. Be thankful you don’t have to do that any more!

These modems were slooow. So slow that only text could be displayed. And typically in the early ’90s computer screens could only display a maximum of 16 colours at the same time. Born of this limitation was ANSI art. It was a way to display pictures, graphics and logos using nothing but text characters – technically the higher extended set of ASCII characters, which looked something like this:

Some characters were solid blocks, some half blocks, some shaded blocks, some parallel lines and some other weird shapes. To create an image from these characters you would need to type special key code combinations into MS-DOS Edit, or later, using a program called TheDraw.

Here’s a great little video exploring ANSI art in a modern context:

OK, enough with the history lesson! This brings me to Escapes.js made by Ori Livneh (@scatterblot). It’s simply a small JavaScript library for rendering ANSI art. The source code is available on GitHub.

It works by loading an external ANSI art file, generated via one of the editors mentioned above.

escapes('path/to/file.ans', function() {
    $(this).appendTo('body');
});

Escapes.js parses this file and converts the characters into their original old-skool MS-DOS equivalent font. The modern ASCII set isn’t quite the same, so this script redraws each character from a font map.

Once that’s done, it’s a simple case of drawing those characters into a <canvas> context one character block at a time, and colouring each block appropriately. The above code will add the canvas to the <body> element, but there’s also an option to create an image from the canvas element (using canvas.toDataURL) with this handy function:

this.toImageTag();

Have a look at the main file to see how it’s done, or simply go to the demo page and try out the super retro geeky examples!

Play with Escapes.js

Also: Guillermo Rauch pointed out another cool ANSI formatting tool for Node.js. Check it out too!

Evan Wallace is a very clever chap. He brought us the WebGL water experiment, and he’s done several other high-quality experiments that are among the best I’ve seen. He particularly excels at demos that do the heavy lifting with shaders, and here’s the latest : a GPU Lightmap! The gist of the demo is that he makes a load of 3D planes and creates realistic soft shadows based on the positions and orientations of the planes.

To achieve the effect a virtual light is shone at each plane – if the light hits the plane it’s (perhaps obviously!) lit, if the light hits something else first then the plane is in shadow. This information is used to lighten or darken every plane’s material as needed.

The light is passed over the planes several times, from a different direction each time. The shadow map information from each pass is averaged with the previous passes. The quality improves over time as more information is picked up. The net effect of this is that you get lovely soft shadows.

Whether or not you love getting your head into these kind of heavier-duty graphics techniques I’m pretty sure you’ll enjoy the final effect.

The demo is one of several from his LightGL library, which is designed to provide extra capabilities to the WebGL API to make it more like its older sibling, OpenGL. If you like getting your hands dirty with raw or near-raw WebGL it’s well worth a look.

GPU Lightmap by Evan Wallace

Everyone’s favorite byte-crunching extravaganza is back! This is the fourth installment of the js1k challenge and this time around the theme is love.

For those of you who are unfamiliar with js1k; it’s a competition that was first started in 2010 by Peter van der Zee (@kuvos) that challenges web developers to write an impressive JavaScript demo in 1024 bytes or less. Participants are not allowed to make use of any externals but the demo page template provides you with access to a canvas element.

Enforcing limits can really cultivate creativity. Other similar competitions have already proven this and over the past two years, so has js1k. Below are the incredible winning demos for each previous round of the competition.

2010

Legend Of The Bouncing Beholder by @marijnjh

2010: Xmas

Christmas Tree by @romancortes

2011: Oregon Trail

FlexiDR↻ID by @keenblaze

This competition just began and entries will remain open till March 14.

http://js1k.com/2012-love/

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

Seriously.js is seriously cool (heh) client-side realtime compositor for video and images by Brian Chirls.

The demo video, courtesy of Ok Go, provides a fun showcase of its abilities (gotta love the nightvision/Modern Warfare effect!) and demonstrates the realtime transitions made possible by a node-based compositing approach.

Having not played with this kind of library before, I was pleasantly surprised how quick and easy it is to pull something together. As usual, the demo source is worth a poke around

The tutorial is easy to follow and will give a good starting point for your own experiments. You can pick up the source on Github.

Seriously.js by Brian Chirls

How it’s all done

At the core of it, the effect is created by manipulating DOM elements to have their size, position, or other properties change in relation to the scroll position of the page. You don’t even have to do it all yourself, there’s at least one handy jQuery plug-in and plenty of tutorials available to help you out.

But before you’re off to the races, we need to talk.

The good

Let’s start on a positive note. Yes, there are some good ones out there. Really! The trick seems to be having good style and taste. (How’s that for easier said than done?) Sites like The Slavery Footprint and Dangers of Fracking keep the effects to a minimum and combine them with a playful illustration.

The Slavery Footprint steps it up just a bit by adding in some easing. But they still pull it off with style and use the effect to keep things interesting, not annoying.

The same goes for this little demo, Parallax error beheads you, by Andrew Ohlmann. Just enough there to make it fun and interesting.

The bad and the ugly

Unfortunately, things can get bad. Very very bad. Taken to the extreme this effect does more than just get in the way. It make sites nearly un-useable and gives you a nice dose of motion sickness or the internet version of roadrage.

Some of the worst offenders include the Art of Flight site and beetle.de. Art of flight not only hijacks your scroll bar, it tosses common convention aside and takes you in all directions with what seems to be a complete lack of consistency or rules. Oh, and just try and get to any of the content besides the video. It’s pretty much impossible.

Beetle.de might have seemed cute at first, but it’s biggest offense is a drastic overuse of the effect and sluggish speed. It’s second biggest offense is awkward jerky easing. Actually, that’s a pretty common offense of these types of sites. Nothing ruins a site like huge images slowly jerking or skipping into place.

So, if you’re going to do it

I’ve just spend the last few paragraphs complaining about it, but, trust me, I’m happy when I see it done well! Just remember, a little goes a long way. The best examples use the effect sparingly and in a way that’s fitting for their content and concept.

Restraint and style can help with performance too. Shorter, less dramatic easing tends to work best in these situations. Overdoing it just makes things feel broken and sluggish.

Also, remember that scrolling is a basic browser behaviour. The best of these sites stick close to the “scrolling down means moving downward” metaphor that’s been ingrained in us all. Mess with this too much and people will be paying more attention to how mad you’ve made them than to any experience you’ve tried to create!

Here’s a little video to show how easy it can be to get started with CreativeJS.

There’s also an extended 3 day version of the original CreativeJS workshops in Brighton, and a 2 day in Amsterdam.

For booking and information go to the CreativeJS workshops page, tickets on sale tomorrow at 12 midday. They usually sell out quick so don’t hang around if you’d like to come!

[UPDATE] Brighton and Amsterdam courses sold out within a couple of days. Still space on the non-coders course.

Legendary Swede OutsideOfSociety is back again, and this time he’s armed with just over 20,000 morphing particles. The idea is simple: morph from one particle-based shape to another. The end effect, however, is mesmerising, which just confirms that particles are always a winner. You simply can’t go wrong. Well you probably can, but you have to really try.

What’s interesting about this approach is that it uses JavaScript for the shape morphing; each particle is passed an updated position by JavaScript on every frame. But there is an interesting alternative approach to this: the tweening equations could be implemented on the GPU as part of the shader. From there the JavaScript’s involvement would be to pass a tween value between 0 and 1 to the vertex shader which would then be responsible for updating the position of the vertices accordingly. While the latter approach is more complex it could significantly improve performance since the GPU is now handling virtually everything to do with the particle motion.

That said, it’s a testament to Three.js (which is used for the rendering), JavaScript and of course OutsideOfSociety that 20,000 particles can be moved around the screen at 60 frames per second. Welcome to the future, I love it.

OutsideOfSociety actually sent this update:

There are 85k particles, 65k are the model and 20k are the extra ones spread out within a sphere.

So actually there are a ton more particles than I’d noticed in the source code, which only goes to show how impressive the work here is! Also the easing is done in JavaScript, but the actual particle positions are updated in the vertex shader rather than in the JS. Couple of corrections there, folks!

Morphing Particles by OutsideOfSociety [via @oosmoxiecode]