Lesson 5.1

Function Basics

Watch: Function Basics- p5.js Tutorial

Video for 5.1:

Up until now we have only called functions that were defined by the environment, like ellipse(100,100,20,20), or completed functions that were already declared by the environment, like setup().

In this lesson we will learn how to declare and complete our own functions, and to call these. This will help us work much more efficiently by breaking larger programs into smaller pieces that an be tested, edited, and thought about independently.

Here is a program for displaying a bouncing ball. There are three logic parts to the program. Each are demarcated by comments to help with organization.

  1. The display of the ball.
  2. Bouncing off the wall.
  3. Moving the ball.

We can however improve the organization of the program by writing each of these separate actions as separate functions. Each function will then be called in draw() to execute.

Example 5.1.1