p5.js-workshop

1 Week Workshop to learn game programming with p5.js

View on GitHub

Introduction to Programming with P5.js

Get setup!

We will use Visual Studio Code to write our programs. Checkout Getting Started with Visual Studio Code

Plugins you should install to code for the course:

code --install-extension christian-kohler.path-intellisense
code --install-extension HookyQR.beautify
code --install-extension ms-toolsai.jupyter
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension ritwickdey.LiveServer
code --install-extension samplavigne.p5-vscode
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension VisualStudioExptTeam.vscodeintellicode

How to use p5.js with Visual Studio Code

I recommend that you download and extrcat the following jsbeautifyrc.zip file. The .jsbeautifyrc file is a configuration file to customize your format style of javascript, html and CSS files. This can be used by the Beautify plugin for VSCode. Simply place this file in the root of your project folder. Documentation is here if you’d like to customize it.

Create a hello world sketch

function setup()
{
    createCanvas( 400, 400 );
}

function draw()
{
    background( 220 );

    text("Hello World", 150, 200);
}

Checkout this live example.

Shapes & Drawings

Exercise - Draw your favorite food

Your task is to use the 2D Shape functions to draw a picture of one of your favorite foods.

Requirements

You must use each of the 2D shape functions at least one time.

Suggestion: Use the ellipseMode() and rectMode() functions to simplify the numbers needed for drawing ellipses and rectangles.

Note: You don’t have to use all of the drawing functions to represent the food. You may add decorations in order to fulfill this requirement.

Exercise Checklist

Color

Exercise - Draw a fictional character

Your task is to use the Shape Property and Color functions to draw a picture of one of your favorite fictional characters.

Requirements

You must use each of the following at least one time

Note: You don’t have to use all of these functions to represent the dog. You may add decorations in order to fulfill this requirement.

Exercise Checklist

Mapping range values

Variables

A variable is a way to store values. To use a variable, we must both declare it—to let the program know about the variable—and then assign it—to let the program know what value we are storing in the variable. Here’s how we would declare a variable named “xPos”:

var xPos;

Now, we can assign xPos to hold the value 10:

xPos = 10;

If we want to (and we often do!) we can declare and assign in one statement:

var xPos = 10;

If, for some reason, we want to change the value of a variable later, we can re-assign it:

var xPos = 10;

// some time later ...

xPos = 20;

Re-assignment can be useful when we want to animate our drawings.

How can we pick names for our variables? For variables in JavaScript, follow these rules:

Variable names can begin with letters, or the symbols $ or _. They can only contain letters, numbers, $ and _. They cannot begin with a number. myVariable, leaf_1, and $money3 are all examples of valid variable names.

Variable names are case sensitive, which means that xPos is different from xpos, so make sure you are consistent.

Variable names can’t be the same as existing variable names, and there are a lot in our p5js programming environment. If you ever see an error pop up like “Read only!”, try changing your variable name.

Variable names should be clear and meaningful; for example, instead of ts, use toothSize. Variable names should use camel case for multiple words, like toothSize instead of toothsize or you could try snake case tooth_size.

Exercise - Animate an Object

Your task is to create your own variables to animate an object. Animate it’s position, size, fill color, stroke size, and stroke color.

Requirements

Exercise Checklist

Random

random();                               // returns random number [0, 1)
random(10.5);                           // returns random number [0, 10.5)
random(10, 240);                        // returns random number [10, 240)



References
The random() Function - p5.js Tutorial

Debugging