CODEWITHSUNDEEP
javascript
King Katana
King Katana

Reputation: 21

how to change the color of an ellipse to random colour

I am new to Javascript and want to learn it. There is a guy on youtube who has a tutorial on Javascript and every time at the end of a tutorial he challenges us to change his code a little bit while using the thing he went through in the tutorial. He wrote a code that makes the ball bounce when it hits the corners and he challenged us to make it have a new colour every time it bounces.

I managed to write a function that changes the colour and it works but only if you put // before "fill(200,0,200);". If you, however, remove the // and use "fill(200,0,200);" it will only display the colour "pink" even though it will change to a random colour while you have // before "fill(200,0,200);".

So my question is. How do I change the ellipse to a random colour while keeping "fill(200,0,200);"

I've tried to solve this problem quite some time now, but to no prevail.

var r,g,b;

var ball = {
 x: 300,
 y: 200,
 xspeed: 4,
 yspeed: -3
}

function setup() {
 createCanvas(600, 400);


}

function draw() {
 background(0);
 move();
 bounce();
 display();
 colorChange();
 r = random(255);
 g = random(255);
 b = random(255);

}



function bounce() {

 if (ball.x > width || ball.x < 0) {
  ball.xspeed = ball.xspeed * -1;
 }

 if (ball.y > height || ball.y < 0) {
  ball.yspeed = ball.yspeed * -1;
 }
}

function display() {
 stroke(255);
 strokeWeight(4);
 fill(200,0,200);
 ellipse(ball.x, ball.y, 24, 24);



}

function move() {
 ball.x = ball.x + ball.xspeed;
 ball.y = ball.y + ball.yspeed;

}


 function colorChange() {
  if (ball.x >= width || ball.x <= 0 || ball.y >= height || ball.y<= 0) {
    fill(r,g,b);
    ellipse();


  }



 }

Upvotes: 2

Views: 2248

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

There is a lot of code not shown in the question so I can't very easily give you a working demo, which I normally like to do, but in general terms the first thing I would do is give the ball a color property, since that is something that belongs to the ball:

var ball = {
  x: 300,
  y: 200,
  xspeed: 4,
  yspeed: -3,
  color: { r: 200, g: 0, b: 200 } // else you could use an array [200, 0, 200]
}

So that gives us the starting value. Calls to fill will now change to:

fill(ball.color.r, ball.color.g, ball.color.b); // or if using the array: fill(ball.color[0], ball.color[1], ball.color[2]);

I'd adjust the colorChange function to update the ball's color property, like so:

function colorChange() {
  ball.color.r = random(255);
  ball.color.g = random(255);
  ball.color.b = random(255);
}

Finally we want to change color only when bouncing, so the best place to trigger this is in the existing code when a bounce is detected (and the direction changes):

function bounce() {
  if (ball.x > width || ball.x < 0) {
    ball.xspeed *= -1;
    colorChange();
  }

  if (ball.y > height || ball.y < 0) {
    ball.yspeed *= -1;
    colorChange();
  }
}

Note I've used the shortcut for writing ball.yspeed = ball.yspeed * -1;. You can do the same for the move function by using ball.x += ball.xspeed; etc. if you want.

Upvotes: 1

Related Questions