Reflection on Ball Animation

You can find this project here

Since the beginning of the 2D development toolkit unit, I have encountered programming techniques both familiar and new. Some of the programming techniques I used during this project were:

  • overlap detection
  • drawing API
  • basic 2D physics
  • random number generation
  • random colour generation
  • event listeners
  • recursion
  • objects

In the past, I have used a lot of random number generation as well as recursion to create game loops and random encounters. I found the random colour generation a logical step up from generating random numbers.


function generate_hex() {       //generates a random hexadecimal colour value and returns it
    var str = "0123456789ABCDEF";
    var random_int = 0;
    var result = "#";
    //loops to generate 6 random values between 0-15 to use to pick a hex value
    for (var i = 0; i < 6; i++) {
        random_int = Math.floor((Math.random() * 16));
        result += str[random_int];
    }
    return result               //returns the hexadecimal colour value
}

Despite coding for the past four years, I have never created a program with a graphical user interface, so I haven’t needed to create random hex values before. I was surprised at how easy it was to take a basic loop and Math functions and get a value back which can be used for visual objects.


function render() {
    for (var i = 0; i < total_balls; i++) {
        update(balls[i]);
    }
    draw_ball();
    requestAnimationFrame(render);
}

Creating a drawing API from scratch was shockingly easy, and the steps we followed to create it were logical. To continually update the image on-screen, we utilised recursion, a technique in which a function makes a call to itself. Without an exit case or a limit on resources, these can theoretically loop forever.

The render() function operates by looping through each ball on-screen and updating its position by calling the update() function and passing a ball from the balls array to it. The balls array stores objects which contain information about each individual ball on-screen at any time.

Once it has looped through each ball on-screen, the is_overlapped() function is called to check if any balls are overlapping one another, so that they can change colour if they are. draw_ball() is called so that all the balls are now redrawn in their new positions as calculated by the update() function. requestAnimationFrame(render) works by calling the render() function every time the screen refreshes, ensuring that the visuals are always up-to-date.

In conclusion, I found this animation section very useful, as it opened me up to the ease with which visuals can be created and displayed to the user on a webpage. In the past, I have been intimidated by the idea of creating a program with graphics, thinking that it was more complex than it has proven to be. I am pleased to say that I am excited about seeing what else I can create in the future using 2D animation.

Leave a Reply