How to Implement P5.js javascript canvas library with React

Published On: 2 May 2022.By ashish gupta.

General

How to Implement P5.js javascript canvas library with React

What is p5.js?

p5. js is a JavaScript canvas library for creative coding. It is a collection of pre-written code, it provides us with tools and functions that simplify the process of creating interactive visuals with code in the web browser. It is very beginners friendly to learn how programs interact with graphical applications.

Basic Implementation.

the sketch is used in p5. js for drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

Basically, P5.js has two functions to implement canvas:

setup()
draw()

setup()

The setup() function runs when the program starts. It is used to set the initial values of properties such as canvas size, text color, screen size, and background color and load the media file such as images and fonts. The program contains only one setup() function. The setup() function can be called only one time at the initial execution of the program.

Example code:

function setup() { 
// Create Canvas of given size create   
Canvas(400, 300); }

1

2

3

function setup() {

// Create Canvas of given size create

Canvas(400, 300); }

draw()

The draw() function is called after the setup() function. The draw() function is running forever until the program is stopped or noLoop() is called. If the program does not contain the noLoop() function within the setup() function then the draw() function will still be executed once before stopping it. It should always be controlled with noLoop(), redraw() and loop() functions.

Example code:

function draw() {
background(500);
// Use color() function
let c = color('green');
// Use fill() function to fill color
fill(c);
// Draw a rectangle 
rect(50, 50, 300, 200);
}

1

2

3

4

5

6

7

8

9

function draw() {

background(500);

// Use color() function

let c = color('green');

// Use fill() function to fill color

fill(c);

// Draw a rectangle

rect(50, 50, 300, 200);

}

Integrating P5.js with React

Installing Npm package React-p5

npm  i  react-p5

1	npm i react-p5

Implementation

With The Sketch component from the react-p5 library, you can integrate p5 sketches with your React App.

Example code :

import React from "react";
import Sketch from "react-p5";

export function App() {
let x = 50;
let y = 50;

setup = (p5, parent) => {
 p5.createCanvas(700, 500).parent(parent);
 p5.background(0);

}
draw = p5 => {
 p5.ellipse(x, y, 70, 70);
 x++;
}


 return <Sketch setup={setup} draw={draw} />
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import React from "react";

import Sketch from "react-p5";

export function App() {

let x = 50;

let y = 50;

setup = (p5, parent) => {

p5.createCanvas(700, 500).parent(parent);

p5.background(0);

}

draw = p5 => {

p5.ellipse(x, y, 70, 70);

x++;

}

return <Sketch setup={setup} draw={draw} />

}

Visualization of the above code

In the above code implementation, the instance of p5 is used to access p5.js functions and other tools are attached to the sketch.

In the above code, the ball is moving continuously from left to right because we update the X – coordinate of the ball and draw the ball in the draw function that runs infinitely.

for more about the p5.js function and go to the official website here

Important points while using p5.js with react

Never use the set state inside the draw function or in functions that are in the draw function because the draw function runs in an infinite loop by p5.
Always declare or create your static text, colors, or buttons in the setup function which are executed once else it will reduce the frame rate of the canvas.
If you want p5 intense outside your sketch methods you can use window.p5 to access that.
For creating responsive sketches use the window.innerWidth and window.innerHeight for canvas size and give the height, width, and position of the p5 elements as a variable of canvas height and width.
For adding CSS to the p5 elements we can use the addClass method and give the class to the p5 element, so we don’t have to add CSS in every line with the style function.

The Advantage of using p5.js is that not just react its works with any javascript library. With react we can make sketches more dynamic and functional.

Happy Coding ; )