Starting
with p5.js

Are you ready to discover p5.js? It will allow you to code online, directly in your web browser and quickly preview the result of your program. This module is really important because you will need p5.js all along this course.

Every day, we are interacting with dozens of objects that use at least a little bit of code. It is everywhere, from your coffee machine to space rockets. But what does coding mean? In this module, you will learn the basics of p5.js to start creating your projects!

Starter pack

JavaScript is a programming language widely used on the web for scripting behavior and interaction within a web page. Don't be afraid, it's a fairly easy programming language (compared to many others).

p5.js is a JavaScript library that offers beginners the opportunity to learn to code through a graphic approach and a simple programming language so that people, like curious students and others, can experiment and shape their ideas on their own. You will find many resources to guide you on the p5.js reference page.

editor.p5js.org, a web editor for p5.js that allows you to directly code and test your projects in a browser.

How does it look

Here is a video by the Coding Train to discover how the p5.js editor works. Daniel Shiffman from the Coding Train has made many very clear videos that it would be a shame not to use in this course.

One more thing: during the course, you will often have to explain your use cases. To do so, you will have to add your explanations in the .html part of your p5.js projects.
Here is a little step by step to show you how to do it:

At any time you can click on the arrow just below the play button to expand the folder of your project to modify the .html and the .css part.

You can access all the files of your project, .html, .js, or .css files but also any potential images or media you may have added.

index.html

script.js

style.css

Two main functions

The setup() and the draw() are the two main functions you will use during this course. The setup() function is called once when the program starts. The draw() function continuously executes the lines of code contained inside its block right after the setup() is over.

When you create a sketch, it starts always like this ⬆️

Define a black background once (in the setup() function) and draw a purple rectangle on it at each frame (in the draw() function).

Help yourself

p5.js reference page you can already add it to your favorites 😉

You will regularly need to consult the p5.js references, to do so, here are some explanations:

• On the reference page, you have a search bar where you can type what you are looking for: how to draw an ellipse in our case.

• You can also scroll in the reference page until the shape category to find ellipse references:

• All the references pages have the same template:

  1. an example of usage
  2. a description of the function
  3. the syntax rules (also called the function prototype)
  4. the parameters which are used in the syntax

  The most important parts are the syntax and the parameters, this is how you have to code to make it happen 🚀

  You might encounter some parameters between brackets ([]), they represent optional parameters.

  Like you can see in this example ⬆️, sometimes you have different ways to use the functions, each syntax is different and it's up to you to choose the one you need. In our example, for a simple ellipse, the first one is enough because we don't use a WebGL mode.

PRACTICE

Use p5.js and the p5.js editor to make a drawing machine, that includes at least:

• two 2D shapes
• some colors (not only black and white)
• a way for the user to switch between different colors and/or shapes

Have a look at the p5.js reference to learn how to use different shapes, colors, and detect user inputs. You can use randomness, and add any interaction you want. Don’t hesitate to write instructions on how to use your drawing machine, either in the drawing or in the code (with comments).

Watch the video above if you haven't already, and take the quiz below to make sure you now know exactly how p5.js and Javascript work! 🎉 Some answers can be found elsewhere, like through a quick internet search!

Going further

Resources

• CodeCademy, an online code course platform
• Daniel Shiffman’s YouTube channel, with tons of examples, tutorials and demos involving programming, JavaScript and/or p5.js
• Stackoverflow, a platform for exchange between developers. Look there first when you encounter a code-related issue!

Projects