Help creating colourful bouncy balls with data interaction

aliburke

Hi,

I am using processing to illustrate earthquake data. I am trying to create 10 bouncing balls that collide with one another and bounce around the screen. Each of them I need to be a different colour and have a different number displayed in the centre of each circle. I also need each circle to have an interaction - at the moment when my single bouncing ball is clicked in the middle the ball disappears and some text is revealed. I want to be able to have 10 balls and when you click on each individual one a different text line appears (it will be specific countries and dates).

Can anyone help me add additional bouncing balls that are different colours, have different text in the centre, and show different data when individually pressed?

Thanks

// Ball handling
float posX, posY; // Position
float speedX, speedY; // Movement (linear)
int radius; // Radius of the ball
color ballColor; // And its color

boolean bDisplayMessage;// False by default
int startTime; // The (last) time when the mouse have been clicked
final int DISPLAY_DURATION = 1000; // in milliseconds = 1s

void setup()
{
size(800,450);
smooth();

PFont f = createFont("Arial", 48);
textFont(f);

// Initialize the ball's data
posX = 120;
posY = 50;
speedX = -2;
speedY = 3;
radius = 50;
ballColor = (255);
}

void draw(){
// Erase the sketch area
background(255,255,255);
//background
noStroke();
fill(#BDC3C7);
rect(0,0,800,300);
noStroke();
fill(#283747);
rect(0,300,800,150);
//text
fill(255,255,255);
String s= "WORLD'S LARGEST QUAKES";
textSize(38);
text(s,0,400);



if (bDisplayMessage)
{
fill(#82E0AA);
text("INDONESIA 2004", 225, height / 2);
 // If the spent time is above the defined duration
if (millis() - startTime > DISPLAY_DURATION)
{
  // Stop displaying the message, thus resume the ball moving
  bDisplayMessage = false;
}
}
else
{
moveBall();
displayBall();
}
}

void mousePressed(){
bDisplayMessage = dist(mouseX, mouseY, posX, posY) < radius;
// Record the time of the event
startTime = millis();
}

//void keyPressed()
//{
//fill(#45B39D);
//    text("9.1 MAGNITUDE", 225, height / 2);
//}


void moveBall(){
// Move by the amount determined by the speed
posX += speedX;
// Check the horizontal position against the bounds of the sketch
if (posX < radius || posX > width - radius)
{
// We went out of the area, we invert the h. speed (moving in the opposite direction)
// and put back the ball inside the area
speedX = -speedX;
posX += speedX;
}
// Idem for the vertical speed/position
posY += speedY;
if (posY < radius || posY > height - radius)
{
speedY = -speedY;
posY += speedY;
}
}

void displayBall()
{
// Simple filled circle
noStroke();
fill(ballColor);
ellipse(posX, posY, radius * 2, radius * 2);
String s="9.1";
fill(0);
text(s,posX-25,posY);
}

koogs

Please don't post duplicates.

koogs

There are answers here that you haven't responded to.

https://forum.processing.org/two/discussion/24501/i-need-help-creating-an-array-of-bouncy-balls-with-text-and-info-displayed

aliburke

That previous code has left me with too many errors I am unable to resolve

Chrisir

Drop me a PM if you need help

Chrisir

In your previous discussion you had a wonderful sketch with a proper class and an ArrayList or array of it

I gave you valuable advice

Why not go on from there?

I am not at home

aliburke

I do still have that code but I can't have different text on each circle, whenever I run the sketch the code picks one country and places it inside every ball. I think the hover does work for one ball but I can't control what appears/can't find it in the code. I have tried editing the code but every edit I do seems to effect all the balls instead of individually

I only created a new sketch because I couldn't fix it and I'm worried I won't have it done for when it's due this thursday

int numBalls = 12;
float spring = 0.05;
float friction = -0.9;
Ball[] balls = new Ball[numBalls];

float r = random(6);

String[] headlines = {"Indonesia", "Australia", "Japan", "Mexico", "USA", "Germany"};

String c = headlines[int(random(6))];

PFont f;



void setup() {
size(1275, 700);
for (int i = 0; i < numBalls; i++) {
//array
balls[i] = new Ball(random(width), random(height), random(100, 100), i, balls);
//need to make array of different size circles then line underneath for text
}
noStroke();
fill(255, 204);
f = createFont("arial", 20, true);
}

void draw() {
background(0);
//background
background(255, 255, 255);
//background
noStroke();
fill(#BDC3C7);
rect(0, 0, 1275, 500);
noStroke();
fill(#283747);
rect(0, 1275, 700, 300);
//text

fill(255, 255, 255);
String s= "WORLD'S LARGEST QUAKES";
textSize(64);
text(s, 600, 500);



//STEP1
boolean stopBalls=false;  //Reset
Ball ballText=null;
for (Ball ball : balls) {
stopBalls=ball.hover();
if (ball.hover()==true)  ballText=ball;
}


//step 2
for (Ball ball : balls) {
ball.collide();
if (stopBalls==false) {
  ball.move();
}
ball.display();
}

//STEP3
if (stopBalls==true) {
ballText.displayHoverText();
}
}



class Ball {

float x, y;
float diameter;
float vx = 0;
float vy = 0;
int id;
Ball[] others;

Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
id = idin;
others = oin;
}


boolean hover() {
return dist(mouseX, mouseY, x, y) < diameter/2.0;
}

void displayHoverText() {
text(id+" at Pos " + x +", " + y, x, y);
}



void collide() {
for (int i = id + 1; i < numBalls; i++) {
  float dx = others[i].x - x;
  float dy = others[i].y - y;
  float distance = sqrt(dx*dx + dy*dy);
  float minDist = others[i].diameter/2 + diameter/2;
  if (distance < minDist) { 
    float angle = atan2(dy, dx);
    float targetX = x + cos(angle) * minDist;
    float targetY = y + sin(angle) * minDist;
    float ax = (targetX - others[i].x) * spring;
    float ay = (targetY - others[i].y) * spring;
    vx -= ax;
    vy -= ay;
    others[i].vx += ax;
    others[i].vy += ay;
  }
  }
  }

void move() {
x += vx;
y += vy;
if (x + diameter/2 > width) {
  x = width - diameter/2;
  vx *= friction;
} else if (x - diameter/2 < 0) {
  x = diameter/2;
  vx *= friction;
}
if (y + diameter/2 > height) {
  y = height - diameter/2;
  vy *= friction;
} else if (y - diameter/2 < 0) {
  y = diameter/2;
  vy *= friction;
}
}

void display() {
//fill ellipse
fill(0, 255, 0);
ellipse(x, y, diameter, diameter);
//fill text
fill(255, 255, 255);
textFont(f, 20);
textAlign(CENTER);
text(c, x, y);
}
}
//

aliburke

Im wondering if this would be easier to display as static ellipses instead of bouncing balls ??

Chrisir

See the variable c in line 10?

Move it into the class - because each ball must have another text!

Have the constructor with additional String cin as a Parameter

Now in line 20 call the constructor as you have it now but add , headlines[i]

Ok? So that each new ball object gets another text from the array headlines.

Remark

Line 52 belongs into the if clause, so before line 54 (hard to spot this error is)

Remark

Also press ctrl-t in processing to get Auto format

Remark

Before line 97 I suggest fill(0);

Remark

Don't you have more earthquake data like the strength?

Chrisir

Did you see the tutorial on objects/ please read it

aliburke

Thank you adding that code allowed each circle to have a different country text! YAY!

I didn't understand your comment: Now in line 20 call the constructor as you have it now but add , headlines[i]

And yes I do have more data: essentially I'd love to have the magnitude and date appear as a hover for each. Is this the tutorial you suggested? https://processing.org/tutorials/objects/

Because my balls are in an array does that mean they will be all the same colour? If not how can I make each ball a different colour?

Again, thankyou

Chrisir

That’s the tutorial I meant.

Did you bring the different texts into the class successfully? Do the with magnitude and date please. On hover, display them.

Similar with the color: it must be part of the class to be different for each ball. Just set it randomly in the class where you declare the variables before the constructor

aliburke

Im sorry I dont understand. Could you demonstrate the code you mean and where? i tried color = color (255(random)); but that didnt work.

At the moment i have 10 balls but only 6 countries listed. when i try and list 10 and try to run the code java crashes everytime. do you know why this happens?

i am still fiddling around with the hover text display but at the moment it only effects one ball. how can i be specific to each individual ball? should each ball have its own hover display? if so do i need to refer to the ball number eg. numBall [1]?

aliburke

boolean hover() {
fill(0);
return dist(mouseX, mouseY, x, y) < diameter/2.0;

}

void displayHoverText() {
fill(0,0,0);
//text(id+" at Pos " + x +", " + y, x, y);
text("2010, 9.1 magnitude"+x+","+y,x,y);
}

Chrisir

Post your entire code please

Everything concerning one ball, its text color size etc. Should happen in the class.

Outside the class you have an array of that class. Loop over the array to be able to change/ display etc. each ball

this array is called balls; to access one ball say balls [i]

Since you access the array of country names, you are not allowed to read over its end. Therefore the error/ crash when you have more balls than country names.

Basically the same way you copy the country name into the class do it with the data of magnitude and date, ok? Do it in setup () and modify the constructor in the class as you did with the country mame. Have you done the tutorial?

aliburke

This is what it looks like at the moment. Yes I read through the tutorial

 // worlds largest earthquakes 


//color  = color(255(random)); 

int numBalls = 10;
float spring = 0.05;
float friction = -0.9;
Ball[] balls = new Ball[numBalls];
float r = random(6);

String[] headlines = {"Indonesia", "Australia", "Japan", "Mexico", "USA", "Germany"};

//String c = headlines[int(random(6))];

PFont f;



void setup() {
size(1275, 700);
for (int i = 0; i < numBalls; i++) {
//array
balls[i] = new Ball(random(width), random(height), random(100, 100), i, balls);
//need to make array of different size circles then line underneath for text
}
noStroke();
fill(255, 204);
f = createFont("arial", 20, true);
}

void draw() {
background(0);
//background
background(255, 255, 255);
//background
noStroke();
fill(#BDC3C7);
rect(0, 0, 1275, 500);
noStroke();
fill(#283747);
rect(0, 1275, 700, 300);
//text
fill(255, 255, 255);
String s= "WORLD'S LARGEST QUAKES";
textSize(64);
text(s, 600, 500);



//STEP1
boolean stopBalls=false;  //Reset
Ball ballText=null;
for (Ball ball : balls) {

if (ball.hover()==true)  ballText=ball;
stopBalls=ball.hover();
}


//step 2
for (Ball ball : balls) {
ball.collide();
if (stopBalls==false) {
  ball.move();
}
ball.display();
}

//STEP3
if (stopBalls==true) {
ballText.displayHoverText();
}
}



class Ball {

String c = headlines[int(random(6))];
String cin;
float x, y;
float diameter;
float vx = 0;
float vy = 0;
int id;
Ball[] others;

Ball(float xin, float yin, float din, int idin, Ball[] oin) {
x = xin;
y = yin;
diameter = din;
id = idin;
others = oin;
}


boolean hover() {
fill(0);
return dist(mouseX, mouseY, x, y) < diameter/2.0;

}

void displayHoverText() {
fill(0,0,0);
//text(id+" at Pos " + x +", " + y, x, y);
text("2010, 9.1 magnitude"+x+","+y,x,y);
}



void collide() {
for (int i = id + 1; i < numBalls; i++) {
  float dx = others[i].x - x;
  float dy = others[i].y - y;
  float distance = sqrt(dx*dx + dy*dy);
  float minDist = others[i].diameter/2 + diameter/2;
  if (distance < minDist) { 
    float angle = atan2(dy, dx);
    float targetX = x + cos(angle) * minDist;
    float targetY = y + sin(angle) * minDist;
    float ax = (targetX - others[i].x) * spring;
    float ay = (targetY - others[i].y) * spring;
    vx -= ax;
    vy -= ay;
    others[i].vx += ax;
    others[i].vy += ay;
  }
 }
}

void move() {
x += vx;
y += vy;
if (x + diameter/2 > width) {
  x = width - diameter/2;
  vx *= friction;
} else if (x - diameter/2 < 0) {
  x = diameter/2;
  vx *= friction;
}
if (y + diameter/2 > height) {
  y = height - diameter/2;
  vy *= friction;
} else if (y - diameter/2 < 0) {
  y = diameter/2;
  vy *= friction;
}
}

void display() {
//fill ellipse
fill(0, 255, 0);
ellipse(x, y, diameter, diameter);
//fill text
fill(255, 255, 255);
textFont(f, 20);
textAlign(CENTER);
text(c, x, y);
}
}
//

Chrisir

??

Also press ctrl-t in processing to get Auto format - as I said

Line 80 Should be in setup () and c as a parameter in line 89 (corresponding to line 24 )

Line 6 must be =6 instead of 10.

aliburke

Thank you. Sorry just a little bit of help still needed if you can

I am still unsure how to specify a circle when the mouse hovers over it and specific info appears. I do have 1 line of text in my displayHoverText that does work (line 106)

What would the code look like if i wanted each circle to be a different colour? how do i specify each ball- for example the ball with the text 'indonesia' to be red and 'australia' to be blue? I know you previously stated to use balls[i] but I dont understand...

And sometimes i have more than 1 circle using the same text - eg. 2 balls with 'indonesia' and 0 balls with 'Australia'. Is this because of line 10? Can i fix this?

Chrisir

Same text issue: Now in line 20 call the constructor as you have it now but add , headlines[i]within the brackets ( ) .

OR have c=headlines[i] ;

And give c as a parameter in the line where you are using new

modify constructor as well.

Color can be a property in the class either in the line where you are using new: , colCircle and assign ramdon value or in the class.

As I said for line 106 you need to get magnitudes and dates into the class like you did with headlines (using c, see above)

Then modify line 106 using the new variables magni and date in the class

Chrisir

Line 35 and 133 work together

You really need to understand these two together with the constructor (lines 89 to 95)

To push more data into the class, add more lines to those lines.

See tutorial for objects

https://www.processing.org/tutorials/objects/

Chrisir

Here is my version

I have the data before setup (in some arrays, that we later don't need anymore) and I copy it into the class, so each ball has its own data (country, magnitude and date...). Also each circle has its color (which I don't copy into the class but just have in the class randomly).

The core idea is that the class holds as much data as possible. We have an array (list) of that class.

I hope this helps.

Please read the code and understand it.

Also see:

https://github.com/Kango/Processing-snippets/wiki/Object-Oriented-Programming

https://github.com/Kango/Processing-snippets/wiki/Variables,-Arrays-and-object-oriented-programming

Chrisir ;-)

float spring = 0.05;
float friction = -0.9;

float r = random(6);

String[] headlines = {"Indonesia", "Australia", "Japan", "Mexico", "USA", "Germany"};
float[] magnis = { 12, 44, 32, 24, 12, 8.3 };
String[] date = { "12/10.", "9/3.", "3/2", "2/4", "1/2", "12/27" };

int numBalls = headlines.length; // headlines is in the lead here: We want as many balls as we have countries

Ball[] balls = new Ball[numBalls];

PFont f;

// ------------------------------------------------------------

void setup() {
  size(1275, 700);

  for (int i = 0; i < numBalls; i++) {
    // make a ball
    Ball tempBall = new Ball(random(width), random(height), 
      random(100, 100), i, balls, 
      headlines[i], 
      magnis[i], 
      date[i]); 
    //fill ball into array
    balls[i] = tempBall;
  }

  noStroke();
  fill(255, 204);

  // prepare text output 
  f = createFont("arial", 20, true);
  textFont(f, 20);
  textAlign(CENTER);
}

void draw() {
  // background(0);
  //background
  background(255, 255, 255);
  //background
  noStroke();
  fill(#BDC3C7);
  rect(0, 0, 1275, 500);
  noStroke();
  fill(#283747);
  rect(0, 1275, 700, 300);
  //text

  fill(255, 255, 255);
  String s= "WORLD'S LARGEST QUAKES";
  textSize(64);
  text(s, 600, 500);



  //STEP1
  boolean stopBalls=false;  //Reset
  Ball ballText=null;
  for (Ball ball : balls) {
    if (ball.hover()==true) { 
      ballText=ball;
      stopBalls=true;
    }
  }


  //step 2
  for (Ball ball : balls) {
    ball.collide();
    if (stopBalls==false) {
      ball.move();
    }
    ball.display();
  }

  //STEP3
  if (stopBalls==true) {
    ballText.displayHoverText();
  }
}

// ------------------------------------------------------------

class Ball {

  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int id;
  Ball[] others;

  String country;
  float magni = 0.0;  
  String date;

  color colorBall = color(random(100, 255), 
    random(100, 255), 
    random(100, 255));

  Ball(float xin, float yin, 
    float din, 
    int idin, 
    Ball[] oin, 
    String countryin, 
    float magniin, 
    String datein) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;

    others = oin;
    country= countryin;
    magni=magniin;
    date=datein;
  }

  boolean hover() {
    return dist(mouseX, mouseY, x, y) < diameter/2.0;
  }

  void displayHoverText() {
    fill(0); 
    text(magni +" on the " + date, 
      x, y+25);
  }

  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }
  }

  void move() {
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= friction;
    } else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= friction;
    } else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  }

  void display() {

    //fill ellipse
    fill(colorBall);
    ellipse(x, y, diameter, diameter);

    //show text
    fill(255, 255, 255);
    textSize(20); 
    text(country, x, y);
  }
}
//