Vector Rocketship

Demo gif

Goal: Learn how to use vectors to create an illusion of a rocketship flying through space.

As you move your mouse around the canvas, the rocketship rotates to “accelerate” in that direction. However, the rocketship never moves from the center of the canvas, only the stars are moving across the screen. There are 2 set of vectors in the sketch. The first is the rocketship which uses the mouse coordinates to calculate the angle in which the rocket should rotate. The second set of vectors is the individual stars. I made a class called Star and stored 100 stars in an array. Each star uses the inverse magnitude calculated with the rocketship vector to create the illusion that the ship is moving forward.

I struggled a lot with this program. It took a lot of trial and error for my vectors to work. Conceptually, I understood vectors and how they work. Yet, I struggled with how to apply the appropriate vector calculations when I am trying to achieve a specific motion. One bug in my sketch right now is that the stars are all getting redrawn at the same time. For example, if a star moves past the canvas, I want it to redraw on the opposite end of the canvas. For some reason, as soon as one stars passes the canvas all the stars are redrawn (even though they are each individual objects and should move independently). I would appreciate some feedback on how I can fix this.

I was a bit by frustrated the end of making this so I tried to make my sketch more fun and add a remix of Little Einstein’s Theme song to cheer me up. 😀

One thought on “Vector Rocketship

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s