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

Работа с векторной графикой *

SVG и компания

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

Рисуем верёвку в формате SVG при помощи JavaScript

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

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

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

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

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

Замысел

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

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

Читать далее
Всего голосов 63: ↑62 и ↓1+61
Комментарии2

Изготовление Макета для Прототипа (или Как Буравить Пластмаски)

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров4.3K

При разработке прошивок микроконтроллеров приходится отлаживаться на прототипах. Прототип это просто набор отладочных плат соединенных перемычками.

Далее следует инструкция как сделать качественное основание для прототипа.

Читать далее
Всего голосов 8: ↑5 и ↓3+2
Комментарии12

Библиотека компонентов для дизайнеров приложений

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1+4
Комментарии6

Топ 15 Free программ для видеомонтажа или полный пайплайн загрузки видео на YouTube

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

Важно: Если вам интересны именно бесплатные программы, то я советую посмотреть мой видеоролик ниже по ссылке - это "байт" на комментарии, лайки и подписку на канал))) Я попробовал сделать максимально не скучный ролик с 2д и 3д анимациями, анимированными титрами, переходами, 5-10 секундными вставками из различных видео и фильмов в качестве смешных перебивок, а так же самих шуток.

Если же вам интересен именно процесс создания данного видео, написание сценария, съёмка, монтаж, озвучка, создание 2д и 3д эффектов, поиск перебивок, а так же создание превью и заставок к видео, загрузка видео на ютуб, его оптимизация, простановка тегов и прочее - советую прочитать именно текстовую статью ниже. Если же вам интересно и то и другое - советую начать с видео))

Читать далее
Всего голосов 23: ↑11 и ↓12-1
Комментарии37

Истории

Добавление расчёта пути к схеме метро Москвы из Википедии

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.2K

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

Для этого решил адаптировать не алгоритм к схеме, а схему к алгоритму. Поскольку алгоритм BFS использует перебор массивов станций, координат линий и пересадок, то нужно было распарсить схему из Википедии в массивы: для этого я написал различные варианты CSS-селекторов.

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

Масштабируемая векторная графика. Простой SVG-редактор. Памяти Матса Бенгтссона

Время на прочтение9 мин
Количество просмотров5K
imageВсё началось, когда вышла очередная версии TkProE — интегрированной среды разработки программ на tcl/tk. Мне очень пришлось по нраву наличие в ней встроенного графического редактора. Но этот редактор не работает с векторной графикой и отсюда все его недостатки.

В процессе модернизации TkProE я познакомился с проектом tkpaint. Более того какие-то идеи я позаимствовал у него и добавил в графический редактор в TkProE.

Но tkpaint это тоже графический редактор растровой графики со всеми присущими ей недостатками, особенно при работе с изображениями (прозрачность, деформация, градиентная заливка).
Читать дальше →
Всего голосов 5: ↑4 и ↓1+3
Комментарии7

Inkscape с 0 до Pro за 5 дней

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

Создал мини курс по программе для векторной графики Inkscape в 2022.

Разработал методические материалы для изучения темы «Кодирование и обработка графической и мультимедийной информации» в школьном курсе информатики.

«Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, AI, EPS, WMF или SVG». «Inkscape - редактор векторной графики, аналогичный по своим возможностям таким программам, как Adobe Illustrator, Corel Draw и другим».

Читать далее
Всего голосов 78: ↑77 и ↓1+76
Комментарии42

В 12 я помог роботу POMPO получить награду на Behance. А он поможет мне сделать NFT и построить робота в реале

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

Привет, Хабр.

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

В этой статье я хочу рассказать о роботе POMPO, которого я придумал, когда мне было 12 лет. Тогда же я выложил его на Behance и получил награду «Лучший дизайн персонажа».

С тех пор я многому научился и теперь я собираюсь построить настоящего боевого робота и участвовать в шоу BattleBots. Деньги на это я планирую заработать с помощью NFT.

Дальше я расскажу  о процессе создания NFT-коллекции, о трудностях, о продвижении, покажу свои расчёты и расскажу о том, как будут дорожать в будущем мои NFT и как я планирую развивать проект. Буду рад и поддержке, и замечаниям, которые помогут мне с проектом.

Читать далее
Всего голосов 30: ↑16 и ↓14+2
Комментарии24

Рыцарь Машинной Графики

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

Эта статья не относится к жанру официозных юбилейных публикаций. Скорее – это небольшой,  очень личный, не совсем упорядоченный и причёсанный набор воспоминаний и раздумий о пути, пройденном Машинной Графикой в в СССР и о человеке, посвятившему ей всю свою жизнь - докторе технических наук, лауреате Государственной Премии СССР, Викторе Алексеевиче Дебелове.

Уверен, что Виктора Алексеевича, учитывая его колоссальный вклад в становление советской Машинной Графики,  без особой натяжки можно было бы назвать одним из её основоположников в СССР.
Но… зная его скромность и пренебрежительное отношение к почестям и наградам, позволю себе «наградить» его в этом рассказе званием, которого он безусловно заслуживает – Рыцарь Машинной Графики.

Читать далее
Всего голосов 93: ↑92 и ↓1+91
Комментарии20

Руководство пользователя ImageMagick

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

Один из старейших графических редакторов - программный пакет ImageMagick для создания, редактирования, коррекции цвета или трансформации цифровых изображений. ImageMagick читает и создает изображения во многих форматах, включая PNG, JPEG, GIF, WebP, HEIC, SVG, PDF, DPX, EXR и TIFF. ImageMagick может изменять размер, переворачивать, вращать, искажать, сдвигать и преобразовывать изображения, настраивать цвета, применять специальные фотографические эффекты или рисовать текст, линии, многоугольники, эллипсы и кривые Безье.

Читать далее
Всего голосов 23: ↑22 и ↓1+21
Комментарии5

3D для каждого: способы создать модель. Часть 1

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

Пожалуй, каждый или почти каждый читатель играл в современные графонистые игры, смотрел мультики Пиксар или хотя бы кино от Марвел или ДС. Или любой другой крупной компании — сейчас сложно найти фильмы без графики. И за просмотром или игрой наверняка задавались вопросом — а как это сделано? А, может, даже фантазировали, а что бы Вы сделали, если бы вдруг освоили 3D-графику?
Читать дальше →
Всего голосов 65: ↑60 и ↓5+55
Комментарии42

Создание красивых градиентов на CSS

Время на прочтение5 мин
Количество просмотров20K
Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:


Заметили, что в центре он становится бледным и грязным?

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

Однако, как оказалось, можно полностью избавиться от мёртвой зоны серого. В этом посте я расскажу, почему она возникает, и о том, как можно использовать теорию цвета для создания насыщенных, ярких градиентов, «живых» по всей своей длине.
Читать дальше →
Всего голосов 67: ↑63 и ↓4+59
Комментарии30

Low-poly модель. От эскиза до изделия

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

Цель: смоделировать и изготовить низкополигональную собаку. Материал - сталь конструкционная.

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

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

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

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

Как я заменил актрису в сцене из фильма без использования DeepFake

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

Расскажу, как я заменил Еву Грин другой актрисой в сцене из фильма "Город грехов 2: Женщина, ради которой стоит убивать". Делал все сам, бюджет ролика нулевой.

Читать далее
Всего голосов 39: ↑36 и ↓3+33
Комментарии54

Gnuplot. Пакуем выходной svg — в один файл

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

Старый мем на новый лад.

Предыдущая моя статья "Gnuplot и с чем его едят" получила большой отклик и даже была переведена на несколько языков (видел на медиуме, встречал на немецком). Поэтому, раз тема актуальная, решил продолжить.

У меня появилась задача получать данные, а затем на удалённом сервере строить по ним графики и отправлять по почте. Причём графики должны иметь возможность отключать оси, приближать отдельные области графика, включать-выключать сетку. И вы знаете, gnuplot умеет выдавать подобные графики. Он даёт их в формате html или svg. Но вот незадача, вместе с этим файлом надо тащить ещё багаж данных в виде кучи javascript-файликов, картинок, css (в случае html), что сильно сужает применимость при отправке их по почте.

В результате, нашёл-таки решение данной проблемы и продемонстрирую её решение на примере svg-файла, для html будет аналогично. Поскольку нет возможности привести график реальных данных, где было использовано это решение, в пример взял шуточный мем про студентов
Читать дальше →
Всего голосов 64: ↑62 и ↓2+60
Комментарии12

10 забытых форматов изображений

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

Мир забыл уже много форматов изображений – от PCX и TGA до VRML. Не все стандарты изображений, какими бы они красивыми ни были, живут долго.




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

Один технический стандарт в итоге поменял то, как люди использовали один из важных типов офисной техники – факс. Другой поменял, можно сказать, всё остальное, став де-факто способом пересылки высококачественных изображений и низкокачественных мемов по интернету и в рабочих условиях.

Их пути разошлись, но пришли они к одному и тому же – миру стандартов сжатия. Средний человек не представляет, что такое JBIG – стандарт сжатия, использующийся в большинстве факсов. Однако этот же человек наверняка слышал про JPEG – стандарт, впервые опубликованный в 1992 году.

Формат JPEG – крутой и определяющий культуру, однако мне больше интересны те варианты, которые ему проиграли. Менее известные и популярные, более узкие элементы этого мира. Поэтому я расскажу вам о 10 форматах, не попавших в мейнстрим. Если вашего любимого формата здесь нет – не обижайтесь.
Читать дальше →
Всего голосов 30: ↑23 и ↓7+16
Комментарии36

Параметрическая модель движения ног в анимации

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

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

Читать далее
Всего голосов 4: ↑3 и ↓1+2
Комментарии2

Вектор? Растр? А может — и то, и другое?

Время на прочтение4 мин
Количество просмотров6.6K
На этой неделе я столкнулся с интересным классом задач, для решения которых, как я теперь понимаю, можно было использовать гораздо более удачный подход и раньше. Но существует ли такой подход?


Изображение для верхней части сайта

Речь идёт о подготовке изображения, рассчитанного на использовании в верхней правой части сайта jamstackconf.com. Мы, в маркетинговой команде Netlify, используем Figma. Первая моя попытка экспорта этого изображения для использования его на сайте оказалась далеко не самой удачной.
Читать дальше →
Всего голосов 38: ↑36 и ↓2+34
Комментарии17

35 инструментов для веб-разработчика на каждый день

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

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

Читать далее
Всего голосов 27: ↑25 и ↓2+23
Комментарии18

Компактные Vue компоненты из самописных SVG иконок

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


История вопроса


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


Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

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

Вклад авторов