JavaScript Canvas Test

/*
JavaScript Animation Canvas Test
Jason Absolom
19 March 2018

A test demonstrating the use of canvas animations in JavaScript.

Reference videos:
https://www.youtube.com/watch?v=EO6OkltgudE
https://www.youtube.com/watch?v=83L6B13ixQ0
https://www.youtube.com/watch?v=yq2au9EfeRQ
*/

//set the canvas size to whole screen. Uses CSS to format the style.
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


//sets the "getContext" to a simple variable "C" for simplicity
var c = canvas.getContext('2d');

//function that draws and animates the circle
function Circle(x, y, dx, dy, radius, colour) {
    //creates local variables for the object.
    //These are passed when calling any function within and used only within this function
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.colour = colour;

    //draws circle using passed variables
    this.draw = function() {
        //console.log('test');
        //draw circle code used to create each circle
        c.beginPath();                                              //sets a new path for the drawing
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  //creates a circle
        c.strokeStyle = this.colour;                                //set line (stroke) style/colour
        c.stroke();                                                 //draw the outline using previous style
        c.fillStyle = this.colour;                                  //set circle fill style/colour
        c.fill();                                                   //fill circle using previous style
    }

    //Updates new position for circle (animates). Called from the animation loop (animate).
    this.update = function() {

        //sets the X limits for the animation movement taking into account the radius of the circle
        //If the edge is not reached then move circle based on DX/DY
        //If edge has been reached then invert DX/DY to move the opposite way
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }

        //increases the X/Y position of the circle based on the dx/dy amount which emulates velocity
        this.x += this.dx;
        this.y += this.dy;

        //redraws the circle in the new position calling the "Draw" function
        this.draw();
    }


}

//create arrays & variables
var circleArray = [];
var j = 0;

var colourArray = ["blue", "red", "yellow", "purple", "black", "pink"]; //set colours to be created
var radius = 50; //set size of balls
var speed = 1; //set movement speed
var balls = 30; //set number of balls

//generates variables for circles based on above variables
for (var i = 0; i < balls; i++) {

    var x = Math.random() * (innerWidth - radius * 2) + radius;     //selects random X/Y position in canvas taking circle radius
    var y = Math.random() * (innerHeight - radius * 2) + radius;    //into account so circles to not draw half outside canvas
    var dx = (Math.random() - 0.5) * speed;                         //sets a random velocity for X/Y
    var dy = (Math.random() - 0.5) * speed;

    //cycles through the "colourArray" and picks sequentially a colour for each circles fill
    colour = colourArray[j];
    j++
    if (j == colourArray.length) {
        j = 0;
    }

    //stores all variables in an array
    circleArray.push(new Circle(x, y, dx, dy, radius, colour));
}
//test point to view the circle data for each entry
console.log(circleArray);


//animation function
function animate() {
    requestAnimationFrame(animate);                 //creates a loop by requesting the same function with every animation frame
    c.clearRect(0, 0, innerWidth, innerHeight);     //clears the canvas on every frame
    for (var i = 0; i < circleArray.length; i++) {  //redraws all circles on canvas from array
        circleArray[i].update();                    //calls "update" function to move and redraw circles
    }


}

//calls animation function above
animate();