Creative coding using p5.js - Workshop: An introduction to creative coding using p5.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Creative coding using p5.js - Workshop: An introduction to creative coding using p5.js.

complementary slides: GitHub, 2.12 MB

p5.js version: 0.4.20

The purpose of the project is to illustrate and teach some basic drawing and interaction features of the creative coding library p5.js. This activity is meant to be held in a workshop-like format and step by step to the participants using live coding, supported by the here illustrated and commented source code.

Following, a brief overview about the project's content is given as it is illustrated during the workshop:

  1. Introduction of the p5.js base frame, including p5.js's setup() and draw() cycle.
  2. Drawing of a simple (static) ball.
  3. Ball movement along the x-axis.
  4. Implementation of a bouncing effect, so the ball stays within the application window.
  5. Drawing some application feedback, such as FPS, the mouse's position as well as the currently pressed key, directly to the application's window.
  6. Refactoring of the ball instance's code into a separate dedicated class.
  7. More keyboard input: Increasing/decreasing the ball's radius.
  8. Implementation of the feature to let the ball follow the mouse's position, once the mouse clicked the ball.
  9. Introduction of the random() function in order to randomize the initial position of the ball as well as randomly changing the color of the ball once it was clicked.

In further preparation to this workshop, it is recommended to introduce the workshop participants to the very basics of the JavaScript programming language. In order to do so, a brief introduction to JavaScript has be created accordingly.


MIT License, see