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

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

SVG и компания

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

Изучаем программирование шейдеров с Риком и Морти

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

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

Читать далее

Новости

Работа с Чертежником в Кумире

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

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

Читать далее

SVG-виджеты для tcl/tk. Финальный аккорд. Часть IV

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

Реализация проекта «SVG-виджеты для tckl/tk» позволяет устранить одну из главных претензий, предъявляемых к графическому интерфейсу приложений, разрабатываемых с использованием tk - устаревший дизайн виджетов. Переход от классических виджетов к svg-виджетам не требует больших усилий. В этом лично я убедился, переписав gui утилиты для работы с электронной подписью cryptoarmpkcs. Ее дистрибутивы под именем cryptoarmpkcs_svg для платформ Linux64 и Windows64 можно найти в проекте:

Читать далее

Разработка специализированного графика для отображения ЭКГ с использованием Canvas на платформе .NET for Android

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

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

Читать далее

Истории

Глассморфизм и SVG

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

Всем привет. Я Андрей Осипов, фронтендер из Контура. Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass).

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

Читать далее

Полезные рецепты ручного создания SVG

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



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


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


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

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

Как мы делаем Автограф — «русское Visio»

Время на прочтение6 мин
Количество просмотров23K
image
Самая первая инженерная версия редактора, не самая удобная для конечных пользователей

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

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

Сейчас мы замещаем Visio в России и поддерживаем VSD/VSDX-форматы в обе стороны.

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

Сильно упрощая, каждая схема и в нашем движке, и в движке Visio состоит из векторных элементов. Пользователь перемещает окно с полем зрения по схеме, и для этого места идёт рендер — рисуются только те элементы, которые видно. Для каждого масштаба делается пререндер этого вектора с разной детализацией, то есть пользователь каждый момент времени работает со всего одной группой SVG-элементов. Всё остальное только кажется схемой из деталей, на самом деле — это единая отрендеренная большая картинка.
Читать дальше →

Автоматизация проектирования в комплексе BIM Конструкции и Металлоконструкции

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

Рассмотрим в статье некоторые возможности программ BIM Конструкции и Металлоконструкции на примере армирования ростверка, получения спецификаций и чертежей.

Читать далее

Использование данных лазерного сканирования для получения 3D –модели генплана в nanoCAD GeoniCS

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

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

Для реализации поставленной задачи был выполнен  пилотный проект, цель которого  ̶  получить 3D-модель генерального плана по данным лазерного сканирования. В качестве исходных данных выступило облако точек, а в качестве выходной информации  ̶  трехмерная модель генплана.

Читать далее

Графический дизайн для детей: обзор обучающей программы

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

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

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

Читать далее

SVG-виджеты для tcl/tk. Поддержка SVG-файлов. Часть III

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

Вот и наступил тот момент, когда стало возможным при разработке gui на tcl/tk простое использование в качестве иконок графических изображений, хранящихся в svg-файлах:

Читать далее

Какой графический редактор выбрать, если не умеешь рисовать?

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

Всем привет, меня зовут Егор. Сейчас я занимаюсь сольной разработкой игр. И так как я не являюсь профессиональным художником, для меня как никогда актуален вопрос: каким инструментом пользоваться для создания арта. Конечно, никто не отменял Asset Store и приобретение необходимых графических ассетов именно там, но не всегда можно с лёгкостью найти подходящий арт для проекта на таких площадках, и приходится создавать его самому.

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

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

Читать далее

Сравнение Recraft и Adobe Illustrator

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

У Адоба обновились генеративные инструменты, а в Иллюстраторе даже появились новые. Я решила провести полноценное сравнение с другой, полюбившейся многим векторной нейронкой, Рекрафтом.

Содержание:

1. Генерация простого лайна
2. Генерация заполнения этого лайна
3. Создание серии в едином стиле
4. Логотипы
5. Паттерны
6. Мокапы
7. Лицензии
8. Доп.комментарии и Итоги

Читать далее

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

25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань
20 – 22 июня
Летняя айти-тусовка Summer Merge
Ульяновская область

Интерполяция: рисуем плавные графики с помощью кривых Безье. Версия 2

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

Доброго времени суток, харбачитатель.

Так начинается статья, которая представляет сообществу первый, опубликованный здесь, алгоритм интерполяции:

Читать далее

Использование Manim + Python для визуализации. Перестановка (комбинаторика)

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

Несмотря на то, что математика сегодня — это глубокий андерграунд, работы 3Blue1Brown вдохновляют и пробуждают внутри что‑то из далёкого детства, где весь мир был непостижимой игровой площадкой, а из кислого были только муравьиные жопки. Чтобы хоть немного прикоснуться к прекрасному, мною была сделана попытка визуализировать простую формулу из комбинаторики. Делюсь опытом.

Читать далее

Rive-анимация для Flutter-приложений: почему мы любим ее больше Lottie, когда ее применять и какие фишки использовать

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

Привет! Меня зовут Никита Грибков, я Flutter-разработчик в AGIMA. Расскажу вам про возможности Rive — фреймворка, который использует векторную графику для создания анимации во Flutter-приложениях. Эта статья выросла из небольшого поста на Хабре, в котором я коротко описал опыт работы над кнопкой для Bottom Bar в своем пет-проекте. Здесь же я уже подробно опишу, как анимировать элементы и чем вообще хорош Rive.

Читать далее

SVG-виджеты для tcl/tk. Градиентная заливка и прозрачность. Часть II

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

Продолжим знакомство с svg-виджетами для tcl/tk. Напомним, что рассматриваемые примеры, сам пакет svgwidgets и интерпретаторы tcl/tk с необходимыми пакетами можно найти на github-е. После выхода первой статьи все они претерпели изменения. Начнем мы статью с примера скрипт_button_PACK.tcl:

$/usr/local/bin64/tclexecomp140_svg_Linux64 скрипт_button_PACK.tcl

Читать далее

Что такое трассировка лучей, как она устроена и так ли нужна на самом деле

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

Что самое главное в изображении? Конечно, его качество. Чем ближе к реальности выглядит объект на картинке, тем визуально привлекательнее он нам кажется. Во многом на восприятие изображения влияет освещение и затенение, которого в компьютерной графике помогает добиться трассировка лучей. О ней мы сегодня и поговорим.

Читать далее

Анатомия игры: Локации. часть 2

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


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

Демо City In A Bottle – система рейкастинга в 256 байтах

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

Привет всем любителям size coding, сегодня я расскажу о чём-то потрясающем: крошечном движке трассировки лучей (raycasting) и генераторе города, умещающихся в автономном файле HTML размером 256 байтов.

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

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

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

Читать далее
1
23 ...

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