Parallax.js is a robust little parallax engine, giving you a quick, simple api to get going with all your parallax needs. Forget scrolling though, parallax.js utilizes your devices orientation and will fall back to cursor positions if no motion detection is available… this really gives you that sexy responsive feel.

Apart from being open source, the project also has a beautifully designed demo page, really showing off the libraries full potential (be sure to check it out on mobile, or iPad!)

Parallax.js by Matt Wagerfield (@mwagerfield) and Claudio Guglieri (@claudioguglieri)

Hyperlapse is a visually distincive tool made by the tinkerers at Teehan+Lax. It provides a way to automatically generate short hyperlapse movies, the likes of which have been popping up on Vimeo for a while now. The Hyperlapse.js library is available on GitHub and makes use of a few clever libraries. A large chunk of the code is devoted to making the web experience a more interactive one and not simply the generation of the clips.

How does it work?

Start with a coordinate – a latitude-longitude pair. That’s the starting point. Now we pick another spot nearby and use that as our ending point. Finally we pick the thing we want to focus on. This public version of Hyperlapse limits the number of frames to 60 so that the points aren’t that distant and the calculation doesn’t take too long.

The next step is to use Google Maps’ public Routing API to get the route between our starting point and our ending point. As long as the two points aren’t too far apart, it’s most likely the same route the Google StreetView car took when it was capturing photos of the area. This stage is done so that we follow the road and don’t try a straight-line path. For a maximum of 60 intervals between our start and end point, find the coordinate on the route and grab the StreetView data for it.

To grab the image data, Hyperlapse.js uses GSVPano.js stitch together panoramas from Google’s StreetView data. You pass it a coordinate ([48.858927,2.293307], for instance) and it returns the data for a single image made up of the many tiled images that go into a StreetView scene. If this were just for generating the final movies seen, it would be enough to grab a single segment of the StreetView panorama rather than the entire 360° bubble.

Now we have 60 panorama images – time to bring in Three.js. This step essentially recreates simplified StreetView functionality in that it generates a simple 3D sphere and textures the inside with a panoramic image. All the while, it keeps the bubbles in linear order so you can move from one to the next and get the same sense of the physical place. The extra bit added here, though, is that each of the individual bubbles snaps to looking at a certain point – the thing we want to focus on that we chose earlier.

Passing the tricky work back to the Google libraries, it then uses the Google Maps spherical geometry library to calculate the heading from our current position to the focus point. Put that back into the 3D bubble and each individual step along our route will focus on the same thing – the essence of a hyperlapse video.

As mentioned before, if you were to use this simply to create hyperlapse videos, the Three.js and GSVPano.js bits could be removed. It will be interesting to see if this tool brings that in later or if it will remain as an interesting web exploration.

• Create your own Hyperlapse
• Get the code from GitHub
• One we made earlier

Halloween seems like a good time to add a few more zombies to your day and ‘They will eat you!‘ is up to the task! The goal of the game, as you might have guessed, is to run away from the zombies before they eat you. The rules are simple enough but don’t skip the Zombie Education section or you’ll be missing half the fun. Don’t let them eat you!!

They Will Eat You!
From B-reel

This is a guest post by Philipp Sackl.

The push.generator is a piece of software that allows you to create graphics from words. It is at the heart of push.conference’s corporate design and you can play with it here. This article will show you why and how we made it and explains some of the decisions made in the process.

Note: You can follow along with the code of this project on GitHub.

When you’re organizing a conference that centers around the common ground of interface designers, creative coders and visual artists, the job of creating a corporate design doesn’t exactly get easier. It shouldn’t be just a bunch of fancy graphics, but an embodiment of the philosophy that all those fields share common ground and can do great things together. That’s why a generative corporate design was the perfect way to go.

The Concept
The decision for using text/letters as a data source for the generator came easy. It is extremely practical, versatile and there is a wide range of possible applications. It covers everything from name badges to Twitter visualizations.

So while the input was clear, the output of the generator wasn’t. While we tinkered with triangular shapes in the past, we decided that it was time for something different. So what if we could come up with a generative graphic, where new data doesn’t mean more objects but where every data point is actually just a transformation on one object? Together with the fact that our conference was called »push«, this thought led to the first prototype of a grid of squares where one row after another would be pushed out, increasing the complexity. It looked like the right way to go.

The generator on the web.

Technology and Development
We wanted the generator to be on the web, so it was clear that web technologies would be the way to go. In the end, we went with Three.js (because everyone likes 3D!) and CoffeeScript (because it makes it a little less likely that our code descends into an unholy mess). The generator also makes heavy use of underscore.js, simply because there are lots of arrays in the code that need to be iterated over. Why use a library just for iteration? Well, simply because _.each is a lot faster than CoffeeScripts comprehensions. This might not play such a big role in classic front end JavaScript, but it makes all the difference for code that renders 60 times a second.

_.each collection, ( item ) -> item.doSomething()
is faster than
item.doSomething() for item in collection

Key parts of the generator are the mapping of characters according to their frequency in the german alphabet (we use a simple table for that) and the layout and animation of cubes in three dimensions.

Another beast we had to tame was the successive animation of cubes without collisions. To do that, we came up with a set of transition classes that allowed us to group and trigger animations. There are three classes: Transition takes an object and a property and interpolates it over time, TransitionGroup makes sure that a set of transitions is always executed at the same time and lastly the TransitionManager that centrally triggers all animations.

You can see and download all of the code on Github, so feel free to explore and play around! And if you’d like to see more projects like this and more applications of the generator, we’d love to welcome you at push.conference!

Last weekend, if you were interested in JS, Berlin was the place to be. The week started with RejectJS on Thursday and continued at Saturday and Sunday’s JSConf EU. For pure creative JS fuel, though, Friday’s Nodecopter hackathon was the pinnacle.

Organised by Felix Geisendörfer, Robin Mehner and the rest of the BerlinJS crew, this was somewhere between a Hackathon and a glimpse into a future where robots take over.

Node AR Drone

A few months ago, Felix, former NodeJS core member, published a library that allowed you to control a Parrot AR Drone 2.0 via a node server. Friday’s event was a chance to explore what kind of things that could lead to.

The drone is a flying, remote controlled machine with 4 propellers, 2 cameras (one down, one forwards) and a heap of clever electronics that automatically look after most of the tricky bits (staying level, not crashing into walls) leaving you the fun stuff.

The Event

The hackathon started at 10am in the Stadtbad Oderberger Straße – a large, empty, indoor swimming pool – and continued until about 7.30pm. The whole day had a true hackathon vibe as the library is quite new and doesn’t provide all the functionality available causing many JS devs to dig through the drone’s tech specs and calculate bitmasks and UDP control codes. Simultaneously, there were quite a few people trying hardware mods such as wiring a Wii nunchuck through an Arduino controlled via Johnny 5 (a JS framework) so that you could fly the drone with just your thumb. Chris Williams (founder of JSConf US), Matt Podwysocki and Fredrik Lassen took a similar approach to wire a Nintendo gamepad to control their drone.

There were quite a few attempts at image recognition, either by piping the video stream to OpenCV or (in the case of the overall winner), directly in JS. The most memorable example was James Halliday and Dominic Tarr‘s drone which was programmed to identify objects with large amounts of red and charge at them. It was memorable mostly for the image of Jed Schmidt adopting the traditional Matador stance in a bull-drone vs man stand-off.

Gaming was a popular theme with more than one team turning their drone, avatar-like into a first person shooter-style game. A less traditional gaming route was explored by Max Ogden, Brian Leroux and Matthew Smillie in their demo which turned the drone into a multiplayer game. One player had rotation control using their phone compass, one could make it go forwards by shouting “Brrrrrrumm” into their phone and one could give voice commands like “take off” and “flip” into their phone. At earlier points in the day, this did threaten to decapitate some of the other participants but, considering the amount of flying hardware, the injury count for the day was surprisingly low. The Nokia Maps team (of which I was a member) used their drone to automatically generate 360° panoramas.

Mid-way through the day, the big boys came around to play. There was a demonstration of the Octocopter – a professional-level drone, capable of carrying around 5kg of camera equipment. As one participant said “the Octocopter sounds like I think the robot apocalypse would sound.”

Here’s a video of the Octocopter in action.

The opportunities for advancing web technologies like JS beyond the web are endless. In the short-term, though, you may want to consider wearing a hard-hat while coding.

Ever wonder what your name looks like in 3D hot pink and white cubes? It’s probably not something that keeps you up at night, but now that I’ve mentioned it you’re at least a bit curious

Built with Three.js and Coffee Script by Envis Precisely, the generator creates a unique avatar based on the letters of your name. It starts with a 3×3 cube whose rows are displaced for each letter you type. Your personal cube arrangement is determined by each letter’s frequency of use in German and the order of the letters.

Check out what we got for creativeJS or try your name for a little extra fun:
push.conference generator
By Envis Precisely

Have you ever wondered how many new connections you made at a conference? If you attended Eyeo 2012, you might be able to find out exactly how many with this visualization from Jeff Johnston.

This paper.js based visualization uses Twitter and Lanyrd to map out and compare attendee’s twitter followers before and after the conference. It’s a deceptively simple and attractive way to show a whole lot of information about the attendees and their followers related to the event. If you were at Eyeo, find yourself on the map and see how your connections changed. It’s still worth checking out even if you weren’t. The data might surprise you.

Twitter connections before and after Eyeo 2012
by Jeff Johnston

SnappyTree is a WebGL-based procedural tree generation app by Paul Brunt, of GLGE fame.

It offers a bunch of neat presets, along with 20+ parameters that affect the trees ‘growth’ and texture. Your resulting tree can be output to JSON (for use with proctree.js), or the Collada / Wavefront formats, for native use.

If you’re interested in learning more about procedural object generation, this Wikipedia article on Lindenmayer systems may be of interest

SnappyTree
Mozilla DemoStudio detail page
proctree.js

Buckle up your seatbelts, the nostalgia train is leaving the station! Everyones favourite judgmental “Office Assistant” Clippy is back!

Smores, Clippy.js brings Microsoft’s clippy to the browser, with a complete set of animations and sounds, you can be pleasantly helping your users in no time. The inspiration behind this project is so flawless you’ll be wondering why he hasn’t been revived before.

Our research shows that people love two things: failed Microsoft technologies and obscure Javascript libraries. Naturally, we decided to combine the two.

Just like in Office, Clippy isn’t the only obnoxious friend you can choose from, there’s also Merlin the wizard, Rover the dog and Links the cat.

Animations are achieved by quickly alternating the background image position on a large sprite sheet, whilst sound is achieved via the use of the html5 ‘Audio’ tag.

Clippy.js by smore (@SmorePages)

Manny provides a nice write up on the process as well as links to the various iterations of the experiment on his blog. So, it’s not just a fun experiment to play with, it’s also a nice peek into the process of getting there. And who doesn’t love a good process story?