Обновить
18

Векторная графика *

SVG и компания

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

Как начертить диск энкодера (или черчение кодом)

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

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

Однако есть языки программирования для черчения. Вот, например, Asymptote: The Vector Graphics Language отличный вариант для авто генерации чертежей.

Читать далее

Форматы векторной графики. Замена «толстому» SVG

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров19K
Векторизация растровой графики, источник

Все знают стандарт векторной графики SVG (Scalable Vector Graphics). Великая вещь, которая незаменима в веб-дизайне. Но этот формат до сих пор полностью не поддерживается ни в одном браузере по одной простой причине: он невероятно сложный. Если посмотреть на спецификации, там более 200 подпунктов в 27 разделах (около 900 страниц на бумаге). Только оглавление занимает 19 экранов. Мягко говоря, это перебор.

К счастью, SVG — не единственный формат векторной графики. Есть более эффективные и минималистичные альтернативы.
Читать дальше →

Как сделать внешнюю обводку у полигона

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

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

Читать далее

Преобразуем карты DOOM в SVG для лазерной резки

Время на прочтение6 мин
Количество просмотров2.9K
Я много слышал о формате данных классического Doom, поэтому решил написать код на Rust для извлечения его карт и преобразования в векторную графику для лазерной резки.

В статье я опишу процесс: извлечение данных, воссоздание геометрии и вывод SVG для лазерной резки; также я поведаю о геометрическом тупике, в который я с энтузиазмом залез, когда пытался просмотреть результат при помощи bevy.

Читать дальше →

Обмануть меня не трудно... Я сам обманываться рад

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

Начало положено.

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

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

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

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

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

В моих экспериментах было сложно выдавить хоть какие-то эмоции у персонажа. И после многочисленных попыток я ментально устала играть в эту рулетку. 

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

Читать далее

Как рисовать красивые соединения с помощью SVG

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

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

Читать далее

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

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

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

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

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

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

Замысел

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Но tkpaint это тоже графический редактор растровой графики со всеми присущими ей недостатками, особенно при работе с изображениями (прозрачность, деформация, градиентная заливка).
Читать дальше →

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

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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


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

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

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

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

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

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

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

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

Читать подробности

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

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

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

Читать далее

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