Buildy — многопользовательская онлайн-игра, в которой можно строить всё, что угодно, без всякой определённой цели, просто так. Это трехмерный мир в изометрической проекции, в котором можно использовать готовые объекты из библиотеки (их больше четырёх с половиной тысяч!) или рисовать свои в редакторе. В игре есть чат, с помощью которого можно согласовывать свои действия с другими игроками. Кроме общего для всех мира Goon World III, в который по-умолчанию попадают все новые игроки, можно создавать свои закрытые площадки, доступ к которым возможен только по инвайтам.
Рубрика «canvas» - 20
Buildy: песочница для взрослых на HTML5
2012-11-15 в 13:24, admin, рубрики: canvas, firebase, game development, html5, javascript, phantomjs, онлайн игры, метки: Canvas, firebase, html5, phantomjs, онлайн игры
Как выглядят 100 000 звёзд
2012-11-15 в 0:33, admin, рубрики: canvas, Google Chrome, Web Audio, WebGL, метки: Web Audio, WebGL 
Разработчики из команды Google Data Arts Team в рамках проекта Chrome Experiments создали красивую демку «100 000 звёзд», в которой показано реальное местоположение более 100 тыс. окружающих звёзд относительно Солнца. Используемые технологии: WebGL, CSS3D, Web Audio.
Читать полностью »
Как мы автоматизировали тестирование приложений на canvas
2012-11-01 в 9:07, admin, рубрики: canvas, html5, online editor, Блог компании TeamLab, Веб-разработка, тестирование, управление документами, метки: Canvas, html5, online editor, управление документами Мои коллеги уже писали о разработке онлайн редакторов TeamLab на canvas. Сегодня посмотрим на рабочий процесс глазами специалистов по тестированию, ведь не только продукт с точки зрения разработчиков был инновационен благодаря выбранной технологии, но и задача проверки качества продукта оказалась новой, ранее никем еще не решаемой.
Читать полностью »
Угадываем знаменитость
2012-10-15 в 13:53, admin, рубрики: canvas, greasemonkey, javascript, userscripts, Кинопоиск, метки: Canvas, userscripts, Кинопоиск На кинопоиске есть викторина под названием «Угадай знаменитость». В ней необходимо за 10 секунд отгадать актёра (режиссёра, сценариста, просто известную личность) на фотографии. Правила просты, однако узнать человека бывает не так-то просто. Особенно, если не знаешь. Вот тут-то и родилась идея «помочь» себе в разгадывании.
Читать полностью »
Ray tracing не только в 3D
2012-10-10 в 14:03, admin, рубрики: canvas, javascript, JS, Алгоритмы, графика, Программирование, характеристическая функция, метки: Canvas, Алгоритмы, графика, характеристическая функция 
Многие в общих чертах представляют, как работает лучевая трассировка: через каждый пиксель сцены алгоритм пропускает луч и вычисляет, с какими объектами сцены он пересекается и как в результате данный пиксель должен быть освещён. Алгоритм по сути требует, чтобы у нас была функция, которая для каждой позиции возвращает цвет точки. Разумеется, тот же подход можно применять не только для трёхмерной графики: любое изображение можно растеризовать таким образом, если у нас есть подходящая функция. Рассмотрим для примера, как с помощью такого подхода решить задачу визуализации диаграмм разложения на простые множители, о которой написал helarqjsc.
Моя реализация здесь. На картинке изображено 10! = 3628800, хотя всех деталей, разумеется, не видно.
Читать полностью »
Визуализация характеристической функции
2012-10-10 в 14:03, admin, рубрики: canvas, javascript, JS, Алгоритмы, графика, Программирование, характеристическая функция, метки: Canvas, Алгоритмы, графика, характеристическая функция 
Многие в общих чертах представляют, как работает обратная лучевая трассировка: через каждый пиксель окна вывода алгоритм пропускает луч и вычисляет, с какими объектами сцены он пересекается и как в результате данный пиксель должен быть освещён. Алгоритм по сути требует, чтобы у нас была функция, которая для каждой позиции возвращает цвет точки. Разумеется, тот же подход можно применять не только для трёхмерной графики: любое изображение можно растеризовать таким образом, если у нас есть подходящая функция. Рассмотрим для примера, как с помощью такого подхода решить задачу визуализации диаграмм разложения на простые множители, о которой написал helarqjsc.
Моя реализация здесь. На картинке изображено 10! = 3628800, хотя всех деталей, разумеется, не видно.
Читать полностью »
Эффектная анимация разрушения (Pixel Dust)
2012-10-02 в 14:46, admin, рубрики: animation, canvas, game development, html5, javascript, метки: animation, Canvas, html5, javascript .gif "Эффектная анимация разрушения (Pixel Dust)"){kind=tracking}
В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?
u-content.js — использование Canvas элемента в изображениях
2012-09-20 в 6:52, admin, рубрики: canvas, javascript, JS, изображения, метки: Canvas, изображенияСегодня на днях я написать небольшую библиотеку для вставки Canvas в изображения. Репозиторий можно найти здесь github.com/Alexei03a/u-content. Под катом я описал спецификацию данной библиотеки.
Web Workers работа с Canvas
2012-09-18 в 12:32, admin, рубрики: canvas, html, html5, javascript, web workers, метки: Canvas, html5, javascript, web workersОсновная идея
Много кто в процессе изучения Web Workers сталкивался с проблемой работы с canvas-ом. В основном это происходит из-за того, что в web worker нельзя передать элементы DOM. Решением может быть использование getImageData(). Внимание! Статья не рассчитана для новичков. Для изучения данного материала рекомендую ознакомиться с основами canvas и webworker.
Я попытаюсь продемонстрировать вам работу с getImageData() на примере создания асинхронно работающего сложного фильтра размывания изображений — blur. Для этого нам понадобится 2 файла: index.html и filter_worker.js
Читать полностью »
клон приложения «aelios weather» при помощи html5
2012-09-18 в 0:41, admin, рубрики: canvas, css, html, html5, ipad, javascript, Веб-разработка, метки: Canvas, css, html5, iPad, javascriptХочу поделиться с вами моим последним проектом.
Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.
И вот что получилось:
Смотреть тут
Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.
В основе интерфейса лежит кружок, который вроде как компас и часы в одном лице.
Компас можно крутить, дабы показать дни недели или время суток.
На нем же можно увидеть время закатов и рассветов.
Внутри кружка появляется стрелка, которая автоматически направляется на самый большой по населению пункт в данном радиусе.