Заказчик

Интерактивная игра "шары"

Сроки: 21 день

Механика игры:
На экране в режиме ожидания фигуры (зеленые 3D-сферы) летают по абстрактным траекториям, сцена имеет объем, т.е. глубину.
"Гость" при приближении к видеостене на определенное расстояние (2-3 метра) или при остановке на определенной метке на полу захватывается датчиками (камерами Kinect v2),
которые определяют его положение (параметры, фигуру). //1 секция экрана с кинектом должна захватывать до 4х фигур.//
На экран выводится его силуэт составленный из фигур (шаров), который повторяет жесты и положение тела как в зеркале.
При определенных действиях (жестах, взмахе руки например) что-то происходит )) Игрок может взаимодейтсвовать с шарами "фона", отталкивать или притягивать их жестами.
Например фигура может становиться больше при выполнении определенных условий (например что-либо поймать падающее сверху)

Экран для вывода графикики – LED видеостена P4 размер 6,15х2,56 метра, разделен на 2 зоны захвата по 3,075 шириной (разрешение экрана для 1 зоны – 768х640 px): на каждую секцию по 1 кинекту.

Примеры:
www.youtube.com/watch?v=-...
youtu.be/SLRHksNFXsA

Задача – Анимация лендинга:
концепция анимации – вращение и повороты объектов анимации (рулон, аппликатор), технология спрайтовой анимации (JS+CSS), библиотека для реализации задуманного scrollmagic.io/

постранично сверстанный лендинг labelon.it-face.com/

Сценарий:
1. Рулон термоэтикетки стоящий на ребре (вид со стороны среза – "бублик"), при начале скролла вниз рулон начинает вращаться вдоль вертикальной оси (как монетка),
делает полтора оборота и останавливается узкой стороной к наблюдателю. Текст при этом, растворяясь, уходит вверх.

2. Вся анимация происходит в пределах одного окна, скролл управляет только анимацией объектов.

3. Рулон термоэтикетки вращаясь "заправляется" в аппликатор (переходом fade например), далее аппликатор уходит в угол экрана чтобы не загораживать текст

4. При дальнейшем проскролливании появляются различные виды применения термоэтикетки, при этом из аппликатора на них анимированно наносятся этикетки.

5. Появление всех элементов (текст, картинки, кнопки, фон) должно быть анимированно

Рулон отснят покадрово в двух плоскостях вращения и обтравлен в пнг с прозрачным фоном.

пример лендингов анимацией на которую нужно ориентироваться
www.pumperlgsund-bio.de/d...
www.drinksmartwater.com/#...


исходники
www.dropbox.com/sh/cum9yg...