Introduction/The Idea:
After some thinking, I decided to create a projectile motion simulation that can calculate the distance traveled. I decided to do this instead of a simpler project because I had already experimented with creating canvas animations earlier in the year during my free time. I had ended up making a simple animation that dropped a square wherever you clicked on the canvas. I decided to build this into a full-fledged projectile simulation.
A Crash Course on Web Design:
The programming languages I used for the application were HTML, CSS, and Javascript. A good analogy to how these programming languages fit together to make web applications would be a person. HTML would be the actual "body" of the person. CSS would be the clothes they wear. Javascript would be the "brains" of the person. What HTML does, if you didn't already know, is that it gives the framework for your program. You use HTML to create buttons, text boxes, containers, and links. CSS, on the other had, is what is used to style the pages you made in HTML. Normal HTML pages are very basic and unaesthetic. CSS helps to position elements, change the color, size and borders they have, resize elements for different browsers, and generally give the website "style". Javascript gives the web page functionality. It tells the web page what to do when a button is pressed, or a picture is clicked, or when the page loads. This is what I used to animate my simulation. I'll only go over the HTML and CSS code briefly, as most of the work I did was in Javascript.
How It Works (the code):
The HTML in my project basically set up all the inputs and outputs I needed for my program. The inputs are what will be used to set properties for each projectile that is fired. These include buttons, textboxes, and dropdown menus. The output, of course, is the canvas itself. The CSS moved the different elements around to make it easier to work with, along with giving it a color scheme and overall making it look nicer. The Javascript is what animates the projectiles in the program. What this section will cover is mainly focused on this.
Basically, how it works is that when the page loads, several variables and arrays are created for the more important data that needs to be saved. A variable is a way to store data without having to write it all out. An array is a way to store data without having to manually make multiple variables. It's best to store data this way due to it being easier to make and fix. Imagine having to describe all the features of a person just to call them to you. It's much easier to just give that person a name and use that instead. The name represents the person, just as the variable represents the data. Once this is done, it automatically runs the program once, just to show the user what the simulation does. I'll get into how that works later. Whenever you press the go button, it uses the DOM (a way to access HTML elements with Javascript) to get all the values you set in the Settings tab and put them into variables. This is what the createObjectOnClick() function does. A function is basically a way to run the same code over and over without having to type it out. Think of the person example I gave for variables. Instead of having to describe the same properties every time you want the person to come, giving it a name and using that is easier. Only this time, instead of giving a name to a bunch of data, you are giving a name to a bunch of code.
Now here comes the interesting part: how it's animated. Once the createObjectOnClick() function finishes putting the properties of the object into variables, it actually gives it to the object. Remember those variables and arrays that were declared when the page loaded? Among those is an array called allObjectsCreated, and it stores the Objects that are created whenever you press the go button. Notice how I capitalized the word "objects". That's because in Javascript, there are something called Objects, which are basically arrays that can store code as well as regular data, They are helpful for storing properties of whatever you want, such as color and size, as well as functions to run. In this case, the object stores all the properties createObjectOnClick() made. It also stores an update() function, which basically tells the object what to do based on whether it touched the ground or not. If it is not touching the ground, it will keep accelerating the object downwards based on the gravity value. If it is, and bouncing is turned on in settings, it will flip the velocity to a positive in order to make it go upward. This part of the function is run every 20 milliseconds, and runs for all the projectiles in the simulation. However, since there is only one object, then in order to be able to save for multiple properties, the keyword new has to be used in createObjectOnClick(). This basically makes a new object at runtime that stores the properties. This new object is put into an array, which is how you access each projectile. In this way, you can create many objects and not have the code break.
Now this next part explains what you might have noticed earlier: how the code is actually made to run every 20 milliseconds. In order to do this, you have to use the setInterval(arg1, arg2) method. This is a default method in Javascript and makes whatever the code you write in arg1 repeat for however many milliseconds you put in arg2. You can put a function in arg1, which is what I did so I don't have to run a giant block of code within the parenthesis. Also, to make the function creatObjectOnClick() actually run once, all you have to do is declare it with parenthesis outside of where it is called. So you create the function like this (ignore the brackets): [ function foo() {//code} ] and call it like this[ foo() ].
Anyways, that is how the most important bits of my program work. Everything else deals with smaller issues such as creating a pop-up when certain conditions are met and looping through the array that holds the properties of all the objects.
Basically, how it works is that when the page loads, several variables and arrays are created for the more important data that needs to be saved. A variable is a way to store data without having to write it all out. An array is a way to store data without having to manually make multiple variables. It's best to store data this way due to it being easier to make and fix. Imagine having to describe all the features of a person just to call them to you. It's much easier to just give that person a name and use that instead. The name represents the person, just as the variable represents the data. Once this is done, it automatically runs the program once, just to show the user what the simulation does. I'll get into how that works later. Whenever you press the go button, it uses the DOM (a way to access HTML elements with Javascript) to get all the values you set in the Settings tab and put them into variables. This is what the createObjectOnClick() function does. A function is basically a way to run the same code over and over without having to type it out. Think of the person example I gave for variables. Instead of having to describe the same properties every time you want the person to come, giving it a name and using that is easier. Only this time, instead of giving a name to a bunch of data, you are giving a name to a bunch of code.
 |
| Lines 1-13 are where I declare my global variables and arrays. |
 |
| Lines 213-237 are where I declare the variables for each property the projectile will have. |
 |
| At the bottom, lines 310-312 push the variable properties into each created instance (or copy) of the object. Then that gets put into an array that has all the properties of the projectiles. |
 |
| Lines 47-71 handle what happens when the projectile hits the ground. |
Now this next part explains what you might have noticed earlier: how the code is actually made to run every 20 milliseconds. In order to do this, you have to use the setInterval(arg1, arg2) method. This is a default method in Javascript and makes whatever the code you write in arg1 repeat for however many milliseconds you put in arg2. You can put a function in arg1, which is what I did so I don't have to run a giant block of code within the parenthesis. Also, to make the function creatObjectOnClick() actually run once, all you have to do is declare it with parenthesis outside of where it is called. So you create the function like this (ignore the brackets): [ function foo() {//code} ] and call it like this[ foo() ].
Anyways, that is how the most important bits of my program work. Everything else deals with smaller issues such as creating a pop-up when certain conditions are met and looping through the array that holds the properties of all the objects.
Final Product:
My final product is a projectile motion simulator that calculates the distance it travels while helping you learn different facts about projectile motion in general. It's features include:
- projectile motion visuals
- customizable:
-gravity
-initial velocity
-friction
-projectile type
-cliff height
-launch angle
-projectile tracing (can be turned off)
-bouncing (can be turned off)
-sliding (can be turned off)
-wall bouncing (can be turned off)
-learning popups (can be turned off)
It is a valuable tool to teach students about projectile motion and kinematics while still being entertaining and fun to use.
- projectile motion visuals
- customizable:
-gravity
-initial velocity
-friction
-projectile type
-cliff height
-launch angle
-projectile tracing (can be turned off)
-bouncing (can be turned off)
-sliding (can be turned off)
-wall bouncing (can be turned off)
-learning popups (can be turned off)
It is a valuable tool to teach students about projectile motion and kinematics while still being entertaining and fun to use.
