Обновить
18

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

SVG и компания

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

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

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

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

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

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

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

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

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

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




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

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

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

Формат JPEG – крутой и определяющий культуру, однако мне больше интересны те варианты, которые ему проиграли. Менее известные и популярные, более узкие элементы этого мира. Поэтому я расскажу вам о 10 форматах, не попавших в мейнстрим. Если вашего любимого формата здесь нет – не обижайтесь.
Читать дальше →

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

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

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

Читать далее

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

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


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

Речь идёт о подготовке изображения, рассчитанного на использовании в верхней правой части сайта jamstackconf.com. Мы, в маркетинговой команде Netlify, используем Figma. Первая моя попытка экспорта этого изображения для использования его на сайте оказалась далеко не самой удачной.
Читать дальше →

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

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

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

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

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

Читать далее

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

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


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


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


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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

Дальше больше картинок и анимаций

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

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

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

Читать далее

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

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

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

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


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

Моя задача не заключалась в реалистичном воспроизведении всех свойств акварели. Скорее, я хотел передать суть того, что мне в ней нравится.
Читать дальше →

Digital Asset Lifecycle

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Графика для JVM

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


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

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


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

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


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

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


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

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


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

Почему не Electron?


Первая причина — производительность. JS — отличный язык для создания пользовательского интерфейса, но он намного медленнее, чем JVM. Wasm может быть быстрым, но подразумевает C ++ или Rust.
Читать дальше →

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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


Треугольник можно задать тремя точками, или вершинами. Каждая вершина имеет различные атрибуты; пока мы добавим каждой вершине только положение на экране.

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

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

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

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

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

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

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

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

Читать далее

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