Dear all interested readers,


I'm currently making a sketch to draw your own galaxy's and connect the planets and stars. I was able to hack together the next sketch that draws what I have in mind;

1. ArrayList<CircleSet> allCircles; // holds all circleSets
   int maxDistance = 100;  //max distance between circles when drawing lines
   
   void setup()
   {
     size(1024, 768);  //size of window
     smooth();  //draw circles with anti-aliased edge
   
     allCircles = new ArrayList<CircleSet>();
   }
   
   void mousePressed()
   {
   
   
     allCircles.add(new CircleSet());
   }
   
   void draw()
   {
     background(0, 0, 25);
   
     if (allCircles.size()>3) {
       allCircles.remove(0);
     }
     // update all circleSets
     for (int i=0; i< allCircles.size(); i++)
     {
       allCircles.get(i).update();
     }
     // display all circleSets
     for (int i=0; i< allCircles.size(); i++)
     {
       allCircles.get(i).display();
     }
   }
   
   
   class CircleSet {
     ArrayList<Circle> circles;
   
     CircleSet() {
       circles = new ArrayList<Circle>();
       createCircles();
     }
   
     void createCircles()
     {
       int[] colors = new color[5];
   
       colors[0] = color(255, 206, 0, random(100, 255)); //yellow
       colors[1] = color(255, random(100, 255)); // white
       colors[2] = color(0, 58, 142, random(100, 255)); //blue
       colors[3] = color(226, 0, 0, random(100, 255)); //red
       colors[4] = color(73, 73, 73, random(100, 255)); //black(gray)
   
       int numCircles = int(random(1, 13));
   
       for (int i=0; i<numCircles; i++)
       {
         float randomAngle = random(0, TWO_PI);
         float randomRadius = random(20, 100);
         float circleX = mouseX + cos(randomAngle) * randomRadius;
         float circleY = (mouseY + sin(randomAngle) * randomRadius);
   
         int indexColors = int(random(colors.length));
   
         circles.add(new Circle(circleX, circleY, random(5, 15), colors[indexColors]));
       }
     }
   
   
   
     void update() {
       for (int i =0; i< circles.size(); i++) {
         circles.get(i).update();
       }
     }
   
     void display() {
       for (int i =0; i< circles.size(); i++) {
         // draw circle
         circles.get(i).display();
   
         stroke(255, 130);
         strokeWeight(0.5);
   
         for (int j=i+1; j< circles.size(); j++)
         {
           Circle c1 = circles.get(i);
           Circle c2 = circles.get(j);
   
           if (dist(c1.x, c1.y, c2.x, c2.y) < maxDistance)
           {
             line(c1.x, c1.y, c2.x, c2.y);
           }
         }
       }
     }
   }
   
   class Circle {
     float x, y, dia;
     color col;
   
     Circle(float x, float y, float dia, color col) {
       this.x =x;
       this.y =y;
       this.dia = dia;
       this.col = col;
     }
   
     void update() {
     }
   
     void display() {
       noStroke();
       fill(col);
       ellipse(x, y, dia, dia);
     }
   }
   
   

But there are a few thing still not working as they should.


I want to connect the ellipses by clicking them. I understand that I should store the coordinates in an array, but what's the best way to start?


Hope someone can help me and give me advise.

Thanks in advance.


Joshua