How to pass object to animation function in JavaScript?

Question

I have been trying to make a JavaScript animation of moving circle in HTML Canvas without using global variables. I am using requestAnimationFrame function. Since JavaScript does not support passing variable by reference, I tried creating a Circle class:

class Circle{
  constructor(x, y, dx, dy) //set initial position and velocity of circle
  {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
  }
}

function moveCircle(circle, other variables)
{
  //clear canvas
  //calculate new position and velocity using circle.x, etc.
  //save new values to the object
  //draw new circle into the canvas

  requestAnimationFrame(moveCircle);
}

function button()//function called after click on button
{
  //initial settings of canvas, intial condition

  circle = new Circle(x, y, dx, dy);
  moveCircle(circle, other vars);
}

This makes one frame and then throws error "Cannot read property 'x' of undefined". What am I doing wrong? Is there any other way of doing this, while avoiding global variables?

Answer 1

First of all, you don't need to create a class you can just pass the coordinates in an object or as separate arguments. Secondly you should use Function#bind on requestAnimationFrame to pass the same arguments to next call.

Example using object:

function moveCircle(circle) {
  console.log(circle.x);
  if (circle.x) {
    circle.x -= circle.dx;
    requestAnimationFrame(moveCircle.bind(null, circle));
  }
}

function button() {
  moveCircle({
    x: 500,
    y: 0,
    dx: 20,
    dy: 0
  });
}

button();

Example without object:

function moveCircle(x, dx) {
  console.log(x);
  if (x) {
    requestAnimationFrame(moveCircle.bind(null, x - dx, dx));
  }
}

function button() {
  moveCircle(500, 20);
}

button();