Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки.

Вы узнаете, как превратить показанный слева контур в верёвку справа:

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

Стоит учесть, что это не туториал по кодингу, а подробный обзор каждого из этапов. Но не беспокойтесь, код полностью доступен.

Замысел

Взглянув на это фото верёвки, вы заметите, что она состоит из множества переплетённых друг с другом прядей. Визуально они делят верёвку на сегменты. 2D‑проекция каждого сегмента напоминает изогнутый многоугольник.

Наша задача будет заключаться в создании этих многоугольников при помощи JavaScript.

Читать далее
[Перевод] Веб-компоненты проще, чем вы думаете

Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно,...

Подробнее
[Перевод] Введение в нечёткую логику

Вы когда-нибудь подумывали написать такой алгоритм, в соответствии с которым приложение само принимало бы решения, либо...

Подробнее
[Перевод] 6 мощных возможностей CSS, которые позволяют обойтись без JavaScript

В последнее время часто сравнивают CSS и JavaScript, споря о применении этих технологий для решения определённых задач....

Подробнее
Разбираем возможности конвертирования HTML в PDF браузером Google Chrome

Недавно в одном стартапе я решал задачу генерации билетов в формате PDF. На тот момент уже был готов сайт с устоявшимся...

Подробнее
[Перевод] Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

В третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи...

Подробнее
FrontFest.Kvartirniki — говорим о будущем JavaScript и судьбе фронтенд-разработчика

На FrontFest будет много общения — живых неформальных разговоров в формате, который мы называем квартирником. На...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями