Looking around for ideas on my site edoardoo.com (which is now restyled, have a look! ), I’ve decided to implement something that was pretty easy in my mind, just an animated falling lamp from the ceiling of the browser.

The completed animation (click for the demo)

DEMO – GIT

Doing some researches I’ve seen that actually it was not easy at all. So I’ve thought about slicing the problem in little isolated problems:

1. The wire 
2. The lamp body
3. The light
4. Details (eventually)

1) The Wire

Structure

The wire problem is how to implement it. In fact, in canvas 2d technology there isn’t a way to draw  a “boned” object, like a rag doll, or a rope. Using 3d modelling, which can easily implements some sort of physic,  was absolutely out of time budget and maybe an over sized solution.

What is, in the end, a rope? Actually it’s nothing more than a bunch of points glued together. Drawing a rope point-by-point could be extremely heavy to compute for a browser, I don’t want to imagine making them react to some sort of physic.

Rope made by segments

So I’ve thought about simplify the problem for the browser interpreting the rope like a bunch of segments, which react together following some physic rule.

Physic

I wanted to give my rope/wire a realistic movement based on gravity and inertia. After googling a bit, I’ve found one of the video gamers master piece technique: verlet integration.

This is not the place to discuss about how verlet integration works, because  it could be really dispersive and, most of all, since this is a basic technique for game developers, you can find thousands of places around the web with beautiful tutorials (link to my favourite at the end of the section).
I’ll limit to say that verlet integration give us the physic rules we need, i.e. equipped with:

• inertia
• gravity
• constraints between segments (of the rope)

I refer you to read this awesome and really clear tutorial on GameDev about verlet integration.

Here is the functions I’ve used:

2) The lamp body

Structure

To draw the lamp I’ve used an image of an industrial lamp.

Industrial lamp

I’ve preloaded it, letting the animation begin only when loading is complete.

Then drawn  it with a simple

Physic

The lamp has a physic related to the movement of the rope, of course. But how to extract the lamp movement from the rope it’s attached by? I’ve just used a little trick.
I’ve calculated the angular coefficient of the line passing by the last point of the rope and 18 points before the last. This is the angle the lamp should have, or at least it looks something good.

3) The light

The light coming out of the lamp can be implemented in a lot of ways. From an image drawn on a context, to a triangle drawn in javascript and filled with a gradient, ending, why not, going out of the canvas, using some css3.

I’ve used the one where I was more comfortable with, maybe not the most elegant solution: draw a triangle.
The reasons of this decision are intrinsics inside the initial draft of the project. In fact, at the beginning I thought about a lamp already turned on, falling down from the ceiling and oscillating in the meantime. For this reason, the light had been able to be rotated to accomplish the lamp angle.

The easier way to implement this was to take the same angle of the lamp and rotate the light, using javascript.

Another good reason to implement the light in a dynamic structure, was the possibility to grab the lamp and move it (awesome, I know), option that has been abandoned due to a lack of time.

4) Details

After the structure with a working physic was done, it was just a matter of polishing.

Rope

To make the rope looks better I’ve removed the dots used to identify the segments and applied an horizontal gradient.

Lamp

To give the lamp a more realistic effect I’ve created two version of the same object, one turned on and the other one turned off.

Lamp turned off and turned on

Going a little bit further, with the risk of being some kind of pathetic, I’ve added some metallic sound to the oscillating lamp.

Light

Using an alpha gradient instead of a full colour make the light look more familiar.

Again, with the risk of being pathetic, here is the sound of a blinking neon turning on, synced with the three flashes of the lamp.

Environment

As everyone knows, the devil is in the details. The first thing that come in my mind when I think about an industrial lamp, or a good light effect in general, is dust. What gives you the impression of light is the colour, of course, and the dust particles you can see through light beams.

So I’ve created two layers of dust, one with bigger  and one with smaller particles, and I animated them  at different speed (with some CSS3), creating a parallax effect. You can  barely see it, like in real life.

Dust

Possible developments

All the code has been implemented in a very short period of time. It can be absolutely improved (using sprites for pictures, cleaning the code, add resizing, etc…).

One of the possible feature which has been partially implemented is the possibility of grabbing the lamp and release it, making it oscillating (I have no idea of what to do with the sound here). The biggest problem I’ve encountered was the lamp going over the screen top, or starting to react in a really weird way when the  release point was too far from the origin.
A special thanks goes to the author of this post which pointed me in the right way.