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

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

SVG и компания

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

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

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

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

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

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

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

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

Как я генерировал мандалы

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

Первый опыт в веб-разработке и работе с векторной графикой.

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

Истории

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

Время на прочтение6 мин
Количество просмотров25K
Когда речь заходит о комплексных числах, в первую очередь вспоминают о преобразовании Фурье и прочих аспектах цифровой обработки сигналов. Однако у них есть и более наглядная интерпретация, геометрическая — как точки на плоскости, координатам которой соответствуют действительная и мнимая часть комплексного числа. Рассматривая некоторую кривую как совокупность таких точек, можно описать её как комплексную функцию действительной переменной.

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

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

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

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

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

Имитация акварельного рисунка при помощи процедурной генерации

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

В этой статье я объясню технику, используемую для создания «акварельных» генеративных изображений. Моё решение схоже с техниками, которые я описывал в статье Generating Soft Textures. Алгоритм не особо сложен. Концептуально он прост, но при этом хитро настроен.

Источник вдохновения


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

Моя задача не заключалась в реалистичном воспроизведении всех свойств акварели. Скорее, я хотел передать суть того, что мне в ней нравится.
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии4

Digital Asset Lifecycle

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

С чего начать в управлении жизненным циклом цифровых активов и что это вообще такое?И ногие знакомы с понятием Управлен.

Сегодня я расскажу вам про методологию Управления жизненным циклом цифровых активов (Digital Asset Lifecycle), которая обычно включает в себя следующие этапы работы с креативами:

Читать далее
Рейтинг0
Комментарии0

Шаблон удостоверяющей печати, когда нужно правильно и не как у всех

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

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

Читать далее
Всего голосов 65: ↑64 и ↓1+63
Комментарии86

Карта метро Москвы с расчётом пути

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

В своей предыдущей статье про интерактивную карту метро Москвы я описывал процесс создания векторной карты на svg-движке, сравнивая с канвасным отображением.

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

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

Графика для JVM

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


Допустим, я хочу создавать качественные десктопные приложения. Я также хочу сделать это на JVM. Не надейтесь — мы еще не достигли цели. Но у меня есть план.

Почему именно JVM?


Это производительность на достаточно высоком уровне, но не заставляет вас слишком много задумываться о каждом выделение памяти. Это кроссплатформенно. В нем есть отличные языки — Kotlin, Scala и, конечно же, Clojure. C # тоже подойдет, но в нем нет Clojure.

Разве вы уже не можете создавать десктопные приложения на JVM?


Вы можете. Но традиционно AWT, Swing и JavaFX сопровождались множеством недостатков в качестве и производительности. Они были настолько существенными, что только одной компании удалось создать прилично выглядящее приложение на Swing. Это возможно, но требует огромных усилий.

Разве не все пользовательские интерфейсы Java прокляты?


Нет, не совсем. У AWT, Swing и JavaFX есть свои проблемы, но это исключительно их проблемы. Нет фундаментальной причины, по которой невозможно создать высококачественный пользовательский интерфейс на JVM. Просто это еще не было сделано.

Почему это еще не было сделано?


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

Почему не Electron?


Первая причина — производительность. JS — отличный язык для создания пользовательского интерфейса, но он намного медленнее, чем JVM. Wasm может быть быстрым, но подразумевает C ++ или Rust.
Читать дальше →
Всего голосов 45: ↑35 и ↓10+25
Комментарии30

Рисуем молекулы с помощью PostScript

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

Векторная графика очень удобна для иллюстраций. Молекулы состоят из атомов соединённых связями. Хочется, чтобы операции редактирования рисунка химической структуры осуществлялись согласно физическому устройству молекул: выделил атом, перенес его, повернул фрагмент молекулы, подписал… Практически все визуализаторы атомных структур экспортируют вид в растр, что усложняет подготовку иллюстраций. В этой заметке я расскажу о способе отрисовки 3D структур в векторном формате, а также о том, как в этом поможет язык PostScript.

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

Паттерны Архитектурного проектирования (v.1.0)(Archicad)

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

Всем добрый день.

Архитектура как отрасль очень сильно отстает от IT в плане инстурментов и методов разработки проектов. В IT давно есть среды разработки, а мы по прежнему создаем отдельные файлы и затем долго и нудно собираем их в один проект; ретроспективу после проекта некоторые основатели платных курсов называют своей уникальной методологией которую они придумали; и самое главное нету паттернов. Каждый раз в каждом проекте приходится подолгу объяснять одни и те же решения одних и тех же задач. И вот постепенно такая ситуация привела к решению что пора сформировать/сформулировать эти самые паттерны для архитектурного проектирования. Прежде всего описанные ниже паттерны применимы к разработке в программе Archicad.

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

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

Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург

Раскрашиваем треугольник программным способом

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

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

Я напишу обобщённый 2D-массив элементов типа uint32_t под названием colorBuffer, который может быть резервным хранилищем чего-то простого, например, выводимого в файл изображения, или буфером цвета окна SDL.

Задаём треугольник


Треугольник можно задать тремя точками, или вершинами. Каждая вершина имеет различные атрибуты; пока мы добавим каждой вершине только положение на экране.
Всего голосов 12: ↑12 и ↓0+12
Комментарии0

Как реализовать динамическую диаграмму для Vue на основе SVG

Время на прочтение5 мин
Количество просмотров5.7K
Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при загрузке сайта. Делимся примером, как можно построить диаграмму из элементов SVG с помощью JS и CSS.

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

Опубликован Scheme Request For Implementation — 203: A Simple Drawing Language in the Style of SICP

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

Structure and Interpretation of Computer Programs -- это один из самых известных учебников программирования в мире, на основе которого несколько десятков лет преподавался начальный курс программирования в MIT, а во многих унивеситетах, в том числе в Беркли, преподаётся до сих пор.

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

Расширение предлагает набор функций, применимых в качестве субстрата для реализации метода функциональной геометрии Питера Хендерсона таким образом, каким это предложено в SICP. Тем самым расширяется множество интерпретаторов Scheme, пригодных в качестве базовых при прохождении курса.

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

Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания

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


Источник: Dribbble

Анимации в вебе полезны в большом количестве ситуаций. В этом материале мы разберем, зачем конкретно они нужны, и какие инструменты создания анимированных сайтов стоит использовать в 2020 году.
Всего голосов 11: ↑6 и ↓5+1
Комментарии20

Циркулярные кривые 2-го порядка

Время на прочтение4 мин
Количество просмотров9.2K
Как известно, кривыми Безье нельзя построить дугу окружности или эллипса. В этой статье рассматриваются кривые, лишённые такого недостатка.


Дальше будут картинки и анимации
Всего голосов 26: ↑26 и ↓0+26
Комментарии22

Что случилось с фотостоками? Старожилы вытеснили новичков? Точка входа

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


Фотостоки, как много в этом слове. Если вкратце, для тех, кто не в теме, фотостоки – это ресурсы, куда вы можете загружать свои фото, видео, вектор и т.п. для последующей продажи.
Сегодня мы поговорим о том, как обстоят дела по состоянию на 2020 год.

Личный опыт присутствует, ибо по сей день что-то лениво гружу на продающие площадки. Об этом и многих интересных тонкостях мы и поговорим далее.
Читать дальше →
Всего голосов 68: ↑62 и ↓6+56
Комментарии26

Для Linux появился новый векторный редактор для создания макетов интерфейсов

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

На днях создатели редактора векторной графики Akira, работа над которым ведется вот уже пару лет, опубликовали первые тестовые выпуски. Графический пакет предназначен для создания макетов интерфейсов.

Авторы Akira заявили, что их цель — создание инструмента для профессионалов, при помощи которого можно готовить качественные макеты интерфейсов. Наверное, редактор можно назвать конкурентом Sketch, Figma, Inkscape и Adobe XD, но заточен он исключительно под Linux. От Inkscape он также отличается тем, что не ориентирован на печатный дизайн.
Читать дальше →
Всего голосов 31: ↑31 и ↓0+31
Комментарии13

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