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

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

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

Меня зовут Полина, я работаю веб-дизайнером и иллюстратором. Работы много, поэтому со временем возник вопрос о поиске «запасного игрока», который в случае моего большого загруза мог бы подхватить задачу по созданию иллюстраций для статей на Хабр и Яндекс Дзен.

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



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

Вам никогда не хотелось создать красивую анимированную главную страницу для вашего сайта? А представить флагманский продукт в лучшем виде с помощью тщательно проработанных анимаций? А как насчет того, чтобы привлечь внимание пользователей к ссылкам меню, движущимся по замысловатой траектории?

Для того чтобы выполнить подобные пожелания, актуальные для современного мира веб-разработки, CSS-модуль Motion Path Module Level 1 дает возможность использовать абсолютно новый вид анимаций и позволяет перемещать HTML-элементы по заданной траектории.

Мы живём в удивительное время. То, что раньше было невероятным, сегодня у нас буквально «валяется под ногами». В наши дни любой человек может сделать свой собственный мультфильм. Анимационные программы упрощают и ускоряют этот процесс настолько, что даже один человек, не будучи аниматором, может сделать настоящий анимационный фильм.

С удовольствием поделюсь полученным мною опытом. Речь будет идти о 2D-анимации, но многие моменты равно применимы и к 3D. Кому будет интересно ссылка на сам мультфильм в конце поста.

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

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

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

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

Потребовалось мне допечатать на существующий лист бумаги немного текста и графики. Решил напросвет подогнать. Выставил масштаб 100%, прикладываю лист к экрану, а между тем, что на экране и на бумаге, разбег процентов на 20%.

Всегда всю анимацию делал в Adobe Animate CC. И тут все эти умирания флэша, множественные отпевания, песнопения, которые, наверняка, преувеличены. Но осадочек, как это бывает, остался. Остался в виде вопроса: А вообще есть ли что-то лучше для 2D-анимации, кроме адобовских решений? Не буду пересказывать как, но после множества инсталляций и «де», я пришёл к Toon Boom Harmony.

Если много читать лень, то Да. Ответ «Да». Я остался на Harmony и назад уже не хочу. Кому же интересно узнать почему и примерить узнанное под свои нужды, рекомендую читать дальше.

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

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

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

RoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на <canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?

Немного истории

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

Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.

В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.

Моя игра Dragons Abound создаёт карты в векторном графическом формате SVG. Векторная графика имеет множество особенностей (например, зум без потерь), что удобно для карт. Также векторная графика хороша для создания чётких линий, например, чернильных контуров:


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


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

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

Несколько месяцев в свободное время занимался разработкой нового формата изображений.

Акценты сделаны на:
1. Сжатие без потерь
2. Хорошая векторизация одноцветных объектов
3. Более быстрое ДЕкодирование, чем у других форматов
4. Несколько шаблонов кодирования при едином шаблоне декодирования в зависимости от того, что нужно 1, 2, 3 или что-то среднее
5. Сжатие любых векторных изображений (с потерями, но можно указать до какого масштаба необходима абсолютная точность)
6. Стилизация (главным образом для придания уникальности изображению + видеоэффекты и т.д.)
7. Также возможна прогрессивность (отображение по ходу загрузки) при установке неполного сжатия или в 27% случаев
8. Имитация рисования изображения
9. Добавление возможностей с обратной совместимостью

А вот подробная презентация формата:

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

• Нужно нарисовать небольшую иконку? Это, безусловно, территория SVG.
• Нужно создать интерактивную браузерную игру? Тут, определённо, нужна технология canvas.

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

Субпиксельный рендеринг (вики)— способ увеличить видимое разрешение LCD или OLED дисплея путем рендеринга пикселей с учетом свойств экрана. Используется тот факт, что каждый пиксель экрана фактически состоит из отдельных красных, зеленых и синих субпикселей.

В посте я хочу рассказать о методе Haarmony LCD, который применяется в последних версиях freetype, и как его адаптировать для произвольных векторных изображений и конфигураций субпикселей.

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

Привет! Приглашаем вас на первый митап для дизайнеров в Авито. Он посвящён важным составляющим процесса и профессии в целом — «дизайн-атомам» (не путать с атомарным дизайном, описанным Брэдом Фростом). В первом выпуске — реальные кейсы не только и не столько об эстетике, сколько о том, как дизайн помог бизнесу и работе команды. Среди прочего, обсудим буквы, цвета и форму.

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

Встреча пройдёт 26 октября в 12:00. Регистрируйтесь сами и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию и видеотрансляцию митапа.

Обычно для рабочих утилит не требуется вменяемый UI, с кнопками, списками, окнами, поддержкой мыши и прочей мелочевкой, большинство рабочих «хотелок» можно упаковать в скрипты и иногда запускать их с параметром --help, и так будет даже правильней с точки зрения настройки и масштабирования. Все становится хуже, когда тулами начинают пользоваться не только команда разработки, но и сторонние люди. А они не всегда готовы вникать в стройные мысли, уложенные в строчки кода. И тогда приходится городить UI, а он у разработчиков выходит обычно простой, квадратный, функциональный и совсем скучный. Некоторое время назад я работал над небольшой системой управления вентиляцией/обогрева/камерами и еще того «что придумает вон тот дядечка в желтой каске» для подземной автостоянки.

Рендеринг текста: насколько сложным он может быть? Оказывается, невероятно сложным! Насколько мне известно, буквально ни одна система не выводит текст «идеально». Где-то лучше, где-то хуже.

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

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

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

Возможно, прозрачность не кажется какой-то интересной темой. Формат GIF, позволявший некоторым пикселям просвечивать сквозь фон, опубликован более 30 лет назад. Почти в каждом приложении для графического дизайна, выпущенном за последние два десятка лет, поддерживается создание полупрозрачного контента. Эти понятия давно перестали быть чем-то новым.

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

Скопировано с моего блога в целях создания еще одного русскоязычного источника информации по данной теме.

Здравствуйте! Когда я в процессе освоения программы Asymptote, происходившего по мере узнавания нюансов настройки этой прогры, описанных вот в этом хабе, полностью освоил обработку файлов .asy, в которых нет анимации, я, естественно, попер на анимацию.


К счастью, для этого в случае формата выхода .pdf ничего из описанных мной дополнительных прогр в хабе по приведенной мной выше ссылке после прогры ghostscript доустанавливать не нужно, а так бы еще черт знает сколько времени прокопался. Но я об этом тогда не знал, что многократно усложняло дело. Обработаешь файл wheel.asy и что? Ну, появлялось .pdf при обработке в TeXworks (см. данный по ссылке выше хаб) в одной папке с обрабатываемым файлом .asy, а при открытии в проводнике (см. тот же хаб) — в папке C:\Windows\System32. Ну и что? Анимации в нем не было и все тут, хоть ты тресни. А до анимации в Asymptote я научился делать анимации в tikz и pstricks. Так у меня с этим не получалось до тех пор, пока я из папки C:\Program Files\MiKTeX 2.9\tex\latex\animate не удалил файл animate.sty и не поставил на его место файл с таким же названием, скачанный позже. Вот он. Таким образом, зная, что этот