let viewportHeight;

let backgroundColor;

​

let ballDirectionX;

let ballDirectionY;

let ballPositionX;

let ballPositionY;

let ballRadius;

​

let onionSkin = true;

let startPaused = true;

​

let previousPositionX;

let previousPositionY;

​

​

function setup()

{

  viewportWidth = 640;

  viewportHeight = 480;

  backgroundColor = 220;

  ballDirectionX = 0;

  ballDirectionY = -40;

  ballPositionX = 100;

  ballPositionY = 100;

  previousPositionX = ballPositionX;

  previousPositionY = ballPositionY;

  ballRadius = 10;

  createCanvas(viewportWidth, viewportHeight);

  // Show at frame rates of 1, 5, 10, 30, 60

  frameRate(30);

  if (startPaused)

    noLoop();

}

​

​

function draw()

{

  background(backgroundColor);

  drawGrid();

  drawAxes();

  handleCollision();

  updateObjectPosition(); 

  drawObjects();

  printBallPosition();

}

​

​

function handleCollision()

{

  if(ballPositionX-ballRadius<0 || ballPositionX+ballRadius>viewportWidth)

    ballDirectionX = -ballDirectionX; 

  if(ballPositionY-ballRadius<0 || ballPositionY+ballRadius>viewportHeight)

    ballDirectionY = -ballDirectionY;

}

​

​

function updateObjectPosition()

{

  previousPositionX = ballPositionX;

  previousPositionY = ballPositionY;

  ballPositionX = ballPositionX + ballDirectionX;//Handling ball object position X

  ballPositionY = ballPositionY + ballDirectionY;//Handling ball object position Y

}

​

​

function drawObjects()

{

  if (onionSkin)

  {

    push();

    {

      stroke(0, 100);

      fill(255, 100);

      circle(previousPositionX, previousPositionY, ballRadius * 2);

    }

    pop();

  }

  circle(ballPositionX, ballPositionY, ballRadius * 2);  // Drawing the ball object1

}

​

​

function keyPressed()

{

  if (keyCode === 32)  // Spacebar

    togglePause();

  if (keyCode === SHIFT)

    frameStep();

  if (keyCode === 79)  // O

    toggleOnionSkin();

}

​

​

function togglePause()

{

  if (isLooping())

    noLoop();

  else

    loop();

}

​

​

function frameStep()

{

  if (isLooping())

    noLoop();

  redraw();

}

​

​

function toggleOnionSkin()

{

  onionSkin = !onionSkin;

}

​