Canvas *

Браузеры, поддерживающие HTML5, и платформа HTML5 для Windows 8 Metro сегодня становятся серьезными кандидатами для разработки современных игр.

Благодаря canvas, у вас есть доступ к аппаратно-ускоренной поверхности, на которой вы можете отображать контент вашей игры и с помощью некоторых трюков и ухищрений вы сможете достигнуть великолепной производительности рендеринга до 60 кадров в секунду. Подобная непрерывность действительно важна в играх, так как чем плавнее игра (анимация), тем лучше чувствует себя игрок.

Цель данной статьи — дать вам несколько подсказок, как выжать максимум мощности из HTML5 Canvas. Статья состоит из двух основных частей [вы читаете первую]. David Rousset скоро опубликует вторую часть.

В статье я буду показывать ключевые идеи на одном и том же примере — это эффект 2D-туннеля, который я написал для Coding4Fun-сессии на TechDays 2012 во Франции.

28 марта версия Google Chrome 18 появилась в стабильном канале и уже установлена на компьютерах большинства пользователей Chrome. Среди разных улучшений в новой версии следует особо отметить рендеринг с аппаратным ускорением Canvas2D под Windows и Mac OS X. Благодаря GPU-ускорению Canvas2D будет быстрее работать в браузере, что позволит повысить производительность и качество работы HTML5-игр и других веб-приложений.

Кроме Canvas2D, в свежей версии Chrome заработал движок для программной растеризации SwiftShader для WebGL. Движок лицензирован у компании TransGaming и обеспечивает работу WebGL на старых компьютерах, не поддерживающих аппаратное ускорение WebGL.

Здравствуйте!

Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.

Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…

BrowserQuest от Mozilla — это дань классическим многопользовательским играм. Вы играете за молодого воина, который ищет приключения на свою пятую точку. Тут не нужно спасать красавицу-принцессу, но это вам с лихвой окупится опасным миром, наполненным сокровищами и корованами. И главное, все это сделано с помощью HTML5 и JavaScript!

Проект с открытым исходным кодом и хостится на GitHub!

HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.

В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

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

Roman Cortes для конкурса любви 2012 js1k сделал 3D розу на javascript (canvas), используя метод Монте-Карло.

Кратко о методе Монте-Карло

Ме́тод Мо́нте-Ка́рло — общее название группы численных методов, основанных на получении большого числа реализаций стохастического (случайного) процесса, который формируется таким образом, чтобы его вероятностные характеристики совпадали с аналогичными величинами решаемой задачи. Используется для решения задач в различных областях физики, химии, математики, экономики, оптимизации, теории управления и др.

StarchartJs рисует с помощью canvas карту звёздного неба в стереографической проекции для заданного места и времени. К сожалению, свой проект, в котором я хотел использовать эту библиотеку, я так и не начал. Но в эту библиотеку я вложил много сил, поэтому решил больше не прятать её от чужих глаз, чтобы не пропадала зря. Надеюсь, кто-нибудь найдёт ей применение. :) Я раскрыл код специально к Новому году :)

Демо: www.skyandme.com
Исходный код: bitbucket.org/monoid/starchartjs/overview

Проект использует мою другую библиотеку StarJs: github.com/monoid/starjs.

На HTML5 Camp в рамках открытия мы показывали несколько демок с использованием новых веб-технологий. Там были как сторонние проекты и решения вроде Disney Tron Legacy и Santa's Media Queries, так и ряд примеров, подготовленных специально под мероприятие.



Одним из таких примеров был чат, работающий поверх веб-сокетов с расширенным функционалом, позволяющим совместно рисовать в реальном времени. Это в чем-то напоминает известную детскую игру, когда участники по-очереди или одновременно рисуют разные части какого-то животного, а потом складывают фрагменты вместе и смотрят, что получилось.

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

Всем привет. Я не выдержал и решил поделиться со всеми тем, чем сейчас более-менее активно занимаюсь.



Примерно месяц назад я продолжил экспериментировать с Canvas'ом и зачем-то мне понадобилась кнопочка. Да, самая обычная кнопочка, которую можно было бы затолкать на страничку обычным тегом, но это ведь не путь истинного самурая. В итоге были обшарены все закрома github'a и gitorious'a, гугл затерт до дыр, а подходящего инстумента так и не нашлось. Разве что libCanvas хвастался подобными примерами… Но их я обнаружил уже после начала работы, так что решил не забрасывать.

Сделан скрипт, показывающий результаты голосования одним числом не только разностью «за» и «против», но и с показом соотношения противоборствующих сил. Силы показываются в виде круговой (кольцевой) диаграммы, верхняя часть которой с зелёным цветом показывает долю голосов «за» (или отсутствует), а нижняя — долю «против», красного цвета. Таким образом, наглядно показано соотношение сил и насколько спорным было общее решение. От общего количества голосов зависит толщина кольца и насыщенность, что показывает статистическую устойчивость результата.

Проще посмотреть и оценить на примерах. Справа — примеры в списке топиков, взяты из разных анонсов, на одну оценку наведена мышь, открывающая арифметику суммарной оценки. Примеры из комментариев — далее.

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

В этот прекрасный, ничем не отличающийся от остальных день (если не брать в расчёт тот факт, что холодная погода разбила в осколки все мечтания о хотя бы паре тёплых дней в этом году что бы поездить на велосипеде), у меня выдалось хорошее настроение. И хорошее оно даже несмотря на то, что я отчаялся ставить хакинтош на свой ноут, и пришёл к неутешительной мысли, что если я хочу хоть что-то написать под iOS, то мне надо копить на продукцию фирмы Эппл. Но собственно пост не об этом, а о небольшой жизни крохотной игрушки, которую мы с вами и попытаемся создать. Честно говоря, в добрые времена я не так уж и много играл в предка нашего творения (которого ещё и не существует), но определённые теплые воспоминания ещё остались в моём сердце. Итак… Танки! Танчики! БатлТанкс! БатлСити!
Писать будем на JavaScript с выводом на canvas.

В большинстве современных игр невозможно обойтись без обнаружения и дальнейшей обработки столкновений (выстрел, прыжок, банальный отскок от препятствия). На первый взгляд их реализация представляется довольно просто, но так ли это на самом деле? Попробую вкратце объяснить суть проблем, с которыми я столкнулся.
По традиции, после прочтения нескольких статей начинаешь чувствовать себя богом, способным сделать все что угодно. Думаю, многие сталкивались с подобной проблемой и могут представить, что последует за ней… правильно, череда больших проблем. Но обо всем по порядку.

Создан Юргом Лени и Джонатаном Пакей, Paper.js является фреймворком сценариев векторной графики с открытым исходным кодом, который работает поверх HTML5 Canvas. Он предлагает чистый Scenegraph / DOM и много ярких функций, для создания и работы с векторной графикой и кривыми Безье.

Paper.js основана на и в значительной степени совместимы с Scriptographer, средой сценариев для Adobe Illustrator, первоначально разрабатывающаяся Юргом и Джонатананом более чем 10 лет.

Это продолжение статьи про основы LibCanvas. Если первая часть затрагивала теоретические засады, то в этой части мы перейдём к практике и постараемся реализовать совсем базовые и простые вещи. Цель статьи — осилить самые основы LibCanvas, мы напишем очень простые скрипты, малопригодные для использования в реальной жизни, но вы их можете развить во что-то великое.

Добрый день. Один из самых частых вопросов про LibCanvas сейчас — «С чего начать?». Согласен, порог вхождения в эту библиотеку чуть выше, чем в более простые canvas-библиотеки, потому в этом топике я раскрою основы LibCanvas — базовые понятия и принципы, отрисовка примитивных фигур, события мыши, клавиатуры, анимация, расширенный контекст, поведения. Постараюсь описать всё это с множеством примеров и максимально доступным языком.

Надеюсь, статья даст ответы на вопросы: Что такое LibCanvas? Зачем он нужен и какие его преимущества? С чего начать?

В этой статье будет только теория, а как применить эти знания на практике раскрыто в следующей статье

В этой части

[Трансформации,
Композиции,
Анимации,
Манипуляция пикселями]

Если вы создаете графический редактор на canvas, вам наверняка захочется иметь в арсенале мягкую кисть. Так вот, задача эта довольно нетривиальная и я постараюсь осветить основные трудности и подсказать пути решения.
(на картинке пример работы мягкой кисти в GIMP)
Перед прочтением рекомендую ознакомиться с предыдущей статьей.

Среди вопросов на счёт Canvas чаще всего звучали вопросы по внутренностям фреймворков — как понять, что мышка находится над элементом, как это реализовано в фреймворках. В топике мы реализуем подобный Canvas фреймворк на базе AtomJS.