To register your interest head on over to the training page, or to hear about workshops in the future sign up to our mailing list.

It’s the one thing every fancy parallax scrolling sites has been missing: fart sounds. And it’s not just for parallax sites, fartscroll.js can be added to any site that needs a little more, um, gas.

The Onion released the hilarious fartscroll last week on github as part of their efforts to find a new frontend developer. I had no idea The Onion was even on github but I hope they continue with other joke releases in the future.

Regardless of how grownup you think you are, this one will still at least get a smile out of you. It’s even available as a browser extension, a wordpress plugin and more. So many options for staging your own fart jokes!

Fartscroll.js by The Onion

Last year at the State of the Browser conference in London, in an arbitrary but fun test, I pitted the browsers against each other to see which could render the most 3D particles.

This year, to change it up a bit, I live coded a space invaders type game, complete with particle explosions, and invited the browser reps to compete in a short tournament.

The code was from the new CreativeJS games workshop, so it’s pretty simple to understand. You can get the source code on my github, and watch the video for a full (if slightly rushed) explanation.

Play the game (1-5 to change the browser type, s to restart the game)
Watch the video
Get the source code
Come to a CreativeJS Games workshop

Depending on what mood you’re in, this exquisitely designed demo from White Vinyl Design will either make you ponder the insignificance of daily life or marvel at the vastness of existence. Or simply smile at the rather nice tweening functions in the animation.

Here is Today

Those of you who listen to the Lost Decade Games podcast (and if you don’t, do so!) will know what a long, and somewhat painful gestation period Lava Blade has had. Thankfully they didn’t give up and it has finally been released. You can buy a Windows, Mac OS X or Chome Web Store version and there’s a free demo to play on the web site as well.

Lava Blade bills itself as a ‘tactical strategy RPG’. Think early Final Fantasy, with overworld maps to explore and lots of monsters to battle. The battles are the main focus of the game and are fully turn-based. You cycle through your party members, taking advantage of their skills and weapons, giving them movement and attack orders, to dispatch the variety of baddies you encounter. Winning battles rewards you with gold to spend in the shops, where you can buy ever more powerful weapons.

Different party members have different skills. For example quite early on in the game you gain a member who can heal you during the battles, which is vital beyond the first few almost tutorial-like encounters. You can also heal-up at camps during adventuring.

Graphically it’s simple but clear. There are three environments to explore and plenty of monsters to fight. All of the characters use their in-house bones system, so they animate nicely without being full of sprite sheets. This allows them to put new weapons into the sprites hands for example, and it’s always fun to see them visually level up. The only minor point I have is that the map feels very confined – there’s no “world” to explore as such, and progress is very linear as a result. There’s also no real story, or at least not one you would feel guilty about skipping. As is usual for Lost Decade the soundtrack is provided by Joshua Morse, which is suitably 90s JRPG in tone and available on Bandcamp.

I’ve no idea how well the game will sell for them. It’s priced keenly enough and you’d get a good solid amount of gaming fun for your money. It’s also another shining example of a quality html5 game, made by a team who really don’t care so much about the ‘html5′ side of it at all, they just want to make great games and use the technology they are comfortable with. Which at the end of the day is what we should all be doing really.

Play Lava Blade on the official web site.

Verlet–js is a framework shared by Sean at subprotocol.com earlier this week. If you’ve worked with physics engines before, you’ve probably heard of Verlet integration which is often used for the math behind putting particles in motion. This is a JavaScript implementation of it, complete with some very fun examples. Cloth and spider web are pretty much guaranteed to make you smile.

The source for verlet–js is on github so you can easily dig right into the code or just snag it to use in your own experiments. There’s a short guide to getting started with it too.

Verlet–js

This responsive Garmon (A Russian accordion-like instrument) is certainly one of those “why not” demo’s thats too good to ignore. You simply have to resize the browser window to hear the music play.

There is no real special sauce here, the garmoshka itself is pure css, and, as the window is resized javascript detects the events and starts the html audio element playing.

Garmoshka – by Artem Polikarpov

CreativeJS for Designers – May 16th & 17th

Tickets go on sale on Wednesday April 17th at 11am and prices start at $599 for freelancers or $799 if your company is paying. All the info you need is on the training page.

This is the very first time this course is running in the US, so we expect tickets to go fast! If you’re interested, make sure you’re ready tomorrow at 11am.

CreativeJS for Designers, new workshop in New York info and booking.

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