p5.js

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. Since p5 is a JavaScript library, you should learn JavaScript first.
To run p5.js code, you can go to the online editor.
  1///////////////////////////////////
  2// p5.js has two important functions to work with.
  3
  4function setup() {
  5  // the setup function gets executed just once when the window is loaded
  6}
  7function draw() {
  8  // the draw function gets called every single frame
  9  // if the framerate is set to 30, it would get called 30 times every second
 10}
 11
 12// the following code explains all features
 13
 14function setup() {
 15  createCanvas(640, 480); // creates a new canvas element with 640px as width as 480px as height
 16  background(128); // sets the background color to rgb(128, 128, 128)
 17  // background('#aaf') // you can use hex codes and color names too
 18}
 19
 20function draw() {
 21  background('#f2f2fc'); // usually, you call `background` in draw to clear the screen
 22  // creates an ellipse at 10px from the top and 10px from the left, with width and height 37
 23  ellipse(10, 10, 37, 37);
 24  // remember in p5.js the origin is at the top-left corner of the canvas
 25
 26  if (mouseIsPressed) {
 27    // mouseIsPressed is a boolean variable that is true when the mouse is down, and false otherwise
 28
 29    fill(0); // fill sets the fill color, which will stay until it is changed
 30  } else {
 31    fill(255, 255, 255, 240); // fill(a, b, c, d) sets the fill color to rgba(a, b, c, d)
 32  }
 33
 34  ellipse(mouseX, mouseY, 80, 80);
 35  // mouseX and mouseY are the x and y position of the mouse, respectively
 36  // the above code creates and ellipse under the mouse, and fills it with white or black
 37
 38
 39  // some other 2d primitives (shapes) you can draw:
 40  rect(9, 3, 23, 26); // x, y, width, height
 41  noFill(); // sets the fill color to transparent
 42  triangle(100, 400, 130, 200, 200, 300); // x1, y1, x2, y2, x3, y3
 43  point(100, 300); // create a point at x, y
 44  // there are more, but they are more complex.
 45}
 46
 47/** Bouncing balls animation
 48 * You can copy-paste this code into the online editor at
 49 * https://editor.p5js.org/
 50 */
 51class Ball {
 52  constructor(x, y, xvel, yvel, radius, col) {
 53    this.position = createVector(x, y); // create a p5.Vector object which stores the x and y
 54    this.velocity = createVector(xvel, yvel); // make a p5.Vector storing the velocity
 55    this.radius = radius;
 56    this.col = col; // p5 already uses the word color, so we use col instead
 57  }
 58
 59  update() {
 60    this.position.add(this.velocity); // you can add vectors with p5.Vector.add(p5.Vector)
 61    if (this.position.x + this.radius > width) {
 62      // flip the direction the ball is going in if it touches the edge
 63      this.velocity.x *= -1;
 64    }
 65    if (this.position.x - this.radius < 0) {
 66      this.velocity.x *= -1;
 67    }
 68    if (this.position.y + this.radius > height) {
 69      this.velocity.y *= -1;
 70    }
 71    if (this.position.y - this.radius < 0) {
 72      this.velocity.y *= -1;
 73    }
 74  }
 75
 76  render() {
 77    // you can figure out what this does by now
 78    fill(this.col);
 79    ellipse(this.position.x, this.position.y, this.radius);
 80  }
 81}
 82
 83let numBalls = 23;
 84let balls = [];
 85
 86function setup() {
 87  createCanvas(400, 400); // width, height
 88  for (let i = 0; i < numBalls; i++) {
 89    let r = random(255); // random number between 0 and 255
 90    let g = random(255);
 91    let b = random(255);
 92
 93    balls.push(
 94      new Ball(
 95        random(30, width), // x position
 96        random(height), // y position
 97        random(-4, 4), // x velocity
 98        random(-4, 4), // y velocity
 99        random(4, 10), // radius
100        color(r, g, b) // fill color for the ball
101      )
102    );
103  }
104}
105
106function draw() {
107  background(255);
108  for (let ball of balls) {
109    ball.update();
110    ball.render();
111  }
112}
113
114// So far, we have only seen the default rendering mode.
115// This time, we will use the 'webgl' renderer
116
117function setup() {
118  createCanvas(400, 400, WEBGL); // width, height, rendering mode
119}
120
121function draw() {
122  background(0);
123
124  stroke('#000');
125  fill('#aaf');
126
127  // rotate around the x, y, and z axes by the frame count divided by 50
128  rotateX(frameCount / 50);
129  rotateY(frameCount / 50);
130  rotateZ(frameCount / 50);
131  // frameCount is a p5.js variable that stores the amount of frames that have passed
132 
133  box(50, 50, 50); // width, height, depth
134}
p5.js

Further Reading ¶

Source ¶
