let acceleration = 0.1;

let isAccelerating = false;

​

function setup() {

  createCanvas(400, 400);

  circle = new Circle(width / 2, height / 2, 30);

}

​

function draw() {

  background(220);

  if (isAccelerating) {

    circle.accelerate(acceleration);

  }

  circle.update();

  circle.display();

  // Reset the circle's position if it goes below the canvas height

  if (circle.position.y > height) {

    circle.position.y = 0;

  }

}

​

function keyPressed() {

  if (keyCode === DOWN_ARROW) {

    isAccelerating = true;

  }

}

​

function keyReleased() {

  if (keyCode === DOWN_ARROW) {

    isAccelerating = false;

  }

}

​

class Circle {

  constructor(x, y, r) {

    this.position = createVector(x, y);

    this.velocity = createVector(0, 0);

    this.acceleration = createVector(0, 0);

    this.radius = r;

  }

​

  update() {

    this.velocity.add(this.acceleration);

    this.position.add(this.velocity);

  }

  display() {

    ellipse(this.position.x, this.position.y, this.radius * 2);

  }

​

  accelerate(a) {

    this.acceleration.y += a;

  }

}

​