Как стать автором
Обновить
1.2

Canvas *

Элемент HTML5

Сначала показывать
Порог рейтинга
Уровень сложности

Математика наклона в картах, или как мы сделали небо

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров8K

Недавно в карте 2ГИС появились небо и туман, которые можно увидеть, увеличив масштаб и наклон. 

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

Читать далее
Всего голосов 59: ↑59 и ↓0+59
Комментарии16

Новости

«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров

Время на прочтение6 мин
Количество просмотров37K

Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо... Короче говоря, перевозить древесину и шелк, как в обычных играх - это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.

Читать далее
Всего голосов 105: ↑95 и ↓10+85
Комментарии59

Процедурная генерация бумажных снежинок

Время на прочтение16 мин
Количество просмотров21K

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

Читать далее
Всего голосов 127: ↑127 и ↓0+127
Комментарии33

Будущее веба: станет ли рендеринг в <canvas> заменой DOM?

Время на прочтение7 мин
Количество просмотров25K
В последнее время было немало горестных рассуждений о последствиях решения Google использовать HTML-элемент <canvas> для рендеринга всего, что видно на экране при работе с Google Docs. И то, что это многих беспокоит, вполне понятно. Когда-то веб был задуман как система для работы с тщательно структурированной информацией, полной осмысленных метаданных и рассчитанной на совместное её использование многими людьми. Но, вместо этого, тот веб, который мы видим сегодня, представляет собой довольно сложно и запутанно устроенные приложения, которые работают в браузерных «песочницах».


Решение Google, которое заключается в том, чтобы перейти от вывода на страницы HTML-элементов к рисованию пикселей на <canvas>, нельзя назвать чем-то таким, чего раньше никто не видел и не пробовал. Другие передовые веб-приложения уже вышли далеко за пределы традиционных схем работы с HTML-элементами. Так, в Google Maps вывод данных на <canvas> используется уже многие годы. В VS Code для отрисовки идеального интерфейса терминала тоже используется <canvas>. А в подающем надежды наборе инструментов Google Flutter, который позволяет создавать кросс-платформенные интерфейсы, в веб-браузере, по умолчанию, используется рендеринг с использованием <canvas>.

Но в этот раз происходящее вызывает несколько иные ощущения. А именно, появляется такое чувство, что рендеринг в <canvas> и другие современные технологии, вроде WebAssembly, увели нас за точку невозврата. Все привыкли к схеме работы, когда страница загружает, в виде обычного текста, JavaScript-код, который выполняется, взаимодействуя с HTML-элементами, видимыми в «инструментах разработчика». Сейчас возникает такое впечатление, что это — лишь небольшой этап на пути постоянно развивающихся технологий веб-разработки.
Читать дальше →
Всего голосов 74: ↑72 и ↓2+70
Комментарии103

Истории

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

Время на прочтение6 мин
Количество просмотров3.4K

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

Читать далее
Всего голосов 50: ↑50 и ↓0+50
Комментарии0

Есть ли жизнь после жизни?

Время на прочтение4 мин
Количество просмотров33K

Всем доброго дня или ночи! Затронутая в статье, тема может показаться настолько избитой до популярности, что при ее прочтении возникнет стойкое желание взять помидор или, не дай бог, кирпич и кинуть в автора. А изложенные мысли будут напоминать повторное изобретение велосипеда с квадратными колесами. Но идея, побудившая приступить к описанию, буквально зудит и проситься ей поделиться, несмотря на угрозу физического или морального наказания.

Читать далее
Всего голосов 85: ↑84 и ↓1+83
Комментарии42

Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации

Время на прочтение6 мин
Количество просмотров23K

В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия - в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.

Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.

Читать далее
Всего голосов 54: ↑54 и ↓0+54
Комментарии30

Новая игра со старой атмосферой на Three.js

Время на прочтение9 мин
Количество просмотров27K
Существует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.


Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Всего голосов 144: ↑144 и ↓0+144
Комментарии76

Как я не занял первое место в конкурсе для JavaScript-разработчиков от Telegram

Время на прочтение8 мин
Количество просмотров51K
Активные пользователи Телеграма, особенно те, кто подписан на Павла Дурова, наверняка что-то слышали о том, что Телеграм проводил в этих ваших интернетах конкурс для iOS, Android и JavaScript разработчиков, а также для дизайнеров. Несмотря на то, что это было довольно эпичное событие с раздачей солидных призов (один из участников получил 50к долларов за первое место, написав самое быстрое и лёгкое приложение для Android), о нём как-то слабо писали, во всяком случае в Рунете. Своим дебютным постом попробую исправить ситуацию.

Читать дальше →
Всего голосов 162: ↑151 и ↓11+140
Комментарии47

Как Reddit создал r/Place

Время на прочтение15 мин
Количество просмотров26K

enter image description here


Над проектом работали несколько команд — фронтенд, бэкенд, мобильная разработка. По большей части он был реализован на уже существовавших в Reddit технологиях. В этой статье мы рассмотрим, как с технической стороны создавался Place. Если хотите посмотреть код Place, то он здесь.

Читать дальше →
Всего голосов 85: ↑84 и ↓1+83
Комментарии24

WebRTC: Делаем peer to peer игру на javascript

Время на прочтение13 мин
Количество просмотров38K
Недавно мне довелось поработать над прототипом видеочата. Это был отличный повод поближе познакомиться с концепциями WebRTC и опробовать их на практике. Как правило, когда говорят про WebRTC, подразумевают организацию аудио- и видеосвязи, но эта технология может применяться и для других интересных вещей. Я решил попробовать сделать peer-to-peer игру и поделиться опытом ее создания. Видео того что получилось и подробности реализации под катом.


Читать дальше →
Всего голосов 94: ↑92 и ↓2+90
Комментарии52

Нейронные сети на Javascript

Время на прочтение7 мин
Количество просмотров164K
image
Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.

Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
Читать дальше →
Всего голосов 58: ↑54 и ↓4+50
Комментарии79

Простейшие клеточные автоматы и их практическое применение

Время на прочтение6 мин
Количество просмотров103K
Этот мир просто охренеть какой сложный, каждый день поражаюсь.

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

И знаете, что удивительно? Этот подход замечательно работает. Ну, почти всегда. По крайней мере, ничего лучше мы до сих пор не придумали.

Но вообще-то я не об этом. Я хочу рассказать об одной чрезвычайно интересной как с эстетической, так и с математической точки зрения категории этих самых моделей.

image

Да, я о клеточных автоматах, а именно — об их подмножестве, простейших клеточных автоматах (Elementary cellular automaton). В этой статье я поведаю, что это такое, какие они бывают, какими свойствами обладают, а также отвечу на главный, на мой взгляд, и совершенно правильный вопрос, который часто несправедливо игнорируется в подобных статьях. Звучит он так: А это всё вообще зачем?

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

Я искренне надеюсь, что после прочтения статьи вы сами захотите поиграться с ними, и на этот случай у меня припасен собранный из JS и палок генератор.
Хватит воды, давай к сути
Всего голосов 89: ↑88 и ↓1+87
Комментарии15

Ближайшие события

Генератор случайных котов за 8 шагов

Время на прочтение8 мин
Количество просмотров76K

Доброго времени, Хабр!
Я всегда очень любил котов, и любил их рисовать, особенно морды кошачьи. Чуть изменишь форму, линию — и совершенно другое выражение, другое настроение. У меня листы А4 были изрисованы под предел. И тут мне недавно стукнуло в голову — а что если сделать генератор морд котов? Чтобы нажал на кнопочку и тебе выкинется случайная морда кота. Как можно более случайная и интересная. Давайте же посмотрим, как же сделать такую штуку.
Прошу под кат, любители котов.
Читать дальше →
Всего голосов 194: ↑178 и ↓16+162
Комментарии69

Rainyday.js

Время на прочтение1 мин
Количество просмотров36K
image

Для всех, кому прохладного дождя за окном в эти дни мало, Marek Brodziak сделал забавное демо на js + canvas (демо #1, демо #2 — и сразу предупреждаю, что заработать может не во всех браузерах), которое имитирует капли дождя на стекле. Своей целью разработчик ставил добиться лучшей плавности анимации капель.

Для достижения наилучшего эффекта погружения смотреть демо рекомендуется предварительно открыв в соседней вкладке raining.fm.
Читать дальше →
Всего голосов 103: ↑100 и ↓3+97
Комментарии62

Реалистичный дым на Canvas

Время на прочтение4 мин
Количество просмотров16K

Введение


На просторах интернета есть несколько статей о том как сделать эффект дыма, но скрипты слишком «тяжелые», и лично для меня не совсем понятные. Вот я и решил упростить задачу тем, кому интересно воплотить такой эффект в своих проектах.
Писать много не буду, в основном код с подробными комментариями.
Читать дальше →
Всего голосов 61: ↑56 и ↓5+51
Комментарии41

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

Время на прочтение1 мин
Количество просмотров74K
Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

Перевод с чешского источника
Всего голосов 136: ↑127 и ↓9+118
Комментарии43

Изометрический сапёр на LibCanvas (html5)

Время на прочтение8 мин
Количество просмотров42K

Этот топик будет отличаться от предыдущего топика Классический сапёр на html5 и LibCanvas. Его даже, скорее, можно назвать продолжением. И первая часть содержала пошаговую и детальную инструкцию, как заставить работать игрушку, то в этой части будет пару интересных приёмов, как её «оказуалить».

Играть в изометрический «Сапёр»






Если вы новичок в этом деле, то стоит начинать с первой части. Для тех, кто хочет углубляться я рассмотрю следующие темы на примере изометрического сапёра, построеного на базе LibCanvas:

  • Изометрическая проекция
  • Оптимизация скорости отрисовки через грязный хак
  • Спрайтовые анимации
  • Draggable слои
  • Оптимизация обработчика мыши согласно особенностей приложения

Читать дальше →
Всего голосов 125: ↑123 и ↓2+121
Комментарии52

Классический сапёр на html5 и LibCanvas

Время на прочтение10 мин
Количество просмотров34K


В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.

А также смотрите продолжение — "Изометрический сапёр на LibCanvas (html5)"

Читать дальше →
Всего голосов 77: ↑75 и ↓2+73
Комментарии58

Ещё одна «Солнечная cистема» на HTML5 Canvas

Время на прочтение8 мин
Количество просмотров42K

Перед Новым годом на хабре были опубликованы два топика (первый, второй) о создании «Солнечной системы» на HTML5 Canvas. Бегло прочитав их и изучив результаты профилирования я удивился тому что такая простенькая программа так неэффективно работает. Вооружившись Notepad++ решил проверить всё ли так плохо, написав свою реализацию.

ТЗ остаётся всё тем же. 12 планет, период обращения первой — 40 секунд, каждой последующей на 20 секунд дольше. Изначально планеты имеют случайное расположение на своих орбитах. У каждой планеты есть описание, которое отображается при наведении курсора на неё. При клике на планету она останавливается. Если курсор находиться над орбитой — подсветить её. Всё это должно работать в Opera 12+, IE9+, Chrome и FF.

— Я не хочу ничего читать, давай результат!
— Держи: жмяк
Читать дальше →
Всего голосов 73: ↑63 и ↓10+53
Комментарии96