How to combine React and P5.js? (loading image)

p5.js Libraries
1

Hi! I am currently learning P5.js, and I’m planning on using it with my personal portfolio.
I managed to do what I want in p5.js, however, when I try to import it to my react project i’m not able to do it.

This is what i’m trying to do. I’m trying to use this npm package

I’m having trouble loading the images. How would I go about doing that?

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

   let x = 50;
   let y = 50;

let imgURL = './Ellipse1.png'
let img; 

export default (props) => {
   const setup = (p5, canvasParentRef) => {

   img = p5.loadImage(imgURL)
   	// use parent to render the canvas in this ref
   	// (without that p5 will render the canvas outside of your component)
   	p5.createCanvas(500, 500).parent(canvasParentRef);
   };

   const draw = (p5) => {
   	p5.background(0);
   	p5.ellipse(x, y, 70, 70);
   p5.image(img,10,10)
   	// NOTE: Do not use setState in the draw function or in functions that are executed
   	// in the draw function...
   	// please use normal variables or class properties for these purposes
   	x++;
   };

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

Landing Page
Landing Page1440×1566 81.8 KB

2

Hi @Mangelo,

Your issue is more related to how paths are handled and used with your module bundler.

If you are using create-react-app, it probably uses Webpack which allows you to build and compile your React application into .html/js/css files with external ressources like images or videos…

When you use react-scripts build, it builds your application in a build folder and replaces links to your images my special hashed name:

So you want to follow the documentation on how to import images:

import imgURL from "./Ellipse1.png"

// ...

img = p5.loadImage(imgURL);