Javascript animation: doesn't start with given coordinates

Question

I have a little animation with a Ball
It start with drawing the Ball in the center of the context, but when the movement starts, it starts randomly outside the context!
https://www.sololearn.com/compiler-playground/WUPgd9kH76de
or with color change:
https://www.sololearn.com/compiler-playground/WMaw1OSI320K/

Answer 1

SL Web links not working currently.
Use app links.
https://code.sololearn.com/WUPgd9kH76de

https://code.sololearn.com/WMaw1OSI320K/

edit: hope Web coders may find issue..

Answer 2

I logged temps and found the initial value is based on how long it takes to click start but the following temps' values averaged 0.012.

I would suggest moving the code at line 72 to the start handler, be sure to initiate t outside the handler

https://code.sololearn.com/WWku22N4E5kU/?ref=app

Answer 3

Thank You ODLNT, it's work now.

Answer 4

This forum, or more specifically, the users are so awesome!
Thanks guys

Answer 5

Zedday Christine You're welcome. I'm glad I could help.
Ausgrindtube Yeah, you're right our community is pretty awesome!

Answer 6

I'm not sure why, but I'm unable to view your links. Can you hit the little plus or insert button, choose code and attach it that way?

Answer 7

I believe the problem is that you stop the animation but not the function, so it's still randomly moving around and when the user hits start again, that's where the ball begins from.

Answer 8

Thank you all, where is insert button?
I tried a boolean to stop the function but it doesn't change.

window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var IDanim;
let Ballon = {
color: "purple",
centreX: 150,
centreY: 150,
radius: 50,
dirX : false,
dirY: false,
moving: false,
speed: 200 ,
draw: function() {
context.clearRect(0,0,300,300);
context.beginPath();
context.fillStyle = this.color;
context.arc(this.centreX,this.centreY, this.radius,0,2*Math.PI);
context.fill();
},
move: function() {

this.moving = true;

let temps = (Date.now() - t)/1000;
t= Date.now();

let mouv = this.speed * temps;
rnd = getRandomInt(1,4);

switch (rnd){
case 1:
this.dirX? this.centreX -=mouv : this.centreX += mouv;
break;
case 2:
this.dirY? this.centreY -=mouv : this.centreY += mouv;
break;
default:
this.dirX? this.centreX -=mouv : this.centreX += mouv;
this.dirY? this.centreY -=mouv : this.centreY += mouv;
}

if (this.centreX >= 250 ) { this.dirX = true }
if ( this.centreX <= 50 ) { this.dirX = false }
if (this.centreY >= 250 ) { this.dirY = true }
if ( this.centreY <= 50 ) { this.dirY = false }

if (this.moving) {

this.draw();
IDanim = window.requestAnimationFrame(this.move.bind(this));
}

},
}

let start = document.getElementById("start");
start.addEventListener("click", function () {
IDanim = window.requestAnimationFrame(Ballon.move.bind(Ballon));;
Ballon.moving = false;

Answer 9

When you are writing a comment, next to the post button is a circle with a plus "+" symbol inside. You choose insert code and then choose "My codes" and then you can add your code.

I've been playing around with how to stop the function too. I haven't had any success yet.

Answer 10

That's rather puzzling, I understand the time before the animation starts, resulting in a different position, but not why the ball goes outside the canvas. The browser needs to launch the ball, lol!