Рубрика «canvas»

Публикация содержит часть перевода статьи Джейкоба Сейделина (Jacob Seidelin) о создании трёхмерной игры с применением метода «бросания лучей» — Ray casting, на JavaScript и HTML, а также несколько примеров реализации этого метода. Цель публикации — продемонстрировать возможности Ray casting и познакомить читателя с проектом упомянутого автора.

Ray casting в мире веб сегодня - 1

Читать полностью »

Нередко рассказы о том, как веб-разработчики заботятся о своих приложениях, начинаются с процесса визуализации сайта, опускаются на уровень DOM и останавливаются на утверждениях типа: «И это быстро потому, что используется ускорение». Мартин Сплитт рассказывает о производительности снизу вверх: он начинает с пикселя и поднимается уровень за уровнем, заканчивая компоновкой страницы.

В основе статьи – выступление Мартина на JavaScript-конференции HolyJS 2017 в Питере, где он рассказывает о том, как происходит визуализация в браузерах и что нужно делать для того, чтобы ваши сайты «летали».

Читать полностью »

image

Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.

В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.

Также буду рад отзывам на инструменты из текущего списка, с помощью ваших отзывов я смогу сделать описание инструментов более полным.

Читать полностью »

Воркшопы на FrontFest — кросс-платформенные приложения на Angular, 3D-игры на Canvas и бекенды на Node.js - 1

Мы уже писали на Хабре о докладах в основных потоках FrontFest — JavaScript, вёрстка, смежные и экспериментальные технологии. Настало время рассказать о форматах. Помимо докладов будут квартирники (такой вид дискуссионных панелей) и воркшопы. Сегодня поговорим о воркшопах, и сразу главное — посещение воркшопов не требует никаких доплат и доступно по обычному билету участника. Да, вот так просто.

На воркшопах вы узнаете о хакерских способах низкоуровневых оптимизаций, приобретете навыки работы с Web Audio API и 3D на Canvas, научитесь делать свои веб-приложения нативными для iOS, Android, Windows и MacOS с помощью Ionic (Angular) и построите production-ready бекенд на Node.js с нуля.
Читать полностью »

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

image
Читать полностью »

Укрощение Змейки с помощью реактивных потоков - 1

Веб в наши дни двигается очень быстро и мы все это знаем. Сегодня Реактивное Программирование является одной из самых горячих тем в веб-разработке и с такими фреймворками, как Angular или React, она стала гораздо более популярной, особенно в современном мире JavaScript. В сообществе произошел массовый переход от императивных парадигм программирования к функциональным реактивным парадигмам. Тем не менее, многие разработчики пытаются с этим бороться и часто перегружены его сложностью (большой API), фундаментальным сдвигом в мышлении (от императивного к декларативному) и множеством понятий.

Хотя это не самая простая тема, но как только мы сумеем ее понять, мы спросим себя, как мы могли без нее жить?
Читать полностью »

13 сентября в Контуре отмечали День программиста. В самом большом офисе разработки играли в Pac-Man и пытались съесть 280 коробок с пиццей. Одновременно полторы тысячи человек рисовали пиксели в онлайне. В этом посте четыре разработчика рассказывают, как делали праздник.

Как мы отмечали 256 день года и рисовали пиксели через API - 1

Часть 1. Рассказывает Игорь green_hippo, который стырил идею на Reddit

День программиста у нас отмечает вся компания, а не только разработчики. Поэтому была нужна идея для онлайновой игры, в которой могут участвовать все желающие. Я вспомнил, что в апреле прошёл Reddit Place — социальный эксперимент по коллективному рисованию на холсте 1000×1000 пикселей, в котором участвовал миллион человек.

Я решил, что надо сделать свой Place, с таймлапсом и API.

Читать полностью »

Доброго времени суток, друзья. Сейчас я постараюсь вам показать как можно написать игру Змейка. Конечно, не самым быстрым способом и не самым маленьким в плане количества строк кода, но по-моему самым понятным для начинающих разработчиков, как я. Статья написана для людей, желающих чуть-чуть познакомиться с элементом canvas и его простыми методами для работы с 2D графикой.
image
Напишем змейку в «старом» виде, без особо красивой графики — в виде кубиков. Но это только упростит понимание разработки. Ну что же, поехали!
Читать полностью »

в 13:03, , рубрики: canvas, javascript
Canvas — почти как SVG - 1

Ссылка на канвас ниндзю в конце.

Конкретно речь пойдёт об элементе Path и как его реализовать на canvas.

Как мы помним path в svg умеет рисовать кривые безье, сплайны из этих кривых, а так же окружности. У канваса в этом плане возможностей куда меньше, так что будем работать с ним. Для начала научимся рисовать кривые. В svg как и в canvas кривые ограничены лишь 3-мя степенями, это сделано ради оптимизации, мы же будем использовать каноничное уравнение для их вычисления, так что кривые у нас будут любого порядка.
Читать полностью »

Здравствуй!

Совсем недавно разбирая графический движок Pixi.js было обнаружено, что по нему практически нет обучающего материала на русском языке. И хоть все разработчики поголовно должны знать английский, вводный урок на родном языке, вряд ли сильно навредит. Мы будем писать простейшую мини-игру, суть которой уничтожать шарики, до того как они упали на землю. Вот что у нас получится в конечном итоге:

Читать полностью »