How is this bird animation drawn?

Question

I came across this awesome website made in HTML5 and javascript. The heart of the website is the birds flying around randomly. I have little experience with canvas and Html5. I can take another object, some simple may be circle or something and move it randomly like this. However I won't get this natural effect. If you observe carefully the birds go away from each other, then come near each other, while they are flying up high in the sky they flap their wings very fast whereas when they are flying in horizontal direction they don't flap their wings and keep it straight. It looks amazing.

I want to know only 2 things in this website i.e

1) Whether the bird is a image or created using path in html5

2) How are wings of the bird flapping? What logic he must have written? Do I need to study some physics book for this?

I've downloaded the entire website to see what code he must have written but the js file removes all the spaces and so it is as close as encrypted ;) and also I didn't find any image of the bird.

I am truly amazed with this simple yet so beautiful design. Hats off to it's creators.

Update: I am so absent minded, I forgot to put the link. Extremely extremely sorry ;)

http://thewildernessdowntown.com/

Answer 1

The birds are created using sprites, if you search through the source you can find references to them: 1, 2, 3, 4.

As for the movement, it looks like some sort of swarming algorithm, combined with some (apparently) faux-3D effect. There are 3 swarms altogether, moving separately.

The code which handles the sprite for each individual bird (as well as other things), is the sprite-class:

function sprite() {}
sprite.prototype = {
    create: function(c, b, f) {
        this.image = new Image();
        var a = this;
        this.image.onload = function() {
            a.onImage()
        };
        var e = new Date();
        this.image.src = c + "?" + e.getTime();
        this.step = 0;
        this.running = true;
        this.framerate = f;
        this.size = b;
        this.off_x = 0;
        this.off_y = 0;
        this.loop = true;
        this.offset = 0
    },
    onImage: function() {
        this.steps = this.image.height / this.size
    },
    blit: function(a, c, b, f) {
        if (!this.image.complete) {
            return
        }
        if (this.loop) {
            var e = ((f + this.offset) % 1);
            this.step = Math.floor(e * this.framerate) % this.steps
        } else {
            this.step = Math.floor(f * this.framerate);
            if (this.step > (this.steps - 1)) {
                this.step = this.steps - 1
            }
        }
        a.drawImage(this.image, 0, this.step * this.size, this.image.width, this.size, c - this.image.width / 2 + this.off_x, b - this.size / 2 + this.off_y, this.image.width, this.size)
    },
    start: function() {
        this.running = true
    },
    stop: function() {
        this.running = false;
        this.step = 0
    }
};

If you're interested in seeing how the birds are initalized, look for addBirds1: function(), addBirds2: function() and addBirds3: function(), but that really won't get you very far since, due to the minification, the different variables' names give no clue to their significance.

Answer 2

The answers for your questions as far as I know.

Whether the bird is a image or created using path in html5

Definitely no. Have checked everything inside the Resources Tab of the Inspect element. There is no such image. The sun, tree and the main logo all are pngs.

How are wings of the bird flapping? What logic he must have written? Do I need to study some physics book for this?

I am not sure about this. Its almost like a tween effect in flash.
No. you do not need to read a physics book but knowing physics is a great add on for any good animator.

You cannot learn anything else from this site as the JavaScript is minified. If you feel compelled use http://www.jsbeautifier.org to prettify the script and then walk through it. It will would be pretty difficult IMHO.

As you might have noted, this is from the show case of Chrome Experiments where you could see some pretty nifty JavaScript + HTML5 effects. There you can see balldroppings.js by Josh Nimoy. It is one of the most popular one out there. To achieve this effects he uses processing.js another wonderful library created by John Resig.

P.s: I'd say you might be wondering why I have guided you to that site. Everything will be apparent when you view source on the Ball Droppings site. The JavaScript is un minified and adequately commentd. It will be a great place to get started on learning HTML5 + CSS3 + SVG

Answer 3

The birds on the landing page (not the the ones sprited over the map) appear to be made using three.js. There's a example that looks nearly identical here: https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_birds.html

Answer 4

I believe this birds are exactly the same as these on this website.

They are made using the amazing three.js

Answer 5

I guess by the time you might have figured out how it works but as I cannot find a answer to your question in this post I think following will help:

This is achieved by THREEJS. If you are using it then imagination is our only limit. There is not flash or images anywhere. If you want to use it then you have to add

<canvas id='canvasID' width="1680" height="949" style="position: absolute; left: 0px; top: 0px;"></canvas>

in your html. Set z-index=-1 (minimum) for this canvas.

var canvas = document.getElementById("canvasID");
renderer = new THREE.WebGLRenderer({ canvas: canvas });

Pass the canvas to WebGlRenderer.

And you should be all set.

Ref: Post

Answer 6

Here it is a tween solution, if you plan to use Flash:

Flash Tween Birds