P5js Features

P5js Features

2D and Vector Graphics

The default mode of p5js supports vector graphics. This means you can program how shapes are made using vectors or simple primitive shapes.

3D Graphics

P5js also supports a 3D mode. This mode allows you to create simple 3D primitives and import 3D files of specific formats.

Animation

P5js uses a function called "Draw". This function automatically executes its contents 30 times a second. This is the similar rate to video. This means that you can easily create animation by changing elements in the draw and having those changes increment 30 times a second.

P5js + Max Intensive (June 2025)

Buy nowLearn more

🎬 Getting Ready for the June 1st Online Session

  • Before the first meeting
  • Video Conference Details

Recordings of Live Session

  • P5js + Max June Intensive Workshop - Recording

Getting Started

  • Introduce Yourself
  • Download the Project Template

The Tools You'll Need

  • Max/MSP
  • P5js Features
  • VS Code

P5js Fundamentals

  • P5js Reference
  • P5js Editor

Javascript Foundation

  • Grammar and More
  • Variables
  • If Statements
  • For Loops
  • Nested For Loops
  • While Loops
  • Arrays
  • Randomizing Arrays
  • Objects
  • Custom Functions
  • Object-Oriented Programming

Max + P5js Integration

  • Demonstration and Workflow
  • Self-Executing Function

Projects

  • 2D form
  • Motion
  • Gradients
  • Communication between Max and P5js
  • Redraw
  • Colors and Interaction
  • Mouse Hover
  • CreateGraphics
  • 3D WebGL
  • Reactivity and Visualization
  • Interactive Poster Visualization

Bonus Section

  • Activating Full Screen in Max

Wrapping Up

  • Final Words
  • Survey