[Из песочницы] Анимация спрайтов при помощи CSS, JS и Canvas

Всем привет. Пару дней назад совершенно случайно наткнулся в залежах дисков на «Космические рейнджеры 2: Доминаторы». Устанавливать не стал, так как сейчас не хватает времени, чтобы как следует в неё погрузиться. А решил посмотреть, что на диске находится. Посмотрел «Фан-Арт» и там увидел программку для ковыряния ресурсов рейнджеров. Вот и решил посмотреть, из чего же сделаны наши доминаторы. Покликав немного, нашел файлики с анимацией в формате GAI. Начал любоваться той анимацией. Захотел их сохранить в «гифки», но не как не давала та программка сохранить анимацию? Можно либо сохранить текущий кадр, либо все файлы в PNG. Я решил сохранить все кадры, а их было — 150. Картинки все есть, а почему бы не сделать с ними ту же анимацию.

[Ссылка] JSManipulate

Эта джаваскриптовая библиотека из более чем сорокá эффектов («фильтров»), налагаемых на изображения (при помощи холста — HTML5 canvas), вызывает желание сравнить её с Фотошопом. По мере распространения браузеров, имеющих дело с холстом, она способна революционизировать иллюстративную силу Всемирной Паутины.



Код фильтров открыт.



За отдельные деньги к нему предлагают докупить плагин для jQuery, обеспечивающий анимацию.








Ссылка: http://habrahabr.ru/linker/go/126174/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] JSManipulate

[Перевод] Продвинутые анимации с requestAnimationFrame

Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)

Что такое requestAnimationFrame?

Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL

Зачем я должен это использовать?

Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.

Canvas Indicator — альтернатива для AjaxLoad.gif

Многие наверняка используют индикаторы процесса, например, когда передаете/получаете какие-нибудь данные через AJAX.

Однажды я озадачился, чтобы при нажатии на кнопку, которая отправляет данные формы на сервер, внутри неё появился этот самый индикатор. Изначально фон был однотонный, но в любой момент дизайнеры могли заменить его на другой, либо вообще сделать градиент.

Делать специальный GIF под каждую ситуацию довольно глупо. Поэтому правильное решение — использовать Canvas.

LimeJS: Пишем кроссплатформенную игру на HTML5 с поддержкой прикосновений

Введение

LimeJS — 2D Open Source HTML5 движок для написания игр с поддержкой прикосновений и работающий (по описанию) на большинстве мобильных платформ. Я нашёл его не сам, мне прислали письмо с просьбой рассказать о нём сообществу и я решил, раз так — что уж мелочиться, надо попробовать его в деле. А вы, в свою очередь, если движок вам понравится или вы хотя бы поддерживаете его идею и начинание, обеспечьте пожалуйста авторов инвайтом, потому что с песочницей у них как-то не сложилось (не знаю почему). Кроме того, я заранее договорился с авторами движка, что буду честен — буду рассказывать и о достоинствах и о недостатках, так что надеюсь убрать из статьи ореол рекламы (хотя какая реклама может быть связана с open source)..?

Open Source, кроссплатформенность и HTML5 — это то, что я люблю — инновации и свобода :). И ещё, сам движок написан на Closure и поддерживает chaining, это вносит дополнительные яркие цвета в свойства движка и программирование с его использованием. Конечно, необходимо ещё и удобство разработки игр само по себе, на что мы и испытаем LimeJS вместе с вами в этой статье. Движок преподносится как кроссплатформенный, на iPad'е представленные на сайте игры вполне себе работают, немного медленно, но вполне играбельно, ну а на моём Hero/Android2.1 (HTML5, наверное, неполный) они естественно подтормаживают и глючат — то есть буквально, играть в эти игры нельзя. Впрочем, практически все объекты в играх даже на смартфоне отображаются и действуют корректно, так что будем надеяться что с последующуей оптимизацией всё будет отлично даже на хилых смартфонах типа моего.

Движок, кстати, позиционируется как замена Flash-технологий в играх. Это болезненная тема для многих среди нас в связи с общим гноблением флэша, но при этом существующими и даже создающимися на нём отличными играми. (И, как я лично считаю, удобство самого механизма создания анимации в Flash пока ещё не повторено ни для HTML5/SVG ни для альтернатив). Так вот, может быть у этого движка действительно есть шанс завоевать любовь разработчиков на Flash и привить им любовь к HTML5. Решать им и вам. Главное отличие LimeJS от, допустим, ProcessingJS — ориентировка не на машину состояний, не на обновление в каждом кадре, а на «таймлайн» — событийность в сценарии игры.

Кстати, вот пример кода: javascript и html — чтобы вы могли сразу сделать какой-то вывод, а то я изначально относился к движку довольно скептически, а вот сейчас думаю, что наверняка зря.

Что получится

В течении прочтения статьи мы напишем очень упрощённую версию пинг-понга на LimeJS. Вот так будет выглядеть результат:



В конце статьи видео с демонстрацией написанной игры на iPad, iPhone и Android.

Динамический favicon или отображаем карму, не обновляя страницу

У каждого из нас, полагаю, в любимом браузере постоянно открыты несколько вкладок одновременно. Не раз бывают случаи, что и заголовка вкладки не видно — лишь favicon'ки. Но часто они информации, кроме как отображения логотипа сайта, не дают. И, наверное, зря. Но мы постараемся и здесь использовать это место (целых 16px*16px!) так, как хотим. По крайней мере, будем знать, как это можно сделать.

[Ссылка] Поиск лиц на картинке с помощью JavaScript и Canvas

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

Так вот, китайский программист Лю Лю (Liu Liu) реализовал этот алгоритм с помощью JavaScript и Canvas. Алгоритм так же не идеален, например, он не всегда находит лица людей, слегка повернутых боком относительно камеры, но в общем и целом он, конечно же, работает.

Ссылка: http://habrahabr.ru/linker/go/112053/


Источник: Хабрахабр - JavaScript
Оригинальная страница: [Ссылка] Поиск лиц на картинке с помощью JavaScript и Canvas

Волшебство ветра и шёлка

Нашёл восхитительное творение, выполненное с использованием HTML5. Вы «чертите» мышкой некоторый контур, и он превращается в «цветной шёлк, раздуваемый ветром».



Созданным творением очень легко поделиться с друзьями и они смогут увидеть то, как вы создавали свой шедевр.

Позвольте себе немного отдохнуть. Поделитесь своим шёлком.


Источник: Хабрахабр - Дизайн
Оригинальная страница: Волшебство ветра и шёлка

[Из песочницы] HTML5 CANVAS шаг за шагом: основы

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Impact HTML5 Game Engine — движок на JS

Просматривая обзоры инди-игрушек наткнулся на весьма интересный проект — Biolab Disaster (да поможет ему НЛО выдержать хабраэффект) — браузерный платформер на чистых HTML5 & Javascript, навеивающий воспоминания о тех временах, когда каждую игру делали с душой.
Коротенькая и незатейливая игрушка крутится необычайно быстро и красиво, оставляя за собой приятное впечатление, активированные чекпоинты и маленькие кусочки врагов :)
Выполнена она на движке автора этой же игры, Impact HTML5 Game Engine, в качестве демонстрации его возможностей. Движок на данный момент все еще находится в состоянии разработки, но предлагает уведомить нас электронным письмом по официальному выходу в свет.
За новостями можно так же следить в блоге автора.

На закуску — видео с геймплеем, некоторыми моментами создания игры и редактором уровней — с комментариями автора.

(Благодаря видео можно узнать ссылку на официально еще не опубликованный, но вполне рабочий level editor)

Флеш становится все менее значимым, что не может не радовать.
Приятного пятничного ковыряния в коде ^_^


Источник: Хабрахабр - JavaScript
Оригинальная страница: Impact HTML5 Game Engine — движок на JS

Canvas-трансформации доступным языком

Доброго времени суток, хабравчане! В этой статье я подробно расскажу вам о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.

Как мы сжимали шарики

Вчера ночью мы выложили шарик, помогающий принимать решения, для участия в 10К Apart — конкурсе на лучшее веб-приложение объемом до 10 КБ, использующее только клиентские технологии.

И если некоторые для этого занимались сжатием кода при помощи PNG, то мы решали обратную задачу — сжимали PNG при помощи js кода.

Эксперименты на HTML5

Очередная порция экспериментов на HTML5. Автор просит не использовать их в спорах HTML5vsFlash :)


Источник: Хабрахабр - Web-разработка
Оригинальная страница: Эксперименты на HTML5