#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

#### In this Discussion

edited March 2014

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
3. adjust the color of each circle.

Hope this is not to difficult a task?

With friendly regards, Patrick

And the code:

``````     //
// 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];
// 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] - mouseX) + sq(e[j] - mouseY) < sq(e[j]/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];
lockedOffsetY = mouseY - (int)e[j];
// 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]=random(width); // X
e[j]=random(height); // Y
e[j]=random(-.12, .12); // X Speed
e[j]=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
if (sq(e[j] - mouseX) + sq(e[j] - mouseY) < sq(e[j]/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]=mouseX-lockedOffsetX;
e[j]=mouseY-lockedOffsetY;
}
// Draw circle
// Move circle
e[j]+=e[j];
e[j]+=e[j];

/* Wrap edges of canvas so circles leave the top
and re-enter the bottom, etc... */
if ( e[j] < -diam      ) {
e[j] = width+diam;
}
if ( e[j] > width+diam ) {
e[j] = -diam;
}
if ( e[j] < 0-diam     ) {
e[j] = height+diam;
}
if ( e[j] > height+diam) {
e[j] = -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] - e[k]) + sq(e[j] - e[k]) < sq(diam) ) {
// Stroke a line from current circle to adjacent circle
line(e[j], e[j], e[k], e[k]);
}
}
// Turn off stroke/border
noStroke();
// Draw dot in center of circle
rect(e[j]-ds, e[j]-ds, ds*2, ds*2);
}
}
``````
Tagged:

• 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=100; // X position is 100
e=50; // Y position is 50
e=random(-.12, .12); // X Speed
e=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;

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

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

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

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

void draw() {
background(0);
circle.move();
circle.display();
circle.move();
circle.display();
circle.move();
circle.display();
circle.move();
circle.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);
}
}
``````