How can I randomize the color of my bouncing ball program?

Question

For class we are doing a simple Javascript bouncing ball program. However for the final part of the assignment we have to include a mechanic like changing the speed when it hits the canvas wall, changing its color, the size of the etc. I have decided to try and do the color change seeing as its pretty much the easiest one I figure and I'm not too code savvy. However I have done everything I could find to get the ball to change to a random color when it hits the wall and it appears to have redrawn on collision but remains the same color until the page is refreshed. Can anyone tell me what I am missing?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jay Aguiar">
<title>Week 1 Animation</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>

<body>
    <canvas id="canvas" width = "1024" height ="800" >
        Your browser is outdated and does not support HTML5. Please 
 update to the latest version.
    </canvas>    
</body>

<!-- Do not change this-->
<script type="text/javascript" src="js/Ball.js"></script>

<!-- 
        Change the src of the following script tag to the file you want 
to view.
        Your options are: 
        js/week1_basic_movement.js
        js/week1_boundary_detection_loop.js
        js/week1_boundary_detection_bounce.js
-->

<script type="text/javascript" src="js/week1_basic_movement.js"> 
</script>
</html>

Javascript for the Ball

function Ball()
{   
    this.x = canvas.width/2;
    this.y = canvas.height/2;

    this.width = 100;
    this.height = 100;

    this.vx = 0;
    this.vy = 0;

    this.force = 1;

    this.color = getRandomColor();

    this.draw = function()
    {
        context.save();
        context.fillStyle = this.color;
        context.translate(this.x, this.y);
        context.beginPath();
        context.arc(0, 0, this.width/2, 0, 360 * Math.PI);
        context.closePath();
        context.fill();
        context.restore();
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    //This changes the player's position
    this.move = function()
    {
        this.x += this.vx;
        this.y += this.vy;
    }

}

Javascript for movement and color change

var canvas;
var context;
var timer;
var interval = 1000/60;
var ball;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");  
ball = new Ball();

ball.vx = 3;
ball.vy = 3;

timer = setInterval(animate, interval);

function animate()
{
    context.clearRect(0,0,canvas.width, canvas.height); 
    ball.move();

    if(ball.x > canvas.width - ball.width/2)
    {
        ball.vx = -ball.vx;
        context.fillStyle = getRandomColor();
    }
    else if(ball.x < ball.width/2)
    {
        ball.vx = -ball.vx;
        context.fillStyle = getRandomColor();
    }

    if(ball.y > canvas.height - ball.height/2)
    {
        ball.vy = -ball.vy;
        context.fillStyle = getRandomColor();
    }
    else if(ball.y < ball.height/2)
    {
        ball.vy = -ball.vy;
        context.fillStyle = getRandomColor();
    }

    ball.draw();
}

Possible duplicate of [Best way to generate a random color in javascript?](https://stackoverflow.com/questions/1152024/best-way-to-generate-a-random-color-in-javascript) — Sjeiti, Apr 03 '19 at 19:19

score 1 · Answer 1 · answered Apr 03 '19 at 19:18

You are resetting context.fillStyle on every call to ball.draw() back to the value that is held in the Ball property color. Remove that logic and it works like a charm (although the code could definitely use some cleanup/reformatting).

Run the snippet to see!

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}

function Ball()
{

  this.x = canvas.width/2;
  this.y = canvas.height/2;


  this.width = 100;
  this.height = 100;


  this.vx = 0;
  this.vy = 0;

  this.force = 1;

  this.draw = function()
  {
      context.save();
      context.translate(this.x, this.y);
      context.beginPath();
      context.arc(0, 0, this.width/2, 0, 360 * Math.PI);
      context.closePath();
      context.fill();
      context.restore();
  }

  //This changes the player's position
  this.move = function()
  {
      this.x += this.vx;
      this.y += this.vy;
  }
}

var canvas;
var context;
var timer;
var interval = 1000/60;
var ball;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");  
ball = new Ball();

ball.vx = 3;
ball.vy = 3;

timer = setInterval(animate, interval);


function animate()
{
  context.clearRect(0,0,canvas.width, canvas.height); 
  ball.move();

  if(ball.x > canvas.width - ball.width/2)
  {
      ball.vx = -ball.vx;
      context.fillStyle = getRandomColor();
  }
  else if(ball.x < ball.width/2)
  {
      ball.vx = -ball.vx;
      context.fillStyle = getRandomColor();
  }

  if(ball.y > canvas.height - ball.height/2)
  {
      ball.vy = -ball.vy;
      context.fillStyle = getRandomColor();
  }
  else if(ball.y < ball.height/2)
  {
      ball.vy = -ball.vy;
      context.fillStyle = getRandomColor();
  }

  ball.draw();
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jay Aguiar">
<title>Week 1 Animation</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>

<body>
    <canvas id="canvas" width = "300" height ="190" >
        Your browser is outdated and does not support HTML5. Please 
 update to the latest version.
    </canvas>



</body>

</html>

How can I randomize the color of my bouncing ball program?

1 Answers1