In this post I will be going over some code that I put together for a basic bouncing ball canvas example. I will not be covering every little detail when it comes to this kind of example when it comes to advanced things pertaining to physics. However the canvas example will be about bouncing balls of of the edges of walls of the canvas at least for starters.
So lets start out with the ball module for this canvas example. This is just a simple collection of methods that will create and return a ball object of sorts, and then other methods that will work with such an object.
These days I am getting away from writing classes in favor of functional, or at least functional like modules. I am not suggesting that doing so is a better or worse way of doing things, it is just that I think it is time for me to start doing certain things a litter different now and then. In addition doing so gos beyond doing so just for the sake of novelty, as I find functional style programing cleaner, and easier to follow.
The first method that I made for my ball module is a function that just creates and returns a ball object. This object contains the x and y position of the ball, as well as the radius, heading, and delta value of the ball.
The delta value will be used in conjunction with the heading value to create a vector of sorts later on in this project. if you do not know what a vector is, it is just simply a direction and a magnitude. Or in other worlds an angle and a distance of length. Vectors are used in conjunction with points to create delta values of changes in the position of the points.
I then have another method that I can use to create a collection of ball objects. This method calls my create ball object method a bunch of times and thus creates an array of ball objects.
When calling the method I can pass a for ball method that will be called for each ball object. Within the body of that function I can define logic that will be used to set the initial conditions of each ball object.
Now for the method that moves the ball, and also checks to see if the ball hits any sides of the canvas. This works by passing a single ball object as the first argument, and then a canvas as the second argument. The method will step the position of the ball based on the current heading and delta value for the ball. If the ball goes out of bounds for the canvas element adjustments are made to the x, y and heading values.
So then this is thus far the method where I am moving a ball object, and also the method where the bouncing is happening.
In this section I will be going over the draw methods of this canvas example of bouncing balls. For now there are just two draw methods for this canvas example one for drawing a single ball object, and the other that draws a collection that just calls the draw ball method for each ball in a given collection. In time I will likely expand this section if I get around to sinking some more time into this example.
So I will want a draw method where I pass a ball object, and then a 2d context to draw to. The within the body of that draw method I just draw the current state of the ball object that was passed. I will also like a line drawn from the center of the ball outwards a little ways in the direction of the current heading of the ball.
Now that I have a draw ball method it is not so hard to make another draw method that will draw the whole collection. It just needs to loop over all the balls in the collection and draw the current status of each ball to the canvas.
Now for the rest of the canvas example that puts everything into action in main.js. Here I create the canvas element, as well as call my create ball collection method to get a ball collection to work with. There is also of course the main app loop of this canvas example here.
Now for just a little html to pull this all together.
The result when this is up and running is balls bouncing off the walls as expected. So the basic idea that I had in mind for this canvas example is working. However there is much more that comes to mind when it comes to cleaning this project up a bit, and also adding some additional functionality.
However there are things that I am getting right. When it comes to a project like this I am of course going to want to have objects that have an x and y property along with an angle that is the current heading and yet another that is the current distance to move from that point. So what needs to change has more to do with the logic that has to do with updating those values rather than the set of values themselves.
The basic idea of what I had in mind for this example is there, but there is much more to write about even when it comes to just making this basic kind of canvas example. I would like to develop or find a better routine for bounding that will work with walls, and also other display objects.