Как стать автором
Обновить
0
Рейтинг

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

SVG и компания

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

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

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

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

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

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

Новости

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

Программирование *Работа с векторной графикой *Разработка под Linux *История IT Биографии гиков
imageВсё началось, когда вышла очередная версии TkProE — интегрированной среды разработки программ на tcl/tk. Мне очень пришлось по нраву наличие в ней встроенного графического редактора. Но этот редактор не работает с векторной графикой и отсюда все его недостатки.

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

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

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

Веб-дизайн *Работа с иконками *Работа с векторной графикой *Графический дизайн *Учебный процесс в IT
Из песочницы

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

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

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

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

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

Программирование *Работа с векторной графикой *Развитие стартапа Дизайн Робототехника

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

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

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

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

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

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

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

Программирование *Работа с векторной графикой *История IT

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

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

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

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

Open source *Работа с векторной графикой *
Из песочницы

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

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

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

Блог компании RUVDS.com Работа с векторной графикой *Работа с 3D-графикой *Читальный зал Научно-популярное
Tutorial

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

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

CSS *Работа с векторной графикой *Графический дизайн *Дизайн
Перевод
Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:


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

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

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

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

Работа с векторной графикой *Работа с 3D-графикой *CAD/CAM *Подготовка технической документации *
Из песочницы

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

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

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

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

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

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

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

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

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

Блог компании RUVDS.com Python *Работа с векторной графикой *HTML *Визуализация данных *
Tutorial

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

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

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

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

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

Работа с векторной графикой *Обработка изображений *
Перевод

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




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

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

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

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

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

Работа с векторной графикой *Компьютерная анимация *Графический дизайн *
Из песочницы

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

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

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

Блог компании RUVDS.com Работа с векторной графикой *Серверная оптимизация *Обработка изображений *Графический дизайн *
Перевод
На этой неделе я столкнулся с интересным классом задач, для решения которых, как я теперь понимаю, можно было использовать гораздо более удачный подход и раньше. Но существует ли такой подход?


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

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

Истории

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

Блог компании HTML Academy Разработка веб-сайтов *Типографика *Работа с векторной графикой *Софт

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

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

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

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

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

Работа с иконками *JavaScript *Работа с векторной графикой *Системы сборки *VueJS *


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


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


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

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

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

Блог компании 2ГИС Работа с векторной графикой *Разработка мобильных приложений *Геоинформационные сервисы *Rust *
Из песочницы

На карте 2ГИС очень много картинок — те же знаки дорожного движения и логотипы компаний. Графические API, которые в наши карты предоставляют Android и iOS, обычно не могут рисовать векторную графику напрямую, поэтому нам приходится её растеризовать. А так как мы заранее не знаем нужный размер картинки и не можем её растеризовать до сборки ресурсов, используем растеризаторы.

И если для 2ГИС на Android и iOS мы можем использовать платформенные решения, то затаскивать их в Mobile SDK было бы, мягко говоря, не очень правильно.

Под катом — небольшая история, как работает растеризация в мобильных 2ГИС и какое решение мы выбрали для Mobile SDK

Читать далее
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 2.7K
Комментарии 6

Комплексные числа и геометрические узоры

Блог компании RUVDS.com Работа с векторной графикой *Алгоритмы *Математика *Графический дизайн *
Когда речь заходит о комплексных числах, в первую очередь вспоминают о преобразовании Фурье и прочих аспектах цифровой обработки сигналов. Однако у них есть и более наглядная интерпретация, геометрическая — как точки на плоскости, координатам которой соответствуют действительная и мнимая часть комплексного числа. Рассматривая некоторую кривую как совокупность таких точек, можно описать её как комплексную функцию действительной переменной.

Дальше больше картинок и анимаций
Всего голосов 106: ↑106 и ↓0 +106
Просмотры 19K
Комментарии 39

Лучшие инструменты для совместной работы творческих команд в 2021 году

Веб-дизайн *Работа с векторной графикой *Графический дизайн *Контент-маркетинг *Дизайн

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 2.4K
Комментарии 2

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