// here we are defining some global variables that we need access to in our whole program

let randomSize = () => {
  return Math.random() * (50 - 5) + 5;
}

let randomColor = () => {
 return '#'+Math.floor(Math.random()*16777215).toString(16);
}

// if you want to draw lots of circles you'll use this function
let drawCircle = (circle) => {
  ctx.fillStyle = circle.color; // set the color
  ctx.beginPath(); // telling canvas we're about to define a path.
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, true); // x&y coordinates, the size, ..?, pi*2 for radius, true? defines we are drawing a cirlce. You can draw all sorts of curves with .arc
  ctx.fill(); // fill defines it's colored in, instead of just an outline or something like that.
}

// if you want to draw lots of rectangles you'll use this function
let drawRect = (rectangle) => {
  ctx.fillStyle = rectangle.color; // set the color
  ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
}; // pass in x,y, width & height to fill in a rectangle with color


let c; // the canvas element on the page
let ctx; // the canvas context that we draw on
let ball = {
  color: '#FFF',
  x: 100,
  y: 100,
  radius: randomSize(),
  speedX: 10,
  speedY: 4
};
let background = {
  color: '#000',
  x: 0,
  y: 0
};
const fps = 60;

// this is boilerplate code that everyone uses to makes sure we're rending our code when the browser is ready which is supposed to help it run smoothly and efficiently
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / fps);
          };
})();

// window.onload means once the browser is done loading and ready to start doing things, it's very common on every web project that runs javascript at all
window.onload = ()  => {
  c = document.getElementById('canvas');
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  
  ctx = c.getContext('2d');
  
  background.width = c.width;
  background.height = c.height;
  
  animationLoop(); // run our animationLoop function
}

let animationLoop = () => {
  requestAnimFrame(animationLoop); // we run that boilerplate code which tells this to run 60 times a second
  render(); // run our function that defines all the drawing that's done every frame.
}

let render = () => {
  // all of your render code goes here
  drawRect(background);
  
  ball.x += ball.speedX;
  ball.y += ball.speedY;
  
  if (ball.x >= c.width || ball.x <= 0) {
    ball.speedX = -ball.speedX;
    ball.color = randomColor();
    ball.radius = randomSize();
  }
  if (ball.y >= c.height || ball.y <= 0) {
    ball.speedY = -ball.speedY;
    ball.color = randomColor();
    ball.radius = randomSize();
  }
  
  
  drawCircle(ball);
}