about arrayList().... (tweaked from benja's sketch)

Programming Questions

sunooz

about arrayList().... (tweaked from benja's sketch)

in Programming Questions • 1 year ago

Hi, I've gotten numerous helps from this forum and I'm bring another question again.

I've made a sketch about falling circles and lines, with arrayList().

When I click the mouse, circles and connecting lines appear -> drop -> pile up.

With many people's advice(especially benja's one), my sketch have been developed a lot.

Let me show you my code first;

ArrayList<Circle> circles;
int numCircles = 13;
int maxDistance; //max distance between circles when draw lines
int m;
float bgX;
float bgY;
float randomVal;
float circleX;
float circleY;
PImage bg;
PImage bgRed;
PImage bgBlue;
color[] colors;
int indexColors;
float[] opa;
void setup()
{
size(1024, 768); //size of window
smooth(); //draw circles with anti-aliased edge
m = millis();
//frameRate(15);
//bg = loadImage("bg_trans.png");
//bgRed = loadImage("bg_red.png");
// bgBlue = loadImage("bg_blue.jpg");
imageMode(CENTER);
circles = new ArrayList<Circle>();
createCircles();
}
void draw()
{
// clear background
background(0,0,25);
/*
tint(255, 255);
image(bgBlue, width/2, height/2);
tint(255, 50);
image(bg, width/2, height/2);
tint(255, 0);
image(bgRed, width/2, height/2);
*/
for (int i=0; i< circles.size(); i++)
{
circles.get(i).update();
circles.get(i).display();
}
// define maximum distance
maxDistance = 180;
//maxDistance =mouseX; //manuplate lines by mouse cursor
// look of the lines
stroke(255, 130);
strokeWeight(0.5);
for (int i=0; i< numCircles; i++)
{
// compare circle to other circles
for (int j=i+1; j< numCircles; j++)
{
// draw line if distance is below 'maxDistance'
if (dist(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y) < maxDistance){
line(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y);
}
}
}
}
void mousePressed()
{
createCircles();
}
void createCircles()
{
opa = new float[5];
colors = new color[5];
opa[0] = random(100, 255);
opa[1] = random(100, 255);
opa[2] = random(100, 255);
opa[3] = random(100, 255);
opa[4] = random(100, 255);
colors[0] = color(255, 206, 0, opa[0]); //yellow
colors[1] = color(255, opa[1]); // white
colors[2] = color(0, 58, 142, opa[2]); //blue
colors[3] = color(226, 0, 0, opa[3]); //red
colors[4] = color(73,73,73, opa[4]); //black(gray)
for (int i=0; i<numCircles; i++)
{
//create circles in big circular area
float randomAngle = random(0, TWO_PI);
float randomRadius = random(20, 350); // Not too close of the center, adjust at will
float circleX = width/2 + cos(randomAngle) * randomRadius;
float circleY = height/2 + sin(randomAngle) * randomRadius;
println(circleX + ", " + circleY);
indexColors = int(random(colors.length));
circles.add(new Circle(circleX, circleY, random(5, 15), colors[indexColors]));
}
}
class Circle {
float x, y, dia;
color col;
float speed=0;
float gravity=0.15;
float fallLimit = height/2 + 350; //limit y for falling stars
Circle(float x, float y, float dia, color col) {
this.x =x;
this.y =y;
this.dia = dia;
this.col = col;
}
//circles move slightly in their position
void update() {
// code for movement here
// this is just some random displacement
x = x + random(-0.5, 0.5);
y = y + random(-0.5, 0.5);
int m = millis();
speed = speed + gravity;
if(y < fallLimit){
y = y + speed;
}
if (y > fallLimit) {
y = fallLimit;
}
/*
if( get(x,y) == color(255,0,0) ){
y = y + speed;
}
if( get(x,y) == color(0,0,255) ){
y=y;
}
*/
}
void display() {
// code for drawing the circles
noStroke();
fill(col);
ellipse(x, y, dia, dia);
}
}

This is all I have been working for. However, it has two serious problems...

1. It should start with blank screen but at the start of application, a set of circles and lines appear.

I guess it is because of line 66-90, in void draw(). I tried to put them inside void createCircles() but failed. There's something wrong....

2. When I click the mouse, circles appear but lines do not. I'm only guessing why. What I guess is;

I used '(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y);' when I draw lines.

BUT, when I draw circles, I used 'circleX, circleY'.

I don't know why, but I'm only guessing it is wrong.

As for 1st problem, I failed and for 2nd problem, I cannot even approach to it.

Would anybody teach me how to fix it, please?

Replies(14)

benja

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

The first one is easy:
You call createCircles() in setup(), so it creates a set of circles right at the beginning (line 42). Remove that line.
This will lead to an error, because you use "numCircles" to iterate over your circles. Use "circles.size()" instead (line 80, 83). This is actually where your second problem came from. You were drawing lines for the first 13 circles, and did not adjust "numCircles" after creating a new set. Using the size of the circles-arraylist is more flexible.

And i think i remember, that you only wanted lines between dots within the same set. To achieve this, you could replace line 83 with this:

for (int j=i+1; j< circles.size() && j-(i/numCircles)*numCircles<numCircles; j++)

Hope that helped.

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

It works perfectly! Always thank you for your kind advice and explanation. :-D

By the way, I have a question about what you said;

for (int j=i+1; j< circles.size() && j-(i/numCircles)*numCircles<numCircles; j++)

What does it mean?

Does 'j-(i/numCircles)*numCircles' mean ' j - i '?

I think '(i/numCircles)*numCircles' means i........ Am I wrong?

Moreover, as 'j=i+1'..... j - i = i + 1 - i = 1.............WHAT...?? I AM CONFUSED.

In conclusion, j-(i/numCircles)*numCircles<numCircles = 1<numCircles. What is this..?

Am I just hopeless at math?

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

I've got a new problem T_T

I changed line 3, 'int numCircles=13;' to 'int numCircles=int(random(13));' and problems occurred..

With 'int numCircles=int(random(13))', numCircles are fixed after starting application.

I want to make random numbers of circles by every mouse clicking motion.

So, I put 'int numCircles = int(random(13));' in void createCircles().

Therefore, an error occurred in void draw() as there is calling numCircles in there. So, I put the line into void draw() too, but nothing appeared on screen and this error occurred;

Arithmetic Exception: /by zero

I know that putting 'int numCircles=int(random(13));' into two different void is wrong method, but cannot think about how to make random number of circles.....

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Hi, I posted the latest version of my sketch and hope you would take a look at it...

v.k.

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

I did not read the whole code, but i think if you don't "redeclare" numCircles just reassign it, like numCircles = random(13), instead of int numCircles = random(13), things might work, also if you want to allow 0 you need to check if it is numberCircles is 0 before dividing and traversing arrays like if(numCircles > 0) do stuff else handle zero case. Or you might just call random(1,14); (i think random is (inclusive, exclusive)) and never get a 0.

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Thank you for your advice.

I changed 'int numCircles=int(random(13)); to 'numCircle = int(random(13));' but it doesn't work.......

The code is like this now;

ArrayList<Circle> circles;
int numCircles; //number of circles
int maxDistance = 300; //max distance between circles when draw lines
int m;
float bgX;
float bgY;
float randomVal;
float circleX;
float circleY;
PImage bg;
PImage bgRed;
PImage bgBlue;
color[] colors;
int indexColors;
float[] opa;
void setup()
{
size(1024, 768); //size of window
smooth(); //draw circles with anti-aliased edge
m = millis();
//frameRate(15);
/*
bg = loadImage("bg_trans.png");
bgRed = loadImage("bg_red.png");
bgBlue = loadImage("bg_blue.jpg");
*/
imageMode(CENTER);
circles = new ArrayList<Circle>();
}
void draw()
{
// clear background
background(0,0,25);
/*
tint(255, 255);
image(bgBlue, width/2, height/2);
tint(255, 80);
image(bg, width/2, height/2);
tint(255, 0);
image(bgRed, width/2, height/2);
*/
for (int i=0; i< circles.size(); i++)
{
circles.get(i).update();
circles.get(i).display();
}
//maxDistance =mouseX; //manuplate lines by mouse cursor
// look of the lines
stroke(255, 130);
strokeWeight(0.5);
for (int i=0; i< circles.size(); i++)
{
numCircles = int(random(13));
// compare circle to other circles
for (int j=i+1; j< circles.size()&&j-(i/numCircles)*numCircles<numCircles; j++)
{
// draw line if distance is below 'maxDistance'
if (dist(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y) < maxDistance)
{
line(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y);
}
}
}
}
void mousePressed()
{
createCircles();
}
void createCircles()
{
opa = new float[5];
colors = new color[5];
opa[0] = random(100, 255);
opa[1] = random(100, 255);
opa[2] = random(100, 255);
opa[3] = random(100, 255);
opa[4] = random(100, 255);
colors[0] = color(255, 206, 0, opa[0]); //yellow
colors[1] = color(255, opa[1]); // white
colors[2] = color(0, 58, 142, opa[2]); //blue
colors[3] = color(226, 0, 0, opa[3]); //red
colors[4] = color(73,73,73, opa[4]); //black(gray)
numCircles = int(random(13));
for (int i=0; i<numCircles; i++)
{
//create circles in big circular area
float randomAngle = random(0, TWO_PI);
float randomRadius = random(20, 350); // Not too close of the center, adjust at will
float circleX = width/2 + cos(randomAngle) * randomRadius;
float circleY = (height/2 + sin(randomAngle) * randomRadius)/2;
println(circleX + ", " + circleY);
indexColors = int(random(colors.length));
circles.add(new Circle(circleX, circleY, random(5, 15), colors[indexColors]));
}
}
class Circle {
float x, y, dia;
color col;
float speed=0;
float gravity=0.15;
float fallLimit = height/2 + 370; //limit y for falling stars
Circle(float x, float y, float dia, color col) {
this.x =x;
this.y =y;
this.dia = dia;
this.col = col;
}
//circles move slightly in their position
void update() {
// code for movement here
// this is just some random displacement
x = x + random(-0.5, 0.5);
y = y + random(-0.5, 0.5);
int m = millis();
speed = speed + gravity;
if(y < fallLimit){
y = y + speed;
}
if (y > fallLimit) {
y = fallLimit;
}
/*
if( get(x,y) == color(255,0,0) ){
y = y + speed;
}
if( get(x,y) == color(0,0,255) ){
y=y;
}
*/
}
void display() {
// code for drawing the circles
noStroke();
fill(col);
ellipse(x, y, dia, dia);
}
}

With this code, I got 'ArithmeticException : / by zero' at line 83.

I desperately hope that somebody would help me..

v.k.

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Well as i said, if you need the zero you got handle this without dividing by numCircle. There is not dividing by zero in math. But you don't need it. There is no meaning in handling a shape with no vertices, so as i said, change random(13), to random (1, 13); It will work. I tested. btw Very cool the sketch!! congrats

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Oh, sorry. I understood what you're saying just now. random(13) means random(0,13), right?

It works, but I only want lines between dots within the same set, so there's still a problem..

Newly created dots have connecting lines with older dots which is piled on the bottom. It slows down the system after several click.

My sketch still needs much more progress, but thank you for your praise and advice! :-)

sunooz

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

This is the latest version of my sketch.

I assigned random(1,13) to numCircles and changed the order of void draw() and void mousePressed().

By doing so, I don't have to assign numCircles twice. Just once on line 70.

However, lines among different sets occur and it make system slow down...

ArrayList<Circle> circles;
int numCircles;
int maxDistance = 300; //max distance between circles when draw lines
int m;
float bgX;
float bgY;
float randomVal;
float circleX;
float circleY;
PImage bg;
PImage bgRed;
PImage bgBlue;
color[] colors;
int indexColors;
float[] opa;
void setup()
{
size(1024, 768); //size of window
smooth(); //draw circles with anti-aliased edge
m = millis();
//frameRate(15);
bg = loadImage("bg_trans.png");
bgRed = loadImage("bg_red.png");
bgBlue = loadImage("bg_blue.jpg");
imageMode(CENTER);
circles = new ArrayList<Circle>();
}
void mousePressed()
{
createCircles();
}
void createCircles()
{
opa = new float[5];
colors = new color[5];
opa[0] = random(100, 255);
opa[1] = random(100, 255);
opa[2] = random(100, 255);
opa[3] = random(100, 255);
opa[4] = random(100, 255);
colors[0] = color(255, 206, 0, opa[0]); //yellow
colors[1] = color(255, opa[1]); // white
colors[2] = color(0, 58, 142, opa[2]); //blue
colors[3] = color(226, 0, 0, opa[3]); //red
colors[4] = color(73,73,73, opa[4]); //black(gray)
numCircles = int(random(1, 13));
for (int i=0; i<numCircles; i++)
{
//create circles in big circular area
float randomAngle = random(0, TWO_PI);
float randomRadius = random(20, 350); // Not too close of the center, adjust at will
float circleX = width/2 + cos(randomAngle) * randomRadius;
float circleY = (height/2 + sin(randomAngle) * randomRadius)/2;
println(circleX + ", " + circleY);
indexColors = int(random(colors.length));
circles.add(new Circle(circleX, circleY, random(5, 15), colors[indexColors]));
}
}
void draw()
{
// clear background
background(0,0,25);
tint(255, 255);
image(bgBlue, width/2, height/2);
tint(255, 80);
image(bg, width/2, height/2);
tint(255, 0);
image(bgRed, width/2, height/2);
for (int i=0; i< circles.size(); i++)
{
circles.get(i).update();
circles.get(i).display();
}
//maxDistance =mouseX; //manuplate lines by mouse cursor
// look of the lines
stroke(255, 130);
strokeWeight(0.5);
for (int i=0; i< circles.size(); i++)
{
// compare circle to other circles
for (int j=i+1; j< circles.size()&&j-(i/numCircles)*numCircles<numCircles; j++)
{
// draw line if distance is below 'maxDistance'
if (dist(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y) < maxDistance)
{
line(circles.get(i).x, circles.get(i).y, circles.get(j).x, circles.get(j).y);
}
}
}
}
class Circle {
float x, y, dia;
color col;
float speed=0;
float gravity=0.15;
float fallLimit = height/2 + 370; //limit y for falling stars
Circle(float x, float y, float dia, color col) {
this.x =x;
this.y =y;
this.dia = dia;
this.col = col;
}
//circles move slightly in their position
void update() {
// code for movement here
// this is just some random displacement
x = x + random(-0.5, 0.5);
y = y + random(-0.5, 0.5);
int m = millis();
speed = speed + gravity;
if(y < fallLimit){
y = y + speed;
}
if (y > fallLimit) {
y = fallLimit;
}
/*
if( get(x,y) == color(255,0,0) ){
y = y + speed;
}
if( get(x,y) == color(0,0,255) ){
y=y;
}
*/
}
void display() {
// code for drawing the circles
noStroke();
fill(col);
ellipse(x, y, dia, dia);
}
}

v.k.

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

yes random(13) = random(0, 13).

Maybe you can make a class Set that creates each set of Circles. Than would be easy to control the no connection between sets. Or assign ids (when creates) to each Circle and stores the random number that created the set and test for that also in lines draw test. if id < thisRandomNumber (how many are of this set) and bigger than id....

You may also want to kill old balls after some time.

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Hmm...... Is the class Set you meant different with class createCircles() in my sketch?

To me, it's rather hard to understand what you're saying..Sorry.

Assigning id is also quite unfamiliar concept to me.

Would you give me examples of making a class Set and assigning id, please? Sorry for bothering you.

benja

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

Hey,
To answer you question about this line:

for (int j=i+1; j< circles.size() && j-(i/numCircles)*numCircles<numCircles; j++)

What we wanted to do is to connect only the lines within a set. So e.g. the dots 0-12, 13-25, 25-38, etc...
So the first thing to know is in what set we are currently drawing lines.
"i/numCircles" returns an integer, because we divide one int by another. So for values between 0 and 12 that would be 0, for values between 13 and 25 that would be 1, etc...
When we know in which set we are, we multiply it by numCircles, to recieve the first value of that set.
Then we can check, if the difference between j and this value is lower than numCircles, so we know, i and j are in the same set. Thinking about it, the next line should have the same effect:

for (int j=i+1; j< circles.size() && (i/numCircles) == (j/numCircles); j++)

But of course, this does not work when you change numCircles during your sketch.
The idea of v.k. seem to be a good solution,create a class that holds a set of Circle-objects and the function to connect them by lines.

sunooz

Re: Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

It's quite difficult thing to me....... I'm understanding it little and it seems rather obscure to me.

However, I think that I've got a good lesson from you. Thank you for your kind explanation :-)

By the way, The idea of v.k. would be good, but as for me, I cannot even understand what he's saying......

benja

Re: about arrayList().... (tweaked from benja's sketch)

1 year ago

The idea was to create a class, that holds all circles of a set, and manages how they are updated and displayed.
So you can just update a list of CirclesSets, and don't have to care about where a set of circles begins or ends.
I cleand up your code a bit, just to show what i mean:

ArrayList<CircleSet> allCircles; // holds all circleSets
int maxDistance = 300; //max distance between circles when drawing lines

void setup()
{
size(1024, 768); //size of window
smooth(); //draw circles with anti-aliased edge

imageMode(CENTER);

allCircles = new ArrayList<CircleSet>();
}

void mousePressed()
{
// add a new set of circles
allCircles.add(new CircleSet());
}

void draw()
{
// clear background
background(0, 0, 25);

// when there are more than 50 sets of circles, remove the oldest
if (allCircles.size()>50) {
    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();
}

println("sets: "+allCircles.size()+" FPS: "+frameRate);
}

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++)
    {
      //create circles in big circular area
      float randomAngle = random(0, TWO_PI);
      float randomRadius = random(20, 350); // Not too close of the center, adjust at will
      float circleX = width/2 + cos(randomAngle) * randomRadius;
      float circleY = (height/2 + sin(randomAngle) * randomRadius)/2;

      int indexColors = int(random(colors.length));

      circles.add(new Circle(circleX, circleY, random(5, 15), colors[indexColors]));
    }
}

// update all circles in this set
void update() {
    for (int i =0; i< circles.size(); i++) {
      circles.get(i).update();
    }
}

// display all circles in this set
void display() {
    // iterate over all circles (of this set)
    for (int i =0; i< circles.size(); i++) {
      // draw circle
      circles.get(i).display();

      // draw lines between circles(of this set)
      stroke(255, 130);
      strokeWeight(0.5);

      // compare circle to other circles
      for (int j=i+1; j< circles.size(); j++)
      {
        Circle c1 = circles.get(i);
        Circle c2 = circles.get(j);

        // draw line if distance is below 'maxDistance'
        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;

float speed=0;
float gravity=0.15;

float fallLimit = height/2 + 370; //limit y for falling stars

Circle(float x, float y, float dia, color col) {
    this.x =x;
    this.y =y;
    this.dia = dia;
    this.col = col;
}

//circles move slightly in their position
void update() {
    // no need to update, when the circle has alrady reached the bottom
    if (y != fallLimit) {
      speed = speed + gravity;

      if (y < fallLimit) {
        y = y + speed;
      }
      else {
        y = fallLimit;
      }
    }
}

void display() {
    // code for drawing the circles
    noStroke();
    fill(col);
    ellipse(x, y, dia, dia);
}
}

Top Reply