Key Controls

Looping pattern

General Instructions:

Click on the link to open the Starter file, it contains images and some code to help you get started.

Now, click on the fork icon .

coloured background

Then at the bottom it will give the option to fork the project to save and modify .

coloured background

Add the code inside the highlighted box in the examples.

coloured background



Spaceship with controls:


Write a pair of push and pop function. This piece of code will consolidate the code inside it.

coloured background


Place the translate function with the x, y and z variables inside the push() and pop() to move the entire spaceship.

coloured background


Place another push()and pop(), after the translate(). coloured background


Here between push() and pop(),the code for the spaceship you have design will go.

coloured background


Use forward slashes to comment for the movement of the spaceship code.

coloured background


Add the conditional statement, if the up arrow key is pressed down .

coloured background


Then decrement the y variable by some value to move up.

coloured background

Make another conditional statement this time when the down arrow key is pressed down.

coloured background


Then increment the y variable to move down.

coloured background


Do the same for moving right and left in the x-axis. The x value decrements on left and increments on the right hand side.

coloured background


Do the same for moving near and far in the z-axis. The z value decrements , when going far and increments , when moving near. Here, space key (32) and Enter key (13)is used for moving in z-axis.

coloured background

Bonus Steps :



Bonus 1 :


Call the starry function in the draw(), to make the stars appear in the background.

coloured background

Bonus 2 :

Make the scrolling background by adding the following code in the conditional statements.

If spaceship is moving up then the background should move the opposite way to give the scrolling effect.

coloured background


If spaceship is moving down then the background should move up to give the scrolling effect.

coloured background


If spaceship is moving side to side then the background should move in the oppsite direction to give the scrolling effect.

coloured background

Happy Coding!!

Continue Reading