p5.js

Graphical javascript library

(Background created using p5.js)

By Corentin THOMASSET.

Table of contents


  1. What is it?
  2. How it works?
  3. What can it do?
    1. Main functions
    2. Examples
      1. Drawing shapes
      2. Animation
      3. User interaction
  4. To go further

What is it?

"Make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web."

What is it?


  • Made by the creators of Processing (Java graphical library)
  • Graphical library → draw stuff
  • Full set of drawing functionality
  • Easy user interaction (mouse events, keyboard, ...)
  • HTML5 canvas to an higher level
  • Huge community + Youtuber dedicated to p5.js

How it works?

How it works?

1. Include the library (via CDN)
<!-- In the head tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

2. In a javascript file put this:
// This function is called only once
function setup(){
    createCanvas(500, 500);
}

// This function is called 60 times a second
function draw(){
    // Do stuff ...
}

What can it do?

What can it do? Huge variety of functions

Draw shapes

arc()
ellipse()
line()
point()
quad()
rect()
triangle()

Transform shapes

applyMatrix()
resetMatrix()
rotate()
rotateX()
rotateY()
rotateZ()
scale()
shearX()
shearY()
translate()

Manage events

mouseMoved()
mouseDragged()
mousePressed()
mouseReleased()
mouseClicked()
doubleClicked()
mouseWheel()

keyPressed()
keyReleased()
keyTyped()
keyIsDown()

Mobile info

deviceOrientation
accelerationX
accelerationY
accelerationZ
rotationX
rotationY
rotationZ
deviceMoved()
deviceTurned()
deviceShaken()
touchStarted()
touchMoved()
touchEnded()

What can it do?
Example 1/3: drawing shapes 

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

    fill('#5cb85c');
    stroke('#306030');

    rect(200, 200, 100, 70);
    rect(120, 140, 40, 100);
    triangle(10, 10, 250, 20, 70, 100);
    line(500, 200, 400, 300);
    ellipse(100, 300, 100);
    arc(350, 350, 80, 80, 0, PI*1.5, PIE);

    strokeWeight(20);
    point(400, 100);
    point(420, 140);
    point(440, 90);
}

What can it do?
Example 2/3: animation 

let ball = {
    position: {x: 0, y: 0},
    velocity: {x: 5, y: 5}
};

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

function draw(){
    background(255, 255, 255, 100);

    ball.position.x += ball.velocity.x;
    ball.position.y += ball.velocity.y;

    if(ball.position.x > p.width || ball.position.x < 0)
        ball.velocity.x *= -1;
    if(ball.position.y > p.height || ball.position.y < 0)
        ball.velocity.y *= -1;

    point(ball.position.x, ball.position.y);
}

What can it do?
Example 3/3: user interaction 

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

function mouseMoved() {
    fill('#5cb85c');
    ellipse(mouseX, mouseY, 10);
}

To go further

To go further

P5.js has addon libraries that make it easy to interact with other HTML5 objects or divers elements, including :

  • Text
  • Inputs
  • Video
  • Webcam
  • Sound
  • Localisation
  • Graphs
  • Speech

And many more! Have a look here.

Thank you!


Visit p5.js website or
check my code exemple.