Integrating p5.js with React

Integrating p5.js with React

·

4 min read

In this post we are going to learn about how to do the fancy art and design qualities of p5 in a React Web Application.

Pre-requisites

You need to have a basic understanding of React. You should have NodeJS and NPM or yarn installed in your system.

End Goal

Build a moving ball animation.

Step 1: Create a basic React Application.

Install create-react-app package

sudo npm i -g create-react-app

Now create a react web app using it

npx create-react-app moving-ball

This will create a new folder called moving-ball and install the react dependencies. Navigate into the new folder. It should look like this.

Folder Structure Image

Then run

npm start

After executing the command your browser window should look like this.

React App

Now install the react-p5 NPM package

npm i react-p5

You can checkout the package here

Now that you have installed the package. What next? We'll start using it...

GIF

Now go to the App.js file in the src/ directory. Remove the boiler plate code and import react-p5.

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

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

Now that you have imported the package. Let's create the canvas.

GIF

To create we need two important functions setup and draw, setup is used to mention about the size of the canvas and where exactly the canvas should be placed on the window object. Whereas draw tells about the objects placed on the canvas.

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

function App() {
  let a = 300;
  let b = 300;
  let setup = (p5, canvasParentRef) => {
    //Canvas of size 1000x800 
    let xyz = p5.createCanvas(1000, 800).parent(canvasParentRef);
  };
  let draw = (p5) => {
    p5.background("rgb(100%,0%,10%)");
  };
  return (
    <div className="App">
      <Sketch setup={setup} draw={draw} className="App" />
    </div>
  );
}

Now that we have the canvas ready. Our app would look something like this.

Alt Text

We can see that the canvas is not centered. To do that let's do some math. Gif

We should add the following code to the setup function to center the canvas.

let x = (p5.windowWidth - p5.width) / 2;
let y = (p5.windowHeight - p5.height) / 2;
xyz.position(x, y);

Updated Code

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

function App() {
  let a = 300;
  let b = 300;
  let setup = (p5, canvasParentRef) => {
    let xyz = p5.createCanvas(1000, 800).parent(canvasParentRef);
    //Calculation to center the canvas 
    let x = (p5.windowWidth - p5.width) / 2;
    let y = (p5.windowHeight - p5.height) / 2;
    xyz.position(x, y);
  };
  let draw = (p5) => {
    p5.background("rgb(100%,0%,10%)");
  };
  return (
    <div className="App">
      <Sketch setup={setup} draw={draw} className="App" />
    </div>
  );
}

export default App;

Now our canvas is centered

Center Image

Let's add the ball to the canvas. As previously said we should use the draw function for this purpose.

let draw = (p5) => {
    p5.background("rgb(100%,0%,10%)");
    //Color of the ball
    p5.stroke(255);
    p5.strokeWeight(4);
    //Mentioning that the ball or the circle won't have filled color
    p5.noFill();
    //The first 2 parameters are for positioning and the next two are 
    //for size
    p5.ellipse(a, b, 100, 100);
}

Ball

The ball is ready on the canvas. We have to animate it now. For that we have to add some conditional statements in the draw function. To animate the ball we need a variable called speed. Which changes the value of the position variable a to move the ball.

let draw = (p5) => {
    p5.background("rgb(100%,0%,10%)");
    p5.stroke(255);
    p5.strokeWeight(4);
    p5.noFill();
    p5.ellipse(a, b, 100, 100);
    //If the ball goes to the end of the canvas it should return back
    if (a >= p5.width) {
      speed = -3;
    }
    if (a === 90) {
      speed = 3;
    }
    a = a + speed;
  };

Moving GIF

The ball is moving. Yay!

Final Code of App.js

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

function App() {
  let a = 300;
  let b = 300;
  let speed = 3;
  let setup = (p5, canvasParentRef) => {
    let xyz = p5.createCanvas(1000, 800).parent(canvasParentRef);
    let x = (p5.windowWidth - p5.width) / 2;
    let y = (p5.windowHeight - p5.height) / 2;
    xyz.position(x, y);
  };
  let draw = (p5) => {
    p5.background("rgb(100%,0%,10%)");
    p5.stroke(255);
    p5.strokeWeight(4);
    p5.noFill();
    p5.ellipse(a, b, 100, 100);
    if (a >= p5.width) {
      speed = -3;
    }
    if (a === 90) {
      speed = 3;
    }
    a = a + speed;
  };
  return (
    <div className="App">
      <Sketch setup={setup} draw={draw} className="App" />
    </div>
  );
}

export default App;

Checkout the official documentation of p5.js here to learn more about it.

Happy Learning! :smile: