This is how you can integrate p5.js with react

What is p5.js?

If you are new to p5.js, let me take you on a walk, p5.js is a JavaScript library that is designed for creating interactive graphics and animations in web browsers. It is open-source and free to use. It is based on the processing programming language. Developed by The Processing Foundation. p5.js can be used to manipulate HTML5 canvas elements, SVG, and other HTML elements, and it can also be used for web-based audio and video processing. It is open-source and free to use, making it a popular choice among developers and designers who want to create interactive web experiences. The library provides a simple and intuitive syntax, making it easy for beginners to get started with programming in JavaScript.

If you want to learn more about p5.js, you can follow the Youtube channel "The Coding Train", for getting started with p5.js you can follow this playlist and if you already know what p5.js is, then let's get started with the thing you are here for.

Create a React-App

I am guessing that if you are reading this you are already familiar with React, I mean that's why you are reading it right but if you are new to React, you can read the documentation here.

For creating our react app I am using the Vite bundler. Why I'm using it? Just to save our time. Vite makes your development faster and lets you focus on your code instead of waiting for your changes to occur and It's easy to use.

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

This will create a react-app directory with Vite as a bundler. Now go to your project directory and run these commands

npm install
npm run dev

npm install will install all the modules that come with this directory and npm run dev will start your development server locally.

Now open it in your favorite code editor, I am using VS code, you can use whatever code editor you want or you have.

Go to your App.jsx file in your src directory and delete whatever you have inside it so that we can start fresh, also delete everything inside index.css and put this piece of code in your App.jsx


export default function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  )
}

Now you are seeing this in your browser when you open your localhost.

Now, it's time to mess with p5.js. To add p5.js to your react project you need to install react-p5.

npm install react-p5

Let's do the trick now, create a file named Sketch.jsx and add this code.

import Sketch from "react-p5"

function Bg() {

    var canvas;
    var bubbles = [];
    const setup = (p5) => {
        canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight);
        canvas.position(0, 0);
       canvas.style('z-index', '-1');
        for (let i = 0; i < 50; i++) {
            let x = p5.random(p5.width);
            let y = p5.random(p5.height);
            let r = p5.random(5,30);
            bubbles[i] = new Bubble(p5,x, y, r);    
        }
    }
    const draw = (p5) => {
        p5.background(255);  // white background   
        for (let i = 0; i < bubbles.length; i++) {
            bubbles[i].move();
            bubbles[i].show();
        }
    };
    function Bubble(p5, x, y, r) {
        this.p5 = p5;
        this.x = x;
        this.y = y;
        this.move = function () {
            this.x += p5.random(-0.1, 0.1);
            this.y += p5.random(-0.6, 0.6);
        }
        this.show = function () { 
            // This defines colors of the bubbles   
            this.p5.fill(255, 124, 0)         
            this.p5.ellipse(this.x, this.y, r);
        }
    }
    return <Sketch setup={setup} draw={draw} />
}
export default Bg;

This code will bombard bubbles on your screen. All you need to do is now import the Bg component into your App.jsx and your App.jsx will look like this


import Bg from "./Sketch"

export default function App(){
  return(
    <div>
      <Bg/>
    </div>
  )
}

This is time for the reveal. Hold your wind-pipes.

That's it, your p5.js background is ready. You can add whatever imagination you have in your head in the background.

Use p5.js as a background for your React Apps

What is p5.js?

Create a React-App