Рубрика «canvas»

Привет! Я Иван Антипин, заместитель директора департамента разработки в AGIMA. За свою карьеру я поработал с десятками команд. Где-то был разработчиком, где-то тимлидом, где-то помогал извне. У меня был миллион возможностей разобраться, как люди ведут себя в коллективе. Но всё же не на все вопросы существуют четкие ответы: что такое команда, как она работает, как ей управлять. Об этом мы подробно рассказываем на нашем курсе для тимлидов и на митапахЧитать полностью »

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

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

Идея

Изначально мысль о подобном алгоритме пришла ко мне после объявления конкурсаЧитать полностью »

Создание нейронной сети Хопфилда на JavaScript - 1

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

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

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

Историческая справка

В далеком 1970 году английский математик Читать полностью »

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

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

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

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

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

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

Памятка по работе с Canvas API - 1

Доброго времени суток, друзья!

Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.

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

Для меня это также своего рода промежуточный итог в изучении холста.

Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

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

RoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на <canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?

Имитация рисования от руки на примере RoughJS - 1

Немного истории

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

Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.

В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.
Читать полностью »

Пишем Pixel Art Maker на чистом JavaScript - 1

Доброго времени суток, друзья!

Предисловие

Однажды веб серфинг привел меня к этому.

Позже обнаружил статью про то, как это работает.

Казалось бы, ничего особенного — Пикачу, нарисованный средствами CSS. Данная техника называется Pixel Art (пиксельное искусство?). Что меня поразило, так это трудоемкость процесса. Каждая клеточка раскрашивается вручную (ну, почти; благо существуют препроцессоры; Sass в данном случае). Конечно, красота требует жертв. Однако разработчик — существо ленивое. Посему я задумался об автоматизации. Так появилось то, что я назвал Pixel Art Maker.
Читать полностью »

Персональный Лас-Вегас, или игра в браузерном расширении - 1

Недавно у нас с другом зашел разговор о карточных играх. Он сказал, что умеет играть только в покер, но и то давно этого не делал, потому что забыл все комбинации. Вот и поговорили… Я вспомнил, что пару лет назад я написал пять карточных игр, включая покер Техасский Холдем, где в любой момент в процессе игры можно посмотреть не только собранные комбинации, но и все потенциально возможные варианты с еще не открытыми картами. Это вполне могло бы стать обучающим пособием и помочь освежить в памяти правила в процессе игры с ботами.

Я решил заняться рефакторингом своего старого кода, а также, подправить графику. Дизайн мне всегда давался с трудом, это не мое. Рассчитывая хоть на какое-то вдохновение, я включил саунд-трек из GTA San-Andreas, тот, что с кантри-музыкой, с радио K-Rose. Мне кажется, что он хорошо передает атмосферу Лас-Вегаса. Я там никогда не был, но точно передает! Клянусь своей звездой шерифа. (Если что — она пластиковая, так что, не жалко...) И даже не поленился зайти в саму легендарную игру и прокатиться по Лас-Вентурасу, виртуальному прототипу мировой игорной столицы.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js