Skip to main content

P5.js

P5.js is a JavaScript library for creative coding — visual art, animations, and interactive sketches. You can run sketches inside the web view.

Setup​

  1. Set the runtime environment to Browser or Browser & Node.js.
  2. Toggle the web view on.
  3. Install p5.

Creating a P5 sketch​

P5.js imported from npm runs in instance mode — pass a sketch function to new p5() and access P5's API through the sketch argument:

import p5 from 'p5'

new p5((sketch) => {
  sketch.setup = () => {
    sketch.createCanvas(window.innerWidth, window.innerHeight)
  }

  sketch.draw = () => {
    sketch.background(220)
    sketch.fill('rebeccapurple')
    sketch.ellipse(sketch.mouseX, sketch.mouseY, 50, 50)
  }
})

Every P5 function (createCanvas, background, fill, ellipse, mouseX, etc.) is a method on sketch. Event hooks work the same way — assign sketch.mousePressed, sketch.keyPressed, and so on.

P5.js demo