ALGEBRA. PHYSICS. HTML. JAVASCRIPT — ALL COMBINED TO CREATE COOL SHIT.
Lines
y = mx + b
If you were to ask someone what equation this line makes, they would probably say y=-x.
We’re all used to a little something like this —
Sorry to tell ya, it doesn’t work the same way in canvas.
Instead, the coordinates (0,0) are located at the top left corner of the canvas itself. Then, set it with a width and height, and you have your canvas. The x-axis is the same in the way it increases as you go towards the right. The y-axis however, increases as you go down.
(Note: Therefore, no coordinates with negative values will show on the canvas, as well as values greater than your canvas width or height.)
(Note: Dimensions go by pixels.)
Different equations can be applied here, just in a different style than what we’re used to.
I realized that to receive the same line in a regular graph on your canvas, you have to take the reciprocal of the slope.
The line above looks like y = -x (slope of-1), but for the canvas it has a slope of 1 (If you take a look at the setInterval function, x and y values are incremented by 1).
Another note, since essentially the quadrants are flipped clockwise, the slope of a line on a canvas persists something I like to call “run over fall” (change of x over change of y), rather than rise over run (change of y over change of x).
If we were to draw y=-2x, we would need to take the reciprocal and apply that to the function. As you can see above, the “canvas” function equivalent to y=-2x is y=1/2x.
The only thing we need to change from the function is the amount y is incremented.
The 1 is “run”, the 2 is “fall”.
+1 is the change of x,
+2 is the change of y.
(Note: To include a specific y-intercept, just change the start position of the y.)
Single Ball
I set the starting point to (0,100) on my 400 x 400 pixel canvas.
For this function, I’m first refreshing my canvas every time the function reruns to make it look like a ball moving.
Then, increment the x value by vx (in this case, x is increased by 5 every time the function is called).
y is incremented by vy, followed by vy incremented by the value of gravity.
It might be a little hard to actually picture what goes on just by looking at this. So here’s a nice excel sheet pinpointing every position.
Each of these represent the x and y positions (and vy value) every time the function runs for different gravity values.
As you can see, with a greater gravity (when gravity is equal 2), it takes less time for the ball to reach its highest point, and the highest point (y value) is a lot lower compared to a gravity with value of 0.5.
Think of it like in real life — if theres more gravity, the object is heavier. Less gravity, object is lighter. (The surface gravity on Mars is only about 38% of the surface gravity on Earth. So if you weigh 100 pounds on Earth, you would weigh only 38 pounds on Mars.)
What happens if we set the gravity to 0?
Some other animations for the next blog. Stay tuned.
Everything I know up until this point is thanks to this awesome guy.
