Vertical Scrolling Background and 3D Objects With Controls Using p5.js WEBGL.

Scrolling is basically the perception of our brain ,which makes us think that the object is moving across either vertically or horizontally in an infinite world like in this 2D racing car game.

But actually , it is the movement of the background and object in the opposite direction creating a parallax effect. This effect is most prominent when the object is static and the opposing movement of the background gives the illusion of the object movement across.

This concept is used in computer graphics, television productions and film making.

ROSTRUM CAMERA : The Rostrum camera is used in television production and film making for animating the static objects and images. This camera can zoom in and out and pan across which gives the illusion of the static object moving around.

In this project we will be making the 3D spaceship with key controls and vertical scrolling background using P5.JS WEBGL library. The z-axis controls will give the effect of zoom in and out like in the Rostrum camera .

MAKING THE BACKGROUND ELEMENTS:

First start by creating the background, for that we need to make an array of objects called stars in the setup function and give the parameters of x-axis, y-axis and the size. In the draw function, the stars array is iterated and stars start to appear in the background. At this point not all the stars are visible.

DESIGN YOUR SPACESHIP:

Next, let’s design our spaceship. For that first make the global variable of x, y, z-axis and angle. Initiate the angle to 0. In the setup(), initiate the x, y and z variables. Now in the draw , use the x, y and z variables in the translate function to set the position of the spaceship . Now design the spaceship the way you like.

MAKE CONTROLS:

Now make the controls of the spaceship . Create a new function “controls()”. In controls() , use conditional statement for different keyCodes and within increment or decrement the values of x, y and z variables. The x- values decrement on the right and increment on the left of the canvas . While y- values increment as we move down and decrement moving upwards. The z-values decrement as it moves further into the canvas ,while increment moving outwards.

SET BOUNDARIES:

Restrict the spaceship within the boundaries of the canvas. Use the conditionals to set the boundaries.

MAKE THE SCROLLING BACKGROUND:

Finally, make the global variable of ‘scrolling’. Initiate scrolling variable to ‘0’ in the setup(). Now in draw(), add scrolling variable to the y-axis of the translate to make the background scroll vertically. Put the translate with scrolling variable and the for loop for stars array iteration inside the push() and pop(). (Do not put the spaceship object inside this push() and pop() as it needs to move opposite to each other). Lastly, add the scrolling variable in the controls () conditional statements. Increment and decrement opposite to the movement of the spaceship ( if y+=1 ,then background scrolling would be scrolling -=1).

Final code is below.

Happy Coding!!!.

RESOURCES:

1- Getting Started with p5.js- A book about programming for in p5.js.

2- p5.js Reference:References for all the p5.js functions.

3-Rostrum Camera : Reference from Wikipedia.

4-Ken Burns effect:Reference from Wikipedia.

5-Scrolling Effect- reference from Wikipedia.

6-StereoVision: Reference from Optometrist Network about the how the human brain perception of 3D image.

7- Rostrum Camera Image is reference from https://sielearning.tafensw.edu.au/

8- Byte Size Coding :Website with free resources tutorials for kids and beginners.

9-Byte Size Coding YouTube Channel:YouTube Channel with lots of fun ideas.