An introduction to creative coding using p5.js

Within this workshop, we cover the basics of the creative coding library p5.js. We will learn how to set up a 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 a 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 at the beginning of the workshop, following a practical approach by performing live coding demonstrations. This should set everyone up to get going with p5.js.

Slides and source code, covering all relevant and required material to complete this workshop, are available online via GitHub: [ Slides ] [ Source code ] [ JavaScript introduction ]

Workshop Outcome

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

Prerequisites

  • None:
 We start from scratch with the basics, step-by-step.
  • Nice to have: Familiar with JavaScript, understanding of the concept of 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.

Helpful Online Resources

last update: November 2016