Introducing p5.js

Objectives and Overview

This lesson introduces p5.js, a JavaScript library based on Processing. The Processing Foundation creates beginner friendly, free tools that help make programming accessible to new learners as well as artists, designers, and educators. P5.js allows you to create a digital sketchbook that you can share with others as your skill builds. This lesson covers the basic structure of p5.js as well as some exploration of the editor and interface.

Lesson Objectives

Understand the structure of a p5.js sketch
Demonstrate the ability to navigate the p5.js editor interface
Demonstrate an understanding of the HTML coordinate plane and how it differs from Scratch

Facilitator Notes

You can facilitate this lesson as a group via direct instruction. The main objective is an overview p5 and for youth to recognize that JavaScript can be used to draw on the HTML canvas element. This is one reason why HTML and JavaScript have become so popular as a game platform in recent years.

One suggestion is to discuss your favorite web games or interactive experiences. Games such as agar.io, slither.io, etc. can be made with HTML5 + JS. If you know other games or examples please share them with the youth! Just be sure that you’re familiar and comfortable with any examples that you include.

If you introduce any web games or animations to the youth be aware that they understand that these projects are often made by professional teams, or by people with lots of experience. This course is designed to build their creative confidence with programming. Try to remind them that online games can be a source of inspiration but they shouldn’t compare their own skill levels to those of the developers. The goal is for youth to be inspired and feel confident as their skill develops. Make sure to remind them of this point if they lose focus or motivation.

Make sure that the youth understand that p5 is a JavaScript library and contains certain commands and functionality that extend JavaScript’s abilities while also removing some complexity. Also, p5 is taught in several creative programming pathways at universities such as UCLA and NYU’s ITP program.

Try to have a dedicated discussion about how p5 is a great tool for creating interactive and creative programming experiences, such as games and animations while simultaneously being an accessible entry-point into JavaScript fundamentals. While the core concepts of this course are taught with p5, and therefore JavaScript, the programming concepts apply to other languages even if the syntax is different.

There are some great walkthrough videos in the lesson that are fun and engaging. Make sure that the youth watch these either as a group or that they’re aware of the resource!

Introducing p5.js

Throughout this course, you’ll be developing your JavaScript skills by working with p5, a JavaScript library. A library is a collection of pre-written code that provides certain functionality, simplifies certain processes, or extends JavaScript’s abilities. This is something to keep in mind throughout the course — some of the commands and code that you write is specific to p5. Even though this is the case, the core programming concepts carry over and provide a solid foundation for any languages you may want to learn in the future.

What is p5.js?

P5.js is a re-interpretation of the Processing programming language developed in 2003 by Ben Fry and Casey Reas. The original goal of Processing was to create a language that was accessible to beginners, visual artists, graphic designers, and educators. Lauren McCarthy, the creator of p5.js, wanted to re-create those goals while updating the language for the modern web. Since p5.js is a JavaScript library it works with the web as well as mobile devices. There are even methods to create a stand-alone application with p5, but that is out of the scope of this course. Since p5 extends the functionality of JavaScript it’s a powerful

How p5 Works

Since p5 is a JavaScript library, at its core it uses JavaScript to interact with HTML, particularly the HTML canvas element. When you create a sketch, P5 creates a canvas as part of the process. The sketch that you create with code then “draws” onto this canvas element. One nice benefit of p5.js using web languages is that you can integrate a p5 sketch into a website.

Additionally, you can extend your p5 sketch by creating a web interface that users can interact with. Since p5 creates a canvas element, It’s also possible to have more than one sketch running at the same time on a page, although this is out of the scope of this course.

P5 itself has libraries that extend its functionality in the same way that p5 extends JavaScript’s functionality. In the core content of this course, you’ll only be using the main p5 library. However, as you progress and build your comfort you can look into the other libraries that are available on the p5.js website.

The p5 Community

P5 is becoming extremely popular for creating animations, digital art, games, data visualizations, and interactive web experiences. Several universities are teaching creative coding courses built around p5 and Processing. Dan Shiffman, an educator at NYU, is at the forefront of this community. He presents p5 as a great tool for “creative expression through programming” as you can create images, animations, user interactions, and games with the library. Dan Shiffman has an excellent YouTube channel called Coding Train where he creates p5 content. Some of the videos are about more advanced concepts or coding challenges, but this is a fantastic resource if you’re looking for some inspiration or ideas.

Dan Shiffman’s p5 Intro Video

This introduction video is one of Dan Shiffman’s first Coding Train videos. Even though it’s from 2015, the content is still helpful and relevant. Make sure to watch at least the first 6 minutes as he provides a great (and enthusiastic!) introduction to the library.