🚀

3:0 Getting started with p5.js

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.

https://p5js.org

The p5.js editor

The web editor on the p5.js website allows you to do everything you want with p5.js:

editor.p5js.org


In fact this is a complete web page builder if you want.

Sign up so that you can save your sketches.

the p5js editor
the p5js editor

Begin here

Begin with the Getting Started pages:

p5js.org/get-started


The reference

Use the Reference pages to understand everything p5.js can do:

p5js.org/reference


a screenshot of the p5js reference

The fundamental p5.js functions

There are 2 fundamental structure functions you’ll often use in p5.js. These are built into p5.js and will run automatically if you include them:


setup() and draw()

function setup() {
  // this happens just once
}

function draw() {
  // this happens 60 times a second
}

setup()

setup()

This gets called once when the program starts. It is often used to set up initial properties such as screen size and background colour. But anything you only want to run once can be put in here.

function setup() {
  
}

draw()

draw()

Called right after setup(), draw() continuous executes in a loop.

draw() runs again and again. This allows you to create animations, visual interactions that change over time, the possibilities are endless.

function draw() {
  // by default this runs 60 times per second
}

lets draw something

Lets start by drawing a circle.

First lets look it up in the reference pages:
https://p5js.org/reference/#/p5/circle


circle(x, y, d)

x is the horizontal position

y is the vertical position

d is the diameter

lets draw something

Make a circle in the p5 editor

Lets create a circle in the editor.

editor.p5js.org

Check the code in the example here if you get stuck - click on the </> symbol to show the code. (this requires something bigger than a mobile to use properly!)

https://editor.p5js.org/amcc/full/4XgEP8T4s

Introduction to p5.js - some basic concepts and using the editor

some basic concepts and using the editor

Useful links