Recently I've been looking at Povray, pyprocessing, and cfdg (version 3.0) as tools for creating digital images. I have branched two separate blogs where I mainly explore jruby + processing and processing.py

Sunday, 11 January 2009

PShape SVG and Amaya

In the processing documentation states that PShape supports Inkscape (also free) and Adobe illustrator svg files, but I've found you can use Amaya as well!!!

If you fancy experimenting with SVG and don't want to use a SVG editor you could try Amaya W3C's very own 'free' web editor. If you are into bunsen burners and conical flasks, there are some nice preexisting shapes. Here's a many pointed star (I have removed the title element to prevent processing ide from complaining).
   1:<?xml version="1.0" encoding="utf-8"?>
2:<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4:<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
5: version="1.1">
6: <g style="stroke: none; stroke-opacity: 1; stroke-width: 1;fill:rgb(255, 0, 0)">
7: <polygon
8: points="97.975706,0 117.92089,67.456303 185.5904,48.246907 137.14411,99.248095 187.61469,148.24691 119.22323,131.79179 102.02429,200.00001 82.079113,132.5437 14.409602,151.75309 62.855888,100.75191 12.385308,51.753087 80.776775,68.208208 97.975706,0"/>
9: </g>
10:</svg>




Here is the processing code:

   1:size(200,200);
2:background(255);
3:smooth();
4:PShape star;
5:star= loadShape("star.svg");
6:shape(star, 5, 5);


Heres the result:



Things to note fill is defined in the SVG file, you could specify stroke in the same way should you wish, the default way Amaya (and Inkscape for that matter) saves color is as as a 'web color' I have changed it to the more friendly rgb format. NB: the Amaya editor also supports bezier curves as well as basic rectangle, ellipse etc. Note you can "disableStyle()" if you want to only use processing to set fill etc... see below...

I've just had a bit of dabble with Inkscape, trying out the impressive 'trace' feature that enables the tracing of bitmaps. This is an example based on a photo I took when I used to windsurf.



Heres processing where I chose to overide the style from the svg (PS: remember to put your svg files in the data folder)

   1:size (150, 185);
2:PShape jump;
3:jump = loadShape("jump.svg");
4:jump.disableStyle();
5:background(115,115,255);
6:strokeWeight(1);
7:stroke(0);
8:fill(255,0,0);
9:shape(jump, 10, 10, 150, 185);
10:


One advantage of Amaya over Inkscape is the relative simplicity of the xml it produces, Inkscape has a somewhat complicated namespace, which is probably not needed for simple shapes. With a bit of knowledge it should be possible to draw some interesting shapes just using an editor, however Inkscape does have quite a friendly graphical interface. PS despite claimed compatibility with Inkscape the processing ide does complain about a number of elements in the svg, doesn't seem to matter though.

Revision as of 4 Feb 2009 I have updated my "processing.xml" jedit mode to include PShape, which is now correctly highlighted

No comments:

Post a Comment

Followers

Blog Archive

About Me

My photo
Pembrokeshire, United Kingdom
I have developed JRubyArt and propane new versions of ruby-processing for JRuby-9.1.5.0 and processing-3.2.2