Smart-ish bouncing ball

Processing Coding Questions
#1

Hello,

Thanks for taking the time to click on this query.

I’m currently learning how to bounce balls around the window, and wondered whether it is possible to make the ball see the trail it leaves behind it and interact with said trail if it comes back into contact with it.

The x and y coordinates of the ball (coloured white) are continually checked against the position of the ‘walls’ (for lack of a better word), in order to know when it is ‘bounce’.

With the background(0) function omitted from the draw loop (but not from setup), as the ball bounces around the window, it leaves a white trail behind it.

Is it possible to make the ball to see this trail, and treat it like a wall, and bounce accordingly.

I’m sure this is, but being relatively new to Processing / coding, I’m not sure what technique / approach would be used to achieve this i.e. is it possible to interrogate the colours (ahead of the ball) in the window itself as they develop, or would I have to keep a record of all of the ball’s x & y coordinates and check against its current position to know when to bounce or not etc.

Many thanks,
Scolty

#2

Hello scolty2021,

Everything is possible =)

Both of your solutions could work. I would go for the second one because it allows for more control on the final result. But it also means a bit more work as you will have to create an array, update that array (add new positions and delete old ones), check current position against all previous one and so on…

If you want to go for the first solution with checking the color, a quick and dirty way to get a fading effect is to draw a semi-transparent rectangle on top of your window before drawing your new position. This way the old position are not eliminated straight away but rather fade away slowly. Then, it is easy to check the pixel color in front of your ball and if it is different from your background then it collides with your trail.

Quick demo of the easy trailing effect:

void setup() {
  size(800, 600); 
  
  background(20);
  noStroke();
}

void draw() {
  fill(20, 20, 20, 30);
  rect(0, 0, width, height);
  
  fill(230);
  ellipse(mouseX, mouseY, 20, 20);
}
2 Likes
#3

Hi jb4x,

Thank you for replying, and so promptly (apologies for the late response, I posted at 11pm and called it a day very soon after).

I’m actually quite keen to try both method, to develop my Processing vocab.

Using the array method (2nd approach), I’m assuming you wouldn’t want to store every XY position, but instead keep track of the bounce locations then interpolate a trajectory (between bounces) to check the ball’s current position against? I guess this’ll only work if the ball travels in a straight line also (i.e. no gravity).

With regards to the 1st method, what command would you use for interrogating the colour of a pixel in the window. I noticed in my Learn Processing (by Daniel Shiffman) that there is a pixel function for determining the RGB of a particular pixel, but from what I can tell, this only works on a static image i.e. one that is loaded in setup. (though, I’ve probably misinterpreted)?

Many thanks for the fading tail demo, what a great approach, very cunning… looks awesome!

Kind regards,

Scolty2021

#4

Hi again,

If you want to use the array method, the easy way to go is to store every XY position. Depending on your use case (number of balls, save history of the tail, …) it should be ok (performance wise) to do so.

If you want to get fancy and you care a lot about performance then I guess you can only store the start point of the trajectory and the last point of the trajectory (if they are bouncing in straight line of course) and only add a new point when bouncing of a wall. But dealing with the trail can be more challenging then…

For the pixels, you can use the loadPixels() function to load what is currently displayed in the pixels[] array so you can read the color of a pixel from that array. Keep in mind that pixels[] is a 1D array, so your 2D space is mapped to a 1D space. The way it works is that it reads pixels from left to right and top to bottom (like an English book).

So if you want to read the color of a pixel at position [x,y] you would compute an id = y * width + x and use that id to get the information you need: pixels[id]

Best regards

#5

Hi,

Thanks for replying, I apologise for the late response.

I have been trying out the storing XY positions in an array method, its taking a bit longer than I thought it would to code (though this is more because of my lack of coding experience), but getting there, fingers crossed.

The pixels[] route, sounds quite a bit more complicated, with it being stored in a 1D array (which I hadn’t realised), but I still intend to try this. Once / if I get the other method to work.

Anyway, thanks again for replying to my post, your help is much appreciated.

Kind regards,

Scolty2021

#6

Hey scolty, no need to apologize! Happy I was able to help. If you have any other questions, d’ont hesitate to ask =)

#7

Thanks :slight_smile: