Как рисуется эта анимация птиц?

Я наткнулся на этот удивительный веб-сайт, сделанный в HTML5 и javascript. Сердцем веб-сайта являются птицы, летящие случайным образом. У меня мало опыта работы с холстом и Html5. Я могу взять другой объект, какой-то простой может быть круг или что-то еще и перемещать его случайным образом. Однако я не получу этого естественного эффекта. Если вы внимательно наблюдаете, как птицы уходят друг от друга, то приближайтесь друг к другу, пока они взлетают высоко в небе, они очень быстро закрывают крылья, а когда они летят в горизонтальном направлении, они не закрывают крылья и не держат это прямо. Это выглядит потрясающе.

Я хочу знать только 2 вещи на этом сайте i.e

1) Является ли птица изображением или создается с использованием пути в html5

2) Как взлетают крылья птицы? Какую логику он должен был написать? Нужно ли мне изучать книгу физики для этого?

Я загрузил весь веб-сайт, чтобы узнать, какой код он должен был написать, но файл js удаляет все пробелы, и поэтому он как можно шире зашифрован;), а также я не нашел изображения птицы.

Я действительно поражен этим простым, но таким прекрасным дизайном. Шляпы к нему создатели.

Обновление: Я так рассеян, я забыл поместить ссылку. Чрезвычайно жаль;)

http://thewildernessdowntown.com/

Ответ 1

Ответы на ваши вопросы, насколько я знаю.

Будет ли птица изображением или создана с использованием пути в html5

Определенно нет. Проверьте все на вкладке Ресурсы элемента Inspect. Нет такого изображения. Солнце, дерево и главный логотип - это pngs.

Как взлетают крылья птицы? Какую логику он должен был написать? Нужно ли мне изучать книгу физики для этого?

Я не уверен в этом. Его почти как эффект твинов во вспышке.
Нет. Вам не нужно читать книгу физики, но знание физики - отличное дополнение для любого хорошего аниматора.

Вы не можете узнать что-либо еще с этого сайта по мере того, как JavaScript будет уменьшен. Если вы вынуждены использовать http://www.jsbeautifier.org, чтобы префикс script, а затем пройти через него. Это будет довольно сложно ИМХО.

Как вы могли заметить, это из демонстрационного примера Chrome Experiments, где вы можете увидеть некоторые довольно интересные эффекты JavaScript + HTML5. Там вы можете увидеть balldroppings.js от Джоша Нимой. Это один из самых популярных. Для достижения этих эффектов он использует processing.js еще одну замечательную библиотеку, созданную Джоном Ресигом.

P.s: Я бы сказал, вам может быть интересно, почему я направил вас на этот сайт. Все будет очевидно при просмотре источника на сайте Ball Droppings. JavaScript не ограничен и адекватно комментируется. Это будет отличное место для начала изучения HTML5 + CSS3 + SVG

Ответ 2

Птицы создаются с помощью спрайтов, если вы просматриваете источник, вы можете найти ссылки на них: 1, 2, 3, 4.

Что касается движения, это похоже на какой-то алгоритм подметания в сочетании с некоторым (по-видимому) эффектом faux-3D. Всего 3 роя, движущихся отдельно.

Код, который обрабатывает спрайт для каждой отдельной птицы (а также другие вещи), является классом спрайтов:

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
    }
};

Если вы заинтересованы в том, чтобы увидеть, как птицы инициализированы, найдите addBirds1: function(), addBirds2: function() и addBirds3: function(), но это действительно не поможет вам очень далеко, из-за минимизации различные переменные "имена не дают никакого представления об их значимости.

Ответ 3

Птицы на целевой странице (а не те, которые были спрятаны над картой), выглядят, используя трио. Вот пример, который выглядит почти идентично здесь: https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_birds.html

Ответ 4

Я считаю, что эти птицы точно такие же, как на этом сайте.

Они создаются с использованием потрясающего трёх .js

Ответ 5

Я думаю, к тому моменту, когда вы, возможно, выяснили, как это работает, но поскольку я не могу найти ответ на ваш вопрос в этом посте, я думаю, что следующее поможет:

Это достигается THREEJS. Если вы используете его, то воображение - наш единственный предел. В любом месте нет вспышки или изображений. Если вы хотите его использовать, вам нужно добавить

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

в вашем html. Установите z-index = -1 (минимум) для этого холста.

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

Пропустите холст в WebGlRenderer.

И вы все должны быть установлены.

Ссылка: Сообщение

Ответ 6

Вот это решение для tween, если вы планируете использовать Flash:

Flash Tween Birds