Introduction to p5.js

Within this workshop in the series Creative Coding with p5.js, we cover the very basics of this creative coding library. We will learn how to set up an p5.js application from scratch using its provided example files and the p5.js editor, investigate the application's structure and way of functioning as well as gaining first experiences in reading the documentation. Finally, we will create our first application using some basic drawing and interaction features provided through the p5.js library.

In order to create an p5.js application, we need some basic knowledge about the programming language JavaScript. No need to be scared! We will cover some essentials about JavaScript first thing in the workshop, again following a practical approach by performing live coding demonstrations. This should set everyone up to get going with p5.js.

The source code (as well as complementary slides) for both our first p5.js application as well as the JavaScript examples is available online via GitHub:

Demo: Application developed in this workshop (video)

Workshop content in detail

Introduction to p5.js

  1. p5.js project structure
  2. Reading the p5.js documentation
  3. Using the p5.js editor
  4. Your first p5.js project
 featuring the application base frame, drawing and movement of a ball, keyboard and mouse interaction, random properties and more…

Introduction to JavaScript

  1. JavaScript function base frame
  2. Statements
  3. Arithmetic operations
  4. More functions and local vs global variables/scope
  5. Arrays and objects
  6. Loops and iteration
  7. Branching source code using conditional statements
  8. Relational and logical operations


  • None:
We start from scratch with the basics, step-by-step.
  • Nice to have: Familiar with JavaScript, understanding of the concept behind object-oriented programming (OOP), understanding of the concept of the Document Object Model (DOM) in HTML5, basic understandong of the World Wide Web (WWW, 'web'),
 as well as being creative and having a vast imagination of what you want to do.