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:

 

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:

Integrating P5.js with React

  • Installing Npm package React-p5

  • Implementation

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

 Example code :

                           

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 ; )

 

Comments