Adjust the radius of each circle

patblo90

Hi,

I have this code at the moment, and what it does, is create an x amount of circles with a random dimenson for each circle. What I would like, is a code which allows me to determine the amount of circles, and make each circle customisable independent from eachother, so I can:

1. add text in or attached to a circle
2. Adjust the radius of each circle
3. adjust the color of each circle.

Hope this is not to difficult a task?

With friendly regards, Patrick

And the code:

     // 
     // PROCESSINGJS.COM HEADER ANIMATION  
     // MIT License - F1lT3R/Hyper-Metrix
     // Native Processing Compatible 
     //

    // Set number of circles
    int count = 20;
    // Set maximum and minimum circle size
    int maxSize = 100;
    int minSize = 20;
    // Build float array to store circle properties
    float[][] e = new float[count][5];
    // Set size of dot in circle center
    float ds=2;
    // Set drag switch to false
    boolean dragging=false;
    // integers showing which circle (the first index in e) that's locked, and its position in relation to the mouse
    int lockedCircle; 
    int lockedOffsetX;
    int lockedOffsetY;
    // If user presses mouse...
    void mousePressed () {
      // Look for a circle the mouse is in, then lock that circle to the mouse
      // Loop through all circles to find which one is locked
      for (int j=0;j< count;j++) {
        // If the circles are close...
        if (sq(e[j][0] - mouseX) + sq(e[j][1] - mouseY) < sq(e[j][2]/2)) {
          // Store data showing that this circle is locked, and where in relation to the cursor it was
          lockedCircle = j;
          lockedOffsetX = mouseX - (int)e[j][0];
          lockedOffsetY = mouseY - (int)e[j][1];
          // Break out of the loop because we found our circle
          dragging = true;
          break;
        }
      }
    }
    // If user releases mouse...
    void mouseReleased() {
      // ..user is no-longer dragging
      dragging=false;
    }

    // Set up canvas
    void setup() {
      // Frame rate
      frameRate(60);
      // Size of canvas (width,height)
      size(940, 940);
      // Stroke/line/border thickness
      strokeWeight(1);
      // Initiate array with random values for circles
      for (int j=0;j< count;j++) {
        e[j][0]=random(width); // X 
        e[j][1]=random(height); // Y
        e[j][2]=random(minSize, maxSize); // Radius        
        e[j][3]=random(-.12, .12); // X Speed
        e[j][4]=random(-.12, .12); // Y Speed
      }
    }

    // Begin main draw loop (called 25 times per second)
    void draw() {
      // Fill background black
      background(0);
      // Begin looping through circle array
      for (int j=0;j< count;j++) {
        // Disable shape stroke/border
        noStroke();
        // Cache diameter and radius of current circle
        float radi=e[j][2];
        float diam=radi/2;
        if (sq(e[j][0] - mouseX) + sq(e[j][1] - mouseY) < sq(e[j][2]/2))
          fill(64, 187, 128, 100); // green if mouseover
        else
          fill(64, 128, 187, 100); // regular
        if ((lockedCircle == j && dragging)) {
          // Move the particle's coordinates to the mouse's position, minus its original offset
          e[j][0]=mouseX-lockedOffsetX;
          e[j][1]=mouseY-lockedOffsetY;
        }
        // Draw circle
        ellipse(e[j][0], e[j][1], radi, radi);
        // Move circle
        e[j][0]+=e[j][3];
        e[j][1]+=e[j][4];


        /* Wrap edges of canvas so circles leave the top
         and re-enter the bottom, etc... */
        if ( e[j][0] < -diam      ) { 
          e[j][0] = width+diam;
        } 
        if ( e[j][0] > width+diam ) { 
          e[j][0] = -diam;
        }
        if ( e[j][1] < 0-diam     ) { 
          e[j][1] = height+diam;
        }
        if ( e[j][1] > height+diam) { 
          e[j][1] = -diam;
        }

        // If current circle is selected...
        if ((lockedCircle == j && dragging)) {
          // Set fill color of center dot to white..
          fill(255, 255, 255, 255);
          // ..and set stroke color of line to green.
          stroke(128, 255, 0, 100);
        } 
        else {            
          // otherwise set center dot color to black.. 
          fill(0, 0, 0, 255);
          // and set line color to turquoise.
          stroke(64, 128, 128, 255);
        }

        // Loop through all circles
        for (int k=0;k< count;k++) {
          // If the circles are close...
          if ( sq(e[j][0] - e[k][0]) + sq(e[j][1] - e[k][1]) < sq(diam) ) {
            // Stroke a line from current circle to adjacent circle
            line(e[j][0], e[j][1], e[k][0], e[k][1]);
          }
        }
        // Turn off stroke/border
        noStroke();      
        // Draw dot in center of circle
        rect(e[j][0]-ds, e[j][1]-ds, ds*2, ds*2);
      }
    }

SilentAce

Format your code properly and read this first forum.processing.org/two/discussion/14/to-newcomers-in-this-forum-read-attentively-these-instructions#Item_19

SilentAce

In the example you have you cannot control the color, but you can control the spawn position, the radius and the speed as well as the count number. int count = 20; gives you the number of circle and in order to control all the rest you need to add the parameters for (in your example) 20 circles. Remember that arrays start from 0 not 1.

e[0][0]=100; // X position is 100 
e[0][1]=50; // Y position is 50
e[0][2]=20; // Radius is 20       
e[0][3]=random(-.12, .12); // X Speed
e[0][4]=random(-.12, .12); // Y Speed

And then for all the rest where you change e[theNumber][1.2.3.4.5] etc.

Here is a different example, where you can add color and opacity to each circle and text. You cannot drag them though you need to make a new function for that to test against the circles position.

Shape[] circle;

void setup() {
  size(600, 600);
  // the number of circles to display
  noStroke();
  // the number of circles to display
  circle = new Shape[5];

  // custom preferences for each circle
  // the movement is in a radom range of plus and minus
  circle[0] = new Shape(20, 100, 100, random(-0.2, 0.2), random(-0.2, 0.2));
  circle[0].setColor(255, 0, 0, 100);
  circle[0].setText("Hello");

  circle[1] = new Shape(50, 50, 400, random(-0.2, 0.4), random(-0.4, 0.2));
  circle[1].setColor(0, 255, 255, 100);
  circle[1].setText("Hello");

  circle[2] = new Shape(50, 300, 50, random(-0.5, 0.5), random(-0.5, 0.5));
  circle[2].setColor(0, 0, 255, 100);
  circle[2].setText("Hello");

  circle[3] = new Shape(50, 200, 150, random(-0.1, 0.1), random(-0.1, 0.1));
  circle[3].setColor(0, 255, 0, 50);
  circle[3].setText("Hello");
  smooth();
}

void draw() {
  background(0);
  circle[0].move();
  circle[0].display();
  circle[1].move();
  circle[1].display();
  circle[2].move();
  circle[2].display();
  circle[3].move();
  circle[3].display();
}

class Shape {
  int size;
  // spawn coordinates
  float posX, posY;
  // x and y speed;
  float speedX, speedY;
  // colors
  float red, green, blue, opacity;
  // text
  String text;
  // A constructor for the circle - it takes the parameters
  // size, position x, position y, speed x and speed y
  Shape(int s, float x, float y, float sX, float sY) {
    size = s;
    posX = x;
    posY = y;
    speedX = sX;
    speedY = sY;
  }
  // sets the colors and the opacity of the circle
  void setColor(float r, float g, float b, float o) {
    red = r;
    green = g;
    blue = b;
    opacity = o;
  }
  // sets the text to display
  void setText(String t) {
    text = t;
  }
  // moves the circle accross the screen
  void move() {
    posX += speedX;
    posY += speedY;
  }
  // display the circle with all the custom parameters 
  void display() {
    noStroke();
    fill(red, green, blue, opacity);
    ellipse(posX, posY, size, size);
    text(text, posX-text.length(), posY);
  }
}