Go Back

Lesson 2 || free fall simulation
    Getting Started
  1. make a new repl html, css, js project
  2. copy the lesson 2 index.html, script.js, and style.css code into the repl
  3. hit run on the repl, you should see a bouncing ball if you scroll down.
  4. feel free to delete the directions in the index.html file, since they are already on this page.
  5. in script.js, read the comment on model view control
    Changing Initialization Variables
  1. go to the "//ball physics initialization" comment
  2. try changing x to canvas.width/4, and re run the repl. what happens?
  3. try changing vx to -2 and re run the repl. what happens?
  4. mess with the other ball physics initialization variables. put them back to normal when you are done.
  5. i wouldnt mess with the environment initialization variables, or time initialization.
  6. the only one worth messing with is simSpeed, try changing it to .05
    Understanding View and Model
  1. The view() function clears the canvas element every frame to delete the last frame.
  2. Delete the line, ctx.clearRect(0, 0, canvas.width, canvas.height). re run the repl. what happens?
  3. put the line back
  4. the viewBall() function draws the ball on the screen.
  5. the model() function calculates the change in time from the last frame, and passes the change in time into modelBall
    modelBall()
  1. Model ball has an if statement for bouncing off of the floor, one for the left wall, and one for the right wall.
  2. The left wall and right wall conditions flip the balls horizontal velocity on impact.
  3. The floor bounce sets the balls vertical velocity to an exact value, otherwise computational rounding makes the ball bounce higher and higher.
  4. If you have gotten this far, see the control() function. in repl, hit the S key and see what happens.
  5. Try hooking up the other controls in the control function().
    Wrapping up.
  1. on repl, hit the github branch icon , commit, and push your changes to a new repo named lesson2.
  2. In github, you can go to the settings of your new lesson2 repo, github pages, choose main. Enforce https.
  3. go to yourusername.github.io/lesson2 and see if its up.
  4. you can do this for any github repository :)