Can you simply draw the big circle with one color and the inner circle with the color of the background to mimic the hole? pjs allows you to mix javascript right inside with the processing code, so if you can find a library to do it, go for it. It'll probably be for a <canvas> element instead of directly for Processing. There are some other methods but it'll be more involved.

http://sketchpad.cc/ity8DZlC6t

I think there's no way to subtract an object from a big one.

Other idea:

Did you try to draw the outer circle and then (in a for-loop) again with a slightly smaller radius and so on and stop after 12 times,,,

Thus you would get a thick ring with nothing in the middle    o

then change your code and diminish not only the radius but also have a small offset to the center (x or y or both), but maybe only each 5th time you draw a cirlce (or have the offset with a factor 0.02).

Thus you would have a filling effect with offset.

I didn't test it...

OR

Draw your two thin circles without filling them and use a flood fill algorithm between them.

http://en.wikipedia.org/wiki/Flood_fill

too slow maybe...


Greetings, Chrisir

Gaps between segments of a Shape are hard to solve (you might try to draw the shape using curveVertex and/or bezierVertex() to decrease the number of gaps). Semi-transparency and zooming in will only increase the visibility. I tested if an svg exported from illustrator did not show any gaps. And in fact it did not! So you could further investigate the SVG-route, perhaps by subclassing Processing's PShape and manipulating the svg-coordinates within Processing.

Code Example

1. PShape s;
2. int sScale = 500;
3.  
4. void setup() {
5.   size(500, 500);
6.   s = loadShape("test.svg");
7.   s.disableStyle();
8.   shapeMode(CENTER);
9.   smooth();
10. }
11.  
12. void draw() {
13.   background(0);
14.   noStroke();
15.   fill(255, 0, 0, 125);
16.   shape(s, mouseX, mouseY, sScale, sScale);
17.   sScale+=10;
18. }

Hey Amnon,

All right, let me elaborate...

Changing the color and transparency is very easy. You can do it like in the code example I posted before. Use disableStyle on the PShape, then you can use Processing's regular fill and stroke commands on the shape.

Changing the coordinates is much harder. There are no functions to directly control coordinates. There is a way to distinguish children, but I don't think that is of much use here (it is useful when you for example have an SVG map where each country is a child and can thus be given a different color etc.). The svg shape is loaded through XML. Unfortunately the built-in XML functionality in Processing is limited / read-only. But maybe a workaround is to make XML from Strings, so it goes like this: Strings > XML > SVG > PShape. Then manipulating the Strings (which can be easily done in Processing) will create a different PShape at the end. Below are all those basic steps in a code example. Note how the end-result is the same as the example I posted above, however the route is somewhat different (in front instead of behind the scenes), which opens a world of possibilities...

Proof-of-Concept Code Example

1. PShapeSVG s;
2. int sScale = 500;
3.  
4. void setup() {
5.   size(500, 500);
6.   // 1. String array of all the lines in a text file (tweak these Strings to manipulate the end-shape)
   
7.   String[] lines = loadStrings("test.svg");
8.   // 2. Join all lines into a single String
9.   String xmlString = join(lines, " ");
10.   // 3. Parse the String into an XML element
11.   XMLElement xml = XMLElement.parse(xmlString);
12.   // 4. Initialize the PShapeSVG object from an XML
13.   s = new PShapeSVG(xml);
14.   // From here onwards it's a PShape as usual...
15.   // disable the style, so you can use P5's  fill/stroke
16.   s.disableStyle();
17.   // center the PShape (on the mouse in the code below)
18.   shapeMode(CENTER);
19.   // turn on smooth
20.   smooth();
21. }
22.  
23. void draw() {
24.   background(0);
25.   // turn off stroke for the PShape
26.   noStroke();
27.   // red transparent fill for the PShape
28.   fill(255, 0, 0, 125);
29.   shape(s, mouseX, mouseY, sScale, sScale);
30.   // increase scale of the PShape
31.   sScale+=10;
32. }

To Amnon,

You can separate for example the layers that you have in Illustrator as different children. Suppose you have two layers in Illustrator called "Layer 1" and "Layer 2". Then you can access these as separate PShapes in Processing by using:

1.   PShape child = s.getChild("Layer 1"); // or "Layer 2"

Then you can have different drawing styles per child. See the example: Basics > Shape > GetChild

On a sidenote, when you look at the svg file in notepad, you can recognise this name as <g id="Layer_1">

PShape is one of the classes that is said to undergo changes working towards Processing 2.0. Under this fair warning, you could experiment with some of these functions that are not documented in the main reference.

Thanks amnon, I appreciate it