Side Scroller

Planning
Step 1
Welcome to ProcessingJS!
Temp1540235686

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.
Information
Step 2
Anatomy of a ProcessJS Program
Temp1537385352
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.

Temp1537385613
Step 4
Assign a variable

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

Temp1537385837
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.

Temp1537386223
Check Your Work
Step 6
Run the program

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

Temp1537386345
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.

Temp1537386551

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

Challenge
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.

Temp1537394081
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
Temp1537396816
Challenge
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.

Temp1537466301

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.

Temp1540420440
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)

Temp1537468298
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.

Temp1539197368
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.

Temp1537468856
Information
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.

Temp1537469359
Step 18
Define another function

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

Temp1540420787
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?

Temp1537469693

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.

Temp1537469908
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.

Temp1537470412
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.

Temp1537470632
Check Your Work
Step 23
Watch the beautiful sunset

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

Temp1537470739
Challenge
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.

Planning
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.

Temp1537471527
Information
Step 26
Answers to Step 11 and 24

Declaring the player variable and assigning it to an object:

Temp1543883128

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

Temp1543884359
Side Scroller Info

Account

MVCode Clubs

Created By

Mandala2 slinkous

Course:

Side Scroll Adventure

Access Level

premium

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