Side Scroller

Step 1
Welcome to ProcessingJS!

In this lesson, we will learn:

  1. How to organize the code in your project
  2. What variables are, how to tell the program that you are making one, and how to make them mean something
  3. What functions are, how to tell the program what they will do, and make them do that.
Step 2
Anatomy of a ProcessJS Program
Step 3
Declare a variable

A variable is a label that we give information that we are going to use.

When we declare a variable, we are telling the program that this variable exists.

Step 4
Assign a variable

We use equals (=) to assign data to a variable.

Step 5
Use a variable in your program

Declaring and assigning a variable won't do anything on it's own. It just gives the program information.

Add this code inside your draw function to draw a rectangle that uses the ground variable.

Check Your Work
Step 6
Run the program

Press "Save" and "Run" to see your code in action. It should look like this:

Step 7
Change a variable's value.

Variables get their name because their values can change, or vary.

Change the value of the ground variable to a different number.


Press "Save" and "Run". How did this change the program?

Step 8
Make the background and ground different colors

Use the background() and fill() functions to add some color to the scene.

Temp1540318802 Temp1537387045

Don't forget to search for Color Picker in a new tab to help you find RGB values.

Step 9
Declare another variable

Go back up to your variables section, and declare another variable, called sun.

Step 10
Make an object

An object is a variable that can have properties. In this case, sun has 3 properties: x, y, and size.

Each of these properties has different values:

  • The value of x is 400
  • The value of y is 100
  • The value of size is also 100
Step 11
Create a Player

Just like we made an object for the sun, we are going to make a player

Declare a variable called player

Assign that variable to an object with these properties and values:

  • x is 150
  • y is 250
  • width is 50
  • height is 100

Hint: This should look a lot like your sun object.

Super Hint: If you are complete stuck, scroll down to the last step for answers.

Step 12
Access an object's properties

If you want to use a property of an object in your code, you use a dot (.).

Make an ellipse that uses the sun's properties.


Save and run to see the sun appear in the scene.

Step 13
Define a function

We can make our own functions that do specific jobs for our programs. Add this code to create a function whose job is to draw all the stuff we've added so far.

Step 14
Refactor your code

Move all the code from the draw function into this new function that you made using Copy (Ctrl + C or Apple + C) and Paste (Ctrl + V or Apple + V)

Step 15
Call a function

When we define a function, it's like giving the program a recipe; it won't actually do anything until we tell the program to make the recipe.

We do this by calling the function, with its name and () afterwards.

Delete everything inside of draw and add this code to call the drawScene() function that you made in the main draw loop.

Check Your Work
Step 16
Run your code

Press save and run and nothing should have changed, except that your code is easier to read.

Step 17
Folding Functions

Folding is a useful tool that will hide some of your code while you work. Click the arrow near the line number of a function to hide what's inside of it until you need to work on it again.

Step 18
Define another function

We're going to create another function, whose job is to make the sun set.

Step 19
Move the sun down

Add this code to the sunset() function to make the sun move down.

When you save and run, what happens?


Why doesn't the sun move?

Step 20
We need to call the function!

Nothing happened yet, because we still need to call the sunset() function to make the program actually do this code.

Call it in the draw function.

Step 21
Give the sun horizontal movement

When the sun sets, it doesn't just move straight down.

Subtract a small number from the sun's X property to move it slightly to the left as well.

Step 22
Make the sun larger

The sun also appears to get bigger as it gets closer to the horizon. Add this code to increase its size as it sets.

Check Your Work
Step 23
Watch the beautiful sunset

Save and Run to watch the sun appear to set behind the ground.

Step 24
Make a function to draw the player

Define a function called drawPlayer.

Access the player's properties in a rect() function within drawPlayer().

Call the drawPlayer() function in the main draw function.

Hint: The sunset() function draws the sun with an ellipse function and the sun's properties. You can do something very similar with drawPlayer.

Super Hint: If you are completely stuck, scroll down to the last step for answers.

Step 25
Great work!

In the next lesson, we'll learn how to use if and else statements to move the player around using keyboard inputs.

Step 26
Answers to Step 11 and 24

Declaring the player variable and assigning it to an object:


Making the drawPlayer function and calling it in the draw function:

Side Scroller Info


MVCode Clubs

Created By

Mandala2 slinkous


Side Scroll Adventure

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach