Resources

Homepage

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

You can play in the online sandbox here:

See Libraries page to see what is available for using p5 to make sound, music sequencing, an Arduinio GUI and more.

See Examples page for demo apps which cover basic shapes, forces, audio, inputs, 3D and more.

Import

Load from CDN.

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

Load using package installed with NPM.

<script src="../p5.min.js"></script>

Samples

From Get started.

Elipse

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

Follow cursor

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}