Рубрика «canvas»

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

Плиточник говорит — берите пятнадцать процентов запаса и всё. Пятнадцать процентов от плитки по 2000 с лишним за метр это уже сумма, я в столбик посчитал и решил что нет, надо по‑другому. Калькуляторы онлайн — площадь на цену умножают, я и сам умею. В CAD полез — там сначала модель строй, а мне не чертежи нужны были.

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

Продуктовые сайты любят анимацию «крутишь колесо мыши — объект меняется на глазах». Первый инстинкт: сделать это видео с currentTime. Вот почему это почти всегда неправильный первый инстинкт, и что вместо этого используют на практике.

Эффект знаком почти всем: скроллишь страницу, и товар на экране поворачивается, открывается, меняет состояние, будто это видео, которым управляет колесо мыши. Реализовать это «в лоб» пытаются почти всегда одинаково: берут файл видео и дёргают video.currentTime от scroll‑позиции. Через пару дней разработки выясняется, почему так почти никто не делает всерьёз.

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

Конвертируем цвета в JS со скоростью 6 миллиардов операций в секунду

В начале этого года я создал @colordx/core, самую быструю JS‑библиотеку для работы с цветом: парсинг различных форматов, конвертация в OKLAB/OKLCH, проверка попадания в P3-гамут и многое другое. Библиотека весит всего 7 КБ и не имеет внешних зависимостей. Высокую скорость обеспечили оптимизации под V8: мономорфизм, скрытые классы, ноль лишних аллокаций.

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

Flappy Bird: делаем игру сложнее и добавляем автопилот на чистой математике - 1

Введение

Начнём с предыстории. Когда я опубликовал первую статью про клон Flappy BirdЧитать полностью »

Как я собрал кубик Рубика в браузере на чистом Canvas - 1

Введение

Недавно я увидел видео, где маленький мальчик собирает кубик Рубика за 2,76 секунды (Читать полностью »

Привет! Хочу рассказать о своей библиотеке hq-cropper — инструменте для обрезки изображений на чистом TypeScript без единой зависимости.

Когда искал cropper для своего проекта, столкнулся с двумя проблемами. Во-первых, большинство популярных решений тянут за собой кучу зависимостей и весят 100+ KB. Во-вторых, мало кто работает с большими изображениями.

Решил написать своё решение: лёгкое, без зависимостей, с умным алгоритмом масштабирования.

Проблема больших изображений

Ситуация: пользователь загружает фото 4000×3000 пикселей, а вам нужен аватар 200×200. Большинство кропперов справляются с этим плохо:

Объяснение замощения мозаикой Пенроуза - 1

Всем привет! Привожу перевод статьи Penrose Tiling ExplainedЧитать полностью »

Когда в Telegram начали появляться первые кликер-игры вроде Notcoin, стало ясно: мессенджер идеально подходит для лёгких и социальных игровых проектов. Никаких установок, просто открыл ссылку и играешь.

До MoonTap у меня уже был опыт в смежных областях: я занимался разработкой криптообменника, работал с Web3, интегрировал bitcoind и другие ноды. Это дало понимание того, как устроены транзакции, работа с блокчейном и распределённые системы.

Так родился MoonTap - космический кликер, где игроки зарабатывают внутриигровые монетки, тратят их на бустеры, выполняют задания и приглашают друзей.

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

Привет! Меня зовут Андрей, я разработчик интерфейсов в команде User Experience инфраструктурных сервисов Яндекса. Мы развиваем Gravity UI — опенсорсную дизайн‑систему и библиотеку React‑компонентов, которую используют десятки продуктов внутри компании и за её пределами. Сегодня расскажу, как мы столкнулись с задачей визуализации сложных графов, почему существующие решения нас не устроили, и как в итоге появилась @gravity‑ui/graph — библиотека, которую мы решили сделать открытой для сообщества.

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


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