Check out this thread.

Perhaps you need to invert the working in your case from inside-to-outside to get the desired results.

But it should give you a pretty good start.

You can use the random() or noise() functions for generative works.

Thank you very much Amnon!

I'm having trouble inverting the circles! can't seem to find the line of code that would do it, although then I would guess you'd have to tell it to generate circles 'outside' rather than inside.

The magic happens in the generateRadiusPoints() function. Change the settings and code to achieve the effect you're after. In the sketch below, when you press spacebar, you can toggle the display of the points which gives some insight in how it works. Another way to better understand it is to replace the variables by the numbers for the time being. It's highly parameterized now, which makes it very flexible, but perhaps not so easy to grasp.

p.s. if you want to use fill you will need to draw the shapes in reverse order for them to be visible.

Code Example

1. int numberOfCircles = 11;
2. int numberOfPoints = 8;
3. int distanceBetweenCircles = 50;
4. boolean showPoints;
5. int pointSize = 8;
6.  
7. int[][] radiusPoint = new int[numberOfCircles][numberOfPoints];
8. void setup() {
9.   size(800,800);
10.   smooth();
11.   curveTightness(-0.3);
12.   noFill();
13. }
14.  
15. void draw() {
16.   background(255);
17.   translate(width/2,height/2);
18.   generateRadiusPoints();
19.  
20.   for (int i=0; i<numberOfCircles; i++) {
21.     beginShape();
22.     for (int j=0; j<numberOfPoints+3; j++) {
23.       if (j < numberOfPoints) {
24.         int rPoint = radiusPoint[i][j];
25.         curveVertex(sin((TWO_PI/numberOfPoints)*j)*rPoint,cos((TWO_PI/numberOfPoints)*j)*rPoint);
26.         if (showPoints) { ellipse(sin((TWO_PI/numberOfPoints)*j)*rPoint,cos((TWO_PI/numberOfPoints)*j)*rPoint,pointSize,pointSize); }
27.       } else {
28.         int rPoint = radiusPoint[i][(j-numberOfPoints)];
29.         curveVertex(sin((TWO_PI/numberOfPoints)*(j-numberOfPoints))*rPoint,
30.         cos((TWO_PI/numberOfPoints)*(j-numberOfPoints))*rPoint);
31.         if (showPoints) { ellipse(sin((TWO_PI/numberOfPoints)*(j-numberOfPoints))*rPoint,
32.         cos((TWO_PI/numberOfPoints)*(j-numberOfPoints))*rPoint,pointSize,pointSize); }
33.       }
34.     }
35.     endShape();
36.   }
37. }
38.  
39. void generateRadiusPoints() {
40.   for (int i=0; i<numberOfCircles; i++) {
41.     for (int j=0; j<numberOfPoints; j++) {
42.         radiusPoint[i][j] = int(noise(frameCount*0.005,j)*distanceBetweenCircles*i);
43.     }
44.   }
45. }
46.  
47. void keyPressed() {
48.   if (key == ' ') {
49.     showPoints = !showPoints;
50.   }
51. }

thanks Amnon!

When you randomly create lines between these points, you might end up with a 'same-side-line' on either the left or the right side. So your program has to account for this. See the example below. Press spacebar to generate new random lines.

Code Example

1. ArrayList <PVector> originals = new ArrayList <PVector> ();
2. ArrayList <PVector> lines = new ArrayList <PVector> ();
3.  
4. void setup() {
5.   size(600, 600);
6.   addPoints();
7.   generateLines();
8.   rectMode(CORNERS);
9.   smooth();
10. }
11.  
12. void draw() {
13.   background(255);
14.  
15.   // show rect
16.   noFill();
17.   stroke(0);
18.   rect(width/3, 100, 2*width/3, height-100);
19.  
20.   // show lines
21.   noFill();
22.   stroke(0);
23.   for (int i=0; i<lines.size(); i+=2) {
24.     PVector p = lines.get(i);
25.     PVector n = lines.get(i+1);
26.     line(p.x, p.y, n.x, n.y);
27.   }
28.  
29.   // show points
30.   fill(0);
31.   noStroke();
32.   for (int i=0; i<originals.size(); i++) {
33.     PVector p = originals.get(i);
34.     ellipse(p.x, p.y, 10, 10);
35.   }
36. }
37.  
38. void keyPressed() {
39.   if (key == ' ') {
40.     generateLines();
41.   }
42. }
43.  
44. void addPoints() {
45.   // PVector = x, y, side
46.   originals.add(new PVector(width/2, 100, 0));
47.   originals.add(new PVector(2*width/3, height/3, 1));
48.   originals.add(new PVector(2*width/3, 2*height/3, 1));
49.   originals.add(new PVector(width/2, height-100, 2));
50.   originals.add(new PVector(width/3, 2*height/3, 3));
51.   originals.add(new PVector(width/3, height/3, 3));
52. }
53.  
54. void generateLines() {
55.   // clear lines
56.   lines.clear();
57.  
58.   // make copy of the original points
59.   ArrayList <PVector> basket = (ArrayList <PVector>) originals.clone();
60.  
61.   // solve 2 lines
62.   for (int i=0; i<originals.size()/2-1; i++) {
63.     // start with random point from remaining points
64.     int selectOrigin = int(random(basket.size()));
65.     // check it's side
66.     int originSide = int(basket.get(selectOrigin).z);
67.     int destinationSide = originSide;
68.     int selectDestination = -1;
69.     // find a point that is not lying on the same side
70.     while (destinationSide == originSide) {
71.       selectDestination = int(random(basket.size()));
72.       destinationSide = int(basket.get(selectDestination).z);
73.     }
74.     // add the two points (aka line)
75.     lines.add(basket.get(selectOrigin));
76.     lines.add(basket.get(selectDestination));
77.     // remove them from the basket correctly
78.     if (selectOrigin > selectDestination) {
79.       basket.remove(selectOrigin);
80.       basket.remove(selectDestination);
81.     } else {
82.       basket.remove(selectDestination);
83.       basket.remove(selectOrigin);
84.     }
85.   }
86.  
87.   // check if the last line is a 'same-side-line'
88.   if (basket.get(0).z == basket.get(1).z) {
89.     // if it is, start again
90.     generateLines();
91.   } else {
92.     // if it is not, add the last line... done!
93.     lines.add(basket.get(0));
94.     lines.add(basket.get(1));
95.   }
96. }