javascript - Circular animation speeds up after running a while -

i hope can me out here have meet nemesis... math!

i making background animation run , works fine exept 1 litle thing, speeds tiny amount on long time.

i have extracted code essential script.

the animation simple, creates bunch of circles move around in circular motion ever. faster/slower , bigger/smaller randomly on creation.

so if animation runs let's 40min~ circular animation have increased it's speed lot!

the constructor run 100 times , instances put in particles array, here set default values when instantiating circles

constructor(){    this.radius = 100;    this.xpos = math.round(math.random() * canvas.width);    this.ypos = math.round(math.random() * canvas.height);    this.counter = 0;    this.maxwidth = 14;    this.width = math.floor(math.random() * (this.maxwidth - 4) + 4); //4 -> 24    this.speed = math.random() * 0.4; //0.0 -> 0.4    this.color = "#3cccd3";    this.alpha = this.getalpha();     this.sign = math.round(math.random()) * 2 - 1;  }  

the draw method run in animation loop, have checked many examples on animating circular motion , seems popular way it, there animation dont speed mine :)

draw() {   this.counter += this.sign * this.speed;    ctx.beginpath();   //define circleparticle   ctx.arc(this.xpos + this.radius * math.cos(this.counter / 100) ,         this.ypos + this.radius * math.sin(this.counter / 100) ,         this.width,         0,         math.pi * 2,         true);     ctx.globalalpha = this.alpha;   ctx.fillstyle = this.color;   ctx.fill(); } 

and loop

function draw() {     ctx.clearrect(0, 0, canvas.width, canvas.height); //empty canvas     particles.foreach((particle) => particle.draw()); //run draw method      if(playparticles && !gamefocus) {       requestanimationframe(draw); //rerun     } } 

update here fix

in constructor

this.speed = 100 + math.random() * 500; 

in draw method

this.timestamp = math.floor(date.now()); this.counter = this.sign * (this.timestamp / this.speed * math.pi); 

i can not find in code explain continuous increase in rotation speed.

however, speed of animation product of how draw method called. increment counter fixed amount each invocation, there no guarantee called @ given frequency.

requestanimationframe call draw function each time ready new rendering. timing of vary depending on number of things, such time need each draw, total computational load of webpage, total cpu load of device or power settings.

instead of making counter product of draw methods call count, consider making product of time. reason, first argument callback of requestanimationframe timestamp should used current time in each part of rendering.

edit: example code

the code below simplified example, producing x , y describe circular motion of 1 revolution per second.

requestanimationframe(     function(timestamp) {         var counter = timestamp / 1000 * math.pi;         var x = math.cos(counter);         var y = math.sin(counter);         // x , y     } );