Главная » Processing » Управляем файлами SVG в Processing

4

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

Приступим

Первое, что вам нужно сделать – создать файл SVG для скетча. Processing поддерживает SVG файлы, созданные в Adobe Illustrator и Inkscape. Inkscape – это открытый редактор векторных файлов, поэтому если у вас нет доступа к дорогой платной программе вроде Illustrator, это хороший вариант. Вы можете скачать его здесь: http://inkscape.org/.

Создайте новый скетч и сохраните его под именем manipulating_svg_files.pde. Файл SVG сохраните в папке data вашего скетча. Вы также можете сделать это, перетащив файл SVG в текстовый редактор Processing, точно так же, как вы делали это в примере с изображениями.

Как это делается

Начнем в объявления нескольких объектов класса PShape и загрузки их в функцию setup(). Переменная snowFlake будет использоваться для хранения вашего файла SVG, другие переменные будут хранить другие части главного файла SVG.

PShape snowFlake; PShape small1; PShape small2; PShape small3; PShape small4; PShape small5; PShape small6; PShape big1;

void setup()

{

size( 640, 480 );

smooth();

snowFlake = loadShape("snowflake.svg");

small1 = snowFlake.getChild("small1"); small2 = snowFlake.getChild("small2"); small3 = snowFlake.getChild("small3"); small4 = snowFlake.getChild("small4"); small5 = snowFlake.getChild("small5"); small6 = snowFlake.getChild("small6"); big1 = snowFlake.getChild("big1");

shapeMode( CENTER );

}

В функции draw() мы выведем на экране файл SVG с помощью функции shape():

void draw()

{

background( 255 );

// regular snowflake

shape( snowFlake, 160, 120 );

// distorted snowflake

shape( snowFlake, 480, 120, 160, 80 );

// orange snowflake snowFlake.disableStyle(); fill( 255, 128, 0 );

stroke( 255 );

strokeWeight( 2 );

shape( snowFlake, 160, 360 ); snowFlake.enableStyle();

// draw separate parts (colorful star) strokeWeight( 1 );

stroke( 0 ); small1.disableStyle();

fill( 151, 183, 189 );

shape( small1, 480, 360 ); small1.enableStyle(); small2.disableStyle(); fill( 216, 234, 237 );

shape( small2, 480, 360 ); small2.enableStyle();

small3.disableStyle(); fill( 151, 183, 189 );

shape( small3, 480, 360 ); small3.enableStyle();

small4.disableStyle(); fill( 216, 234, 237 );

shape( small4, 480, 360 ); small4.enableStyle();

small5.disableStyle(); fill( 151, 183, 189 );

shape( small5, 480, 360 ); small5.enableStyle();

small6.disableStyle(); fill( 108, 223, 234 );

shape( small6, 480, 360 ); small6.enableStyle();

strokeWeight( 2 ); big1.disableStyle(); fill( 251, 0, 95 );

stroke( 255 );

shape( big1, 480, 360 ); big1.enableStyle();

}

В результате вы увидите что-то похожее на этот скриншот:

Как это работает

Файл SVG является, по сути, файлом XML. Попробуйте открыть его в любом текстовом редакторе и посмотреть, как он выглядит.

Для загрузки в скетч файла SVG нужно перед функцией setup() объявить объект PShape. Дальше нужно загрузить файл в объект с помощью функции loadShape(). Вывести на экран файл SVG можно с помощью функции shape(). Первый параметр этой функции это ссылка на ваш объект PShape, второй и третий это координаты x и y места, где вы хотите нарисовать фигуру. Четвертый и пятый параметры могут быть добавлены, если вы хотите изменить размер фигуры. Файлы SVG выводятся на экран со своими собственными параметрами, но вы можете изменить цвет объекта PShape с помощью метода disableStyle() и функций fill() и stroke() из Processing. Убедитесь, что вы примили метод enableStyle() после завершения изменений. В этом примере для доступа к разным фигурам из загруженного SVG файла мы использовали метод getChild(). Для этого нам понадобилось использовать атрибут id из фигуры, содержащейся в файле SVG. В нашем примере строка small4 = snowFlake.getChild("small4"); получает строку xml, начинающуюся с <path id="small4" ….

Дополнительно

К сожалению, полная спецификация SVG не поддерживается Processing. Например, не работают диаграммы. Поэтому, если ваш файл SVG имеет свойства, которые Processing не поддерживает, Processing выдаст вам ошибку.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии

Комментариев 4

  1. Ай says:

    Уважаемый Вадик

    пробую овладеть Процессингом и повяляются вопросы …

    1. Скачивания с сайта производителя требует счета и оплаты
    когда люди дают такую простую инструкцию для детей типа возьми мороженое
    но не выдают им денег
    то фраза Скачайте Processing 2 для вашей операционной системы с сайта http:// processing.org/download/.
    становиться тупиком номер 1
    просто я видел почти мертвый сайт там Процессинг рекламируется для детей
    и вроде я тоже вначале повлся на элементарность …

    2. В инструкциях по адресу
    есть второй шаг установка Явы
    а потом мелким шрифтом как в банке не ниже версии 7.40 …
    это так программеры развлекаются самошифруясь

    3.Шаг инструкции там же в ангельском варианте пока лень
    искать концы хттп … но верить можно когда то бы и программером и переводчиком и сеач мастером …
    установить Апач Ант
    при чем не важно какой
    по логике Бин там 8 метров
    ладно закачал
    а Ант … SRC для развлечения или Ант в исхониках никогда школьнику не понадобиться ?
    хотел ребенку рекомендовать как видео среду – Процессинг
    но как то попал в Торможжжинг

    вы с антами что делаете ?

    4
    Парадокс в том что иногда не знаешь что стоит на компе 32 или 64 или 68
    пользуешь его как просто человек а не с уклоном в робототехническое железо ….

    как я по старинке понял это тип процессора на котром лежит ПО
    а то ставил Яву выкачал более 20 метров а там привет у вас не тот тип процессора
    я понимаю школьники должны знать какой бит в 0 или в 1 в 43 разряде справа в стеке …

    Ясно что это мой косяк уж тип процессорра знать стоит
    но разве Атом Интел инсайд …
    не достаточно
    на компе стоит ХР причем даже 2-я версия … как то машина упаоа а третья в зацикл ушла при инсталяции весело было :) точнее “:)”
    как уж она выпрыгнула из ХР Сп3 во вторую … не знаю
    чудеса как винда не стем номером и даже не с тем типом СП может встать на место
    пока не было претензий
    но думаю как полезу в дебри Процессинга все всплывет

    Переустановка Сп2 или она уже СП2,5 на СП-3 нужна для Процессинга ?

    5.
    в Форумах ангелских на Процесинг-2 чего только нет 3990 тем
    а вот Деволопинг Процессинга
    как то отсутствует все не значительные темы мелькают
    вашу ссылку нашел Гугля через Процкссинг и инсталляция …
    с одной стороны по русски проще но не более 20% от того что надо
    а по ангельски мозги надо под программинг перестраивать
    а они под жизнинг настроены …

    6. Мета задача для Процессинга это прорисовка музыки в графике
    и обратная задача возожна ?
    Графикув узку кто переделывал …

    Выбор процессинга шел по линии пакет ЖужУ
    был такой С++
    потом Топ спид Янсена и партнеров он ушел в Кларион и далее
    возможно Оберон серия
    стоит на их плечах как и многие не знают что и борлады и мелкософты нещадно ворвали у Ясена и партнеров все подряд особенно видны были концы по необрзанным билиотекам и исходникам
    далее Флаши что то уперлись красиво элегантно но как то сверх машинизировано и роботозализано не человечен он Флешь слишком Компово рисует и живет
    и попутно осматривалась визуализация на Математике 4,5 …а они уже до 9 версии допрыгали за 5 лет …
    Кстати именно Математика пока 4 рекомендована ребенку как наглядность в Матане
    какой матан бз наглядности вещь в себе заворот извилин
    а тут все распрямили и выыложили шапки конечно без нутра
    но уже приятно

    Не смотрели на сколько анимация на Математике способна переиграть Процессинг
    в части именно отображения музыки и светомузыки …

    И потом конечно все эти программеры писали как глухие
    и до сих пор пишут как шлухие
    жаль что встроенные процессоры музыки от Атари
    не стали встроенным пакетом СТАНДАРТА
    как математический сопроцессор или …

    Не победило железо программеров проиграли инженеры По-шникам

    А весело было бы смотреть на процеесор как на потранташ у ружья
    вот тебе патрон по астрономии вот тебе по астрологии надеюсь разницу с первой знаете
    вот тебе экспертаная медицинская система
    вот тебе АРМ типа Олимпиада
    а вот и МОНСТ инженерно гениальности АНСИС

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

    Первый всплеск в Атари в 1983 году ничему толком не научил мир программеров как были глухими так и остались

    а точ то есть крутые там платы под звук за 20.000 у.е это экзотика
    интеллект музыкальный если не приложен и звуковой алате а 5 у.е
    он и на 30.000 ничего не родит …

    наверняка Абельтоны писали не они а постановщики от ди джеев и миксеров для радио станций заставили их родить что то типа Абельтона
    минуя эволюции Финале Саунд Фордже и NI продукты
    но даже законченного интрумента всасывания МИДИ файлов и перенастройку их в потоках не сделали только и хватило задумок что на Банду в Коробочке …

    Ладно о постановщиках это отдельная Песня
    тут явно Джони Мнемоник Фон Нейман виноват
    не доделал стандарт установки уровня постанвшиков
    так и не сделал их отдельной профессиией
    как и серч мастеры не пошли они в жизнь .
    ..как отдельное окошечко куда сдают заказ
    и принимают очищенный от шума Хай Энд продукт…

    7.И две попутные штучки
    Ардуна
    ясно что железо крутое для видео приложений в Арт Дизаин …
    а имя его не Арджуна случайно (бог такой есть там в тепле )
    уж как то сильно Индией отдает не удивлюсь что МТИ там более 60% кодов заказывала или в МТИ какой нибудь РаннбидрантТагорович был в кодировщиках у главных герое 2000 годов ..

    Всё ладно извиняюсь за ширкую лирику за 30 лет касания заумного железа от Д3-28 до см1420 и через все пентиумное подмножество многие что накопилось

    Временнг забыли

    Привет Мир !

    Привет Процессинг !

    Как же они ненавидятС и С++
    фраза Привет Мир ! У них перекорежилась в привет LIne !
    ^:)
    да Лобачевский получился однако !

    • Vadik says:

      Аплодирую стоя :-) Шедевральный комент – легко написано (хотя и многовато) читал на одном дыхании, но помочь не чем. Писали бы статьи и хорошо зарабатывали ) С процесингом не работал, источник указан в конце статьи.

    • Vadik says:

      Если у Вас Windows XP ставьте последний третий сервис пак, без него многие программы не устанавливаются.

  2. Ai says:

    220414
    день рождения великого злого гения – Ленина
    курчавого мальчика
    внутри значка
    на груди у каждого ребенка старше 7 лет

    День добрый Вадик

    могу укоротить но афористичность текста
    может и не повыситься :)
    нужна минимальная площадка для раскрутки и взлета

    Решения получились такие :
    взял пошел в лавку прог
    и добыл давно не-любимую мной W7 за 3 у.е.

    как купил 4 года назад 2 машинки с интелами инсайд
    сразу снес напроч тогда дыряво горбатую W7
    за 5 лет как и полагается её вылизали

    поставил её на 2-х ядерный ИСУС
    великого Тайваньско-Китайского народа …

    сверху вставил Процесинг 2.1.1 под x64
    из за чего и изменил старенькой W_XP
    точнее установил w7 на диск D: – любовницей :)

    графика пошла сразу на 40%
    но из 2Д не пускает в 3Д

    да – надо подключать библиотеки

    нельзя же за 4 часа полета
    сразу переходить в сверх звук

    отборал из более чем 200 встроенных примеров
    всего то 13-20 !

    под свои задачи для светомузыки
    более 80% оказались не значимы с точки зрения красоты форм и перспектив графики

    и вообще только сейчас понял
    по давнему анализу плей машинок типа Маннкей
    или визуализаций для WINAMP

    что их графика слабее на 60% моей
    в части требований на красоту и эффективность

    … даже без синхронизации балетов

    заметили что в балете нет синхронизации музыки и движения (хотя это суть сутей балета ! )
    попыток много но только в 8% ЭТО совпадает

    как то видел в Мариинке отмучивание кардебалета
    вот там они попали в такт на 50%
    вот это был БАЛЕТ
    вообще об усталость балета от себя
    и от его давней старости спросите у Цискаридце :)

    не хотят они учиться у индийских танцовщиц ,
    что пападают в так музыки на 60%
    те говорят телом
    а эти только показывают тело ….

    теперь нашел куски по подключению библиотек
    Minim minim; AudioInput in;

    когда вы берете куски из Великих Голландцев от Prоcessinga то давайте ссылку
    вот мол там то она и там
    http /// трам там там …

    а то начинающие и дети
    это не сеарч-мастер с 15 летним стажем
    вынимания всего из ничего

    и ребенку будет не легко войти в мир звука на Processinge
    первое что мне понравилось что как Атрий озвучило процессинг это спектроанализатор он зарядил музыку
    и машинка под Processing-om заиграла музыку !
    Чудо !
    В сути элементарность при отличии от монстров нынешних p-5 p-6 машинок от 286 ! Точнее звук в Атари был на 186 машинке , а потом перешел на 286 … вспомните на чем писал великий Нейман
    на 4 к ОЗУ !

    … сам много писал и пишу мызык на разных миди игрушках
    Абельтоны не освоил это как Буран запустить они для тяжелой программной артеллерии
    а вот Банды в Коробочке …. и Натив Инструменты всех типов рекомендую всем вариативность

    хотя свою первую вещь сделал на Finale 2002!…
    удивительно было слышать свою музыку не хуже тех что написаны вокруг
    идешь с плеером … в ушах своя музыка – хорошо !

    и на счет детей
    к юзерам надо относиться именно как к 5 летнему ребенку
    и писать свои статьи и тексты как ОГилви – всё для уровня детей

    тогда и самый крутой программер не будет тратить часы и дни на прохождение вских программных грабель :)

    Такое у меня сейчас вот мнение сложилось о процессинге …

    многие говорят что это недоделанный Визуал-С
    переделанная Ява
    или недоурожденный Оберон

    именно с детской позиции можно сказать так:
    не важно как и кто то пиннет Процессинг …

    пусть мы назовем его удачной простой надстройкой над С++ над TOp Speed или даже над его величеством Ассемблером

    важно что Процессинг управляем … даже детьми !

    Потребовалось не менее 30 лет эволюции Программинга
    чтобы эти редиски наконец повернулись лицом к людям
    а не стали писать что то непонятное для самих себя и в самих себе … постоянно бормоча на своем сумашедшем языке …

    как говорил Курт Воннегут … осталось чтобы программеры начали болтать на прото язке в автокодах и кататься по полу с пеной у рта от эйфорического кайфа со своими замкнутыми на себя программами …

    дословно у Курта : моя младшенькая стала кататься по полу и викрикивать фразы на древнем прото языке от которого у всех волосы встали дыбом …

    думаю стоило многим прожить в программах (точнее без них) более 20 лет чтобы дождаться конца этого мозгового приступа эпилепсии у программистов …

    Уважаю
    Ай …

    О сути :

    1.
    следующий мой этап будет освоение
    визуализации библиотек МИДи
    ЭТО СДЕЛАНО В ПРОЦЕССИНГЕ здесь:
    http://processing.org/discourse/beta/num_1227841230.html

    а мимикрия здесь :)
    http://www.softpedia.com/dyn-postdownload.php?p=163329&t=3&i=1
    кто знает может подделка лучше оригинала ! :)

    дарю всем музыкантам и любителям музыки
    МиДи как и ассемблер – бессмертны !

    … а то у меня горы МиДи написаны
    без видео музыки .

    2.
    вторая часть это переделка алгоритмов
    встроенных в WINAMP и визуализаторы типа Moonkey
    там лежат до 50-60 красот
    из 2 миллионов скаченных версий !
    вернулось до 600 алгоритмов
    из них только 20 – 30 достойны
    быть переведенными в Processing

    3. Очень важны АЛГОРИТМЫ

    а не практическая реализация кодов
    сколько хорошего может и уже дал FLash
    для Processing-а
    но они говорят на разных мета языках
    хотя работают все в автокодах …

    PS

    ИТОГО : как в бухгалтерии по Процессингу

    думаю лет через 10 -30 появиться
    ОТКРЫТЫЙ мега язык с именем – Вавилон

    почему нет, ведь опять начнут строить вавилонские башни это факт Япония уже строит дома с гироскопами внутри здания на всю длину в 20-30 этажей !
    и только на высоте 100 метров можно спастить от нового Потопа с волной до 50 метров …
    трясите своих мэров …

    … Язык Вавилон …
    который поглотит своим простым текстом все программистские бреды и откровения и наконец
    сведет их в одну непротиворечивую команду

    пока что ныне воюющюю в режиме все против всех
    за мои и выши любимые денющки и баксы … :)

    и тогда войны мелкософта и ДР-Дос-а
    мазиллы и эксплоуэра
    PDF и ДеЖяВю …
    уйдут в забытие

    и важно что будет свободное передвижение кодов – программ – библиотек на развитие человека

    как ныне происходит с Processing или OpenGL в отличии от вечно закрытого хищника – мелкософта

    а не на паразитировании в 40% на людях программеров

    если скажете что я жестко их долблю, то знаю – жестко и за дело
    уж мне наблюдающего все это … сообщество
    с Д3-28 и “Texas Instrumrnts -10.000″ в Спектрометрах от незабвенной и удивительной фирмы Bruker 1975 годов
    … и из нутря и из вне
    хватит знаний оценить на сколько велик и ничтожен мир Программиста .

    Чтобы не заканчивать на “светлой” печали…

    Предлагаю мини игру :
    Найдите кусочек из Кевина Келли 1997 года …
    Новая Сете-Экономика

    но не отполированного Келли 2002 -2008 годов
    а того что предлагал Накормить сеть …

    Думаю многие прошли мимо этого величайшего мыслителя
    и сам они сильно изменился всего за 5 лет …

    людей быстро меняет слава и деньги
    хочешь чтобы человек отупел – откорми его и дай ему зрелишь … :)

    да и сам он не понял ЧТО СКАЗАЛ !
    скзал не он – сказало ОНО .

    Его устами сказала – Сеть !

    из 12 его правил я пока дозрел до 2-х ! :)

    Можете так и назвать статью …

    “Его устами сказала – Сеть !”

    и вставить попутно мою прорезку если захотите
    я права даю свободно
    но не коды :) !

    Уважаю
    Ай.

    не удалось уложиться в пол листа
    но и более трех не написал
    в свое время при живом финансировании бизнес планов
    изучал мышление чиновников
    пришел к выводу текст длиннее 40 строк вносит или иногда вышибает чиновничий мозг – напрочь!

    Так что прося у них что то, а особенно – деньги
    не вздумайте не уложиться в более 20 -25 строк
    и написать больше 40 строк !

    Уважаемый Вадик
    копии текста писем если что на at-e@yandex.ru
    а то ваш ответ мне увидел случайно
    в поиске билиотек для звука