0

I wrote a simple bouncing ball animation using Two.js. It's just a ball bouncing off the walls. It works just fine for me in Chrome, but in Firefox, the ball disappears and reappears a few seconds later in another part of the screen, meaning that the ball is moving, just randomly becomes briefly invisible.

Here is my code:

var elem=document.querySelector("div");
var h=window.innerHeight;
var w=window.innerWidth;
var two=new Two({fullscreen: true}).appendTo(elem);
var vy=5, vx=5;

var circle1=two.makeCircle(300,200,50);
circle1.fill="orange";
circle1.stroke="purple";
circle1.linewidth=5;

two.bind("update", function(frameCount){
    circle1.translation.x+=vx;
    circle1.translation.y+=vy;
    if(circle1.translation.x+30>w||circle1.translation.x-30<0){
        vx*=-1;
        circle1.translation.x+=vx;
    }
    if(circle1.translation.y+30>h||circle1.translation.y-30<0){
        vy*=-1;
        circle1.translation.x+=vy;
    }
}).play();

JSFiddle Example

Again, the same thing works just fine in Chrome.

Also, it works fine in both Chrome and Firefox if I replace the div with a canvas and use this instead:

var canvas=document.querySelector("canvas");
var w=window.innerWidth, h=window.innerHeight;
canvas.width=w;
canvas.height=h;
var context=canvas.getContext("2d");
var vx= 5, vy=5;

var ball={
    x: 300,
    y: 200,
    radius: 50
};

function draw(){
    context.fillStyle="orange";
    context.beginPath();
    context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
    context.closePath();
    context.fill();
}

(function animate(){
    var timer=setInterval(function(){
        context.clearRect(0,0,w,h);
        ball.x+=vx;
        ball.y+=vy;
        if(ball.x+ball.radius>w||ball.x-ball.radius<0){
            vx*=-1;
            ball.x+=vx;
        }
        if(ball.y+ball.radius>h||ball.y-ball.radius<0){
            vy*=-1;
            ball.y+=vy;
        }
        draw();
    },1000/60);
}());

If anyone can explain this strange behavior, that would be great.

AlliterativeAlice
  • 11,841
  • 9
  • 52
  • 69
Yulek
  • 331
  • 3
  • 12

0 Answers0