Draw the SVG to a PGraphics buffer. Then use the color in the buffer to incrementally place the ellipses.

Thanks for the reply and sorry in advance if I don't understand everything as I am in the very beginning.

May I ask a few questions?

Why do I need to use a PGraphics for this purpose? (I admit I haven't yet understood the use of PGraphics)

I've just drawn my SVG shape but I'd like the ellipses not to overflow the shape and I'd like the SVG shape to be invisible.

How can I do this?

Here is the code for the moment if you've got some time to look and comment if possible:

1. PGraphics buffer;
2. PShape star;
3. void setup() {
4.   size(500, 500);
5.   buffer = createGraphics(width, height, JAVA2D);
6.   star = loadShape("shape.svg");
7.   smooth();
8.   buffer.beginDraw();
9.   buffer.background(255);
10.   buffer.shape(star, width/2, height/2, 300, 300);
11.   buffer.endDraw();
12.   image(buffer, 0, 0);
13.   for (int j = 0; j < height; j+=20) {
14.     for (int i = 0; i < width; i+=20) {
15.       if (hex(get(i, j)).equals("FFFFFF00")) {
16.         ellipse(i, j, 20, 20);
17.       }
18.     }
19.   } 
20. }

The idea of a black and white buffer is to use it to see if a new ellipse (or any other shape) can be drawn without flowing over the given area or touching other shapes. To put this in practice you start with a fully white buffer (nothing may be drawn). Then you draw a fully black shape from your svg (disable the actual colors, make it black). Now you have a buffer that allows some new shapes. Then you need a function that can give you an answer if a new shape can be drawn depending on the shape (in this case a circle of a certain radius) and the buffer. You need a buffer, because your buffer will start to fill with shapes incrementally leaving less and less space for shapes. So it's not only checking if a shape is inside the svg, but also considering already drawn shapes. Only in the uncommon occasion that you want your final output to look like the buffer, you wouldn't need to separate things. In most cases it is more convenient to keep these things (output, buffer, svg) separate, but feel free to choose the solution that fits your intentions best.

Press any key to cycle through the three different screens in this example:

1. final output
2. black and white buffer
3. original svg.

Code Example

1. String url = "http://openclipart.org/people/mightyman/win7_wifi.svg";
2. PGraphics buffer, output;
3. PShape svg;
4. int diam = 20; // set the diameter of the circles
5. int currentScreen;
6.  
7. void setup() {
8.   size(500, 500);
9.   createBuffer();
10.   // stepSize of 1 gives the highest density
11.   // stepSize of diam gives 'perfect fit'
12.   // stepsize > diam gives space between circles
13.   createOutput(diam+1);
14.   fill(0);
15. }
16.  
17. void draw() {
18.   background(255);
19.   switch(currentScreen) {
20.     case 0: image(output, 0, 0); text("output", 10, 20); break;
21.     case 1: image(buffer, 0, 0); text("buffer", 10, 20); break;
22.     case 2: shape(svg, 100, 100, width-200, height-200); text("svg", 10, 20); break;
23.   }
24. }
25.  
26. void keyPressed() {
27.   currentScreen = (currentScreen+1)%3;
28. }
29.  
30. void createBuffer() {
31.   svg = loadShape(url);
32.   svg.disableStyle();
33.   buffer = createGraphics(width, height, JAVA2D);
34.   buffer.beginDraw();
35.   buffer.background(255);
36.   buffer.fill(0);
37.   buffer.stroke(0);
38.   buffer.shape(svg, 100, 100, width-200, height-200);
39.   buffer.noStroke();
40.   buffer.fill(255);
41.   buffer.smooth();
42.   buffer.endDraw();
43.   svg.enableStyle();
44. }
45.  
46. void createOutput(int stepSize) {
47.   output = createGraphics(width, height, JAVA2D);
48.   output.beginDraw();
49.   output.background(255);
50.   output.smooth();
51.   output.noStroke();
52.   for (int y=0; y<output.height; y+=stepSize) {
53.     for (int x=0; x<output.width; x+=stepSize) {
54.       if (ellipsePossible(x, y, diam/2)) {
55.         output.fill(random(200), random(200), random(200));
56.         output.ellipse(x, y, diam, diam);
57.         buffer.beginDraw();
58.         buffer.ellipse(x, y, diam, diam);
59.         buffer.endDraw();
60.       }
61.     }
62.   }
63.   output.endDraw();
64. }
65.  
66. boolean ellipsePossible(int x, int y, int radius) {
67.   if (x-radius < 0 || x+radius > buffer.width || y-radius < 0 || y+radius > buffer.width) {
68.     return false;
69.   } else {
70.     for (int i=x-radius; i<x+radius; i++) {
71.       for (int j=y-radius; j<y+radius; j++) {
72.         if (dist(i, j, x, y) <= radius) {
73.           int index = i + j*buffer.width;
74.           if (buffer.pixels[index] == -1) {
75.             return false;
76.           }
77.         }
78.       }
79.     }
80.     return true;
81.   }
82. }

Wow, what a reply! Thanks a lot!

If I understand well, two aims of using a PGraphics seem
- to store the SVG shape without displaying it, as in the output example
- and to draw it first, then adding elements to it as in the buffer example

It's a nice, pedagogical example :))

I tried something to test if the ellipse was possible. I did it before reading your message. It consisted in looking at the color values of different points being on a circle radius. But I prefer what you did :)

(again wow)