Learn to program by following along with interactive coding exercises that build off each other and result in you creating your own playful simulation of bouncing balls.

Back story

When I was learning to code, I was always drawn to making playful, visually-focused programs. I remember one of my very first programs being a ball that bounced around the screen. That bouncing ball evolved into games such as clones of Pong and Breakout. When learning new concepts in programming, I often returned to the bouncing ball concept. In high school, when learning about object oriented programming and the physics of collisions I created the first version of what I call Bounce. Bounce is a program where balls of different sizes and colors collide with each other and the edges of the screen. In college, when learning about 3D graphics and OpenGL, I reimplemented bounce in 3D. Just a few years ago, after leaving my job at Dreamworks Animation and trying my hand at mobile app development, I reimplemented Bounce as a musically focused app called Bounce 2: Notes.

I've always found that to truly learn something, I need to apply that knowledge on a real project. I can read about the concepts and watch videos but to really learn something, I have to implement it in my own project. I found the bouncing ball an interesting and complicated enough problem that I could use it to learn something new, while having fun recreating it. The first time I implemented it, I used it to learn Java, the next time I learned about OpenGL and 3D graphics, and in the most recent implementation I learned about Objective C and multitouch input devices.

Since it's been such a great learning experience for me, I figured it could be helpful for others to follow a similar path. I put together this tutorial, which uses Khan Academy's live coding widget to guide you through the basics of programming. In each section of the tutorial, you can modify the code and see how it affects the result. I encourage you to dig in and play with the code so you truly understand what's going on in each step. If you've made changes to any of the code and you try to leave the page you will be warned that you work hasn't been saved. You can use the "Spin Off" button to save your work on Khan Academy, which I recommend doing so you can refer back to it and copy pieces of code into future exercises. If you have any questions, feel free to leave comments at the bottom of the page!