How to randomize background color, bouncing ball

Hi guys,

So I'm just getting started with processing and have little knowledge on it. Anyhow, I'm trying the bouncing ball problem and for every time it threatens to go outside the width of the screen the ball will bounce back; I've got that part covered.

Now I want it to not only bounce back and forth, but also change the background color for each time it hits the side.

What I've got so far is:

float ballX; float xspeed = 3;

void setup(){ size(500,400); ballX=0; background(0);

}

void draw(){ fill(255); ellipse(ballX,height/2,24,24);

ballX = ballX + xspeed;

if(ballX>500 || ballX<0){ xspeed=xspeed*-1;

if(ballX>500 || ballX<0){ background(random(255),random(255),random(255)); } }

This was the only way I got the background to stay that random color until the ball hit the opposite wall and changed again. When I had background(0); in void draw it would only flash a color and than turn back to black each time it hit a wall. The only problem I have now is that the ball is traced, just a long streak of white until it hits a wall and changes color.

How can I change this so that it looks normal, without the ball being traced?

Answers

  • edit post, highlight code, press ctrl-o to format

  • Answer ✓

    use a global variable, color bg, set it to 0 in setup()

    call background(bg) at the start of draw - clearing the screen to the current background colour every frame.

    change bg on every bounce.

    (look up color in the reference)

  • edited January 2018

    Thank you so much, I figured I had to make it a variable. Didn't know color could just be a variable too. Thank you!

    Ended up with;

    float ballX;
    float xspeed = 3;
    color bg;
    void setup() {
      size(500, 400);
      ballX=0;
    }
    
    void draw() {
      background(bg);
      fill(255);
      ellipse(ballX, height/2, 24, 24);
    
      ballX = ballX + xspeed;
    
      if (ballX>500 || ballX<0) {
        xspeed=xspeed*-1;
    
        if (ballX>500 || ballX<0) {
          bg = color(random(255), random(255), random(255));
        }
      }
    }
    
  • Answer ✓

    How to post in the processing forum.

    Best is to hit ctrl-t in processing first before copy paste into the forum (https://forum.processing.org).

    You can edit your post (click the small gear and the 'Edit').

    How to format Code:

    empty line before and after the code section
    
    select (highlight) entire code with the mouse
    
    hit ctrl-o OR click the small C in the command bar
    
  • edited January 2018

    before setup() you can already say

     color bg = color(random(255),random(255),random(255));
    

    to start with a random color (and not with black)

    Remark

    this is too complicate:

    if(ballX>500 || ballX<0){ xspeed=xspeed*-1;
    
    if(ballX>500 || ballX<0){ bg = color(random(255),random(255),random(255)); } }
    

    because you have the same condition twice.

    Instead:

    if(ballX>500 || ballX<0) { 
    
        xspeed=xspeed*-1;
        bg = color(random(255),random(255),random(255)); 
    
    }
    

    Remark

    Why not let the ball fly diagonally, so change its x and y position?

  • Hey Chrisir,

    Thanks for pointing out how to correctly show code on this forum, wasn't sure how to and was in a rush to get it on here.

    As to putting color to random at the beginning, I want the color to start at black; which at the moment it is doing. If there is a better way to do so; or to command it to always begin with a certain color do let me know.

    And you are right; it was too complicated. I was figuring out how to get the color to randomize and moved some things around to see if that worked and got the double condition to see if it made a difference, which it didn't but later forgot to edit it out. Thanks!

  • Answer ✓

    before setup() you can say

    color bg = color(0);
    

    or

    color bg = color(255,0,0);
    

    Why not let the ball fly diagonally, so change its x and y position?

  • Ah, that is great! Thank you.

    And yes, letting the ball fly diagonally is the next step. Getting on with that later today. :)

  • edited January 2018

    for commands / data types like color look at the reference:

    https://www.processing.org/reference/

  • edited January 2018

    since your diameter (or radius?) is 24

    this

    if(ballX>500 || ballX<0)

    could be

    if(ballX>500-24 || ballX<24)

Sign In or Register to comment.