p5.js is an open JS open source library, made to provide a low barrier of entry for developers to make creative coding projects, and ultimately is a great teaching tool for imparting concepts in software engineering.
I’m going to show a very quick way to import the p5 library into a React project.
In terminal, npx create-react-app your-app-name-app will create a React project in your desired folder.
Following your project installation, you will need to install p5.js, the react-p5-wrapper, and typescript npm packages.
npm i p5npm i react-p5-wrappernpm install typescript --save-dev
Open your project and create a sketch.js file.
Here we have a sketch component passing props up to the parent component App. Note here there is no importing the p5 library.
setup and draw are functions within the p5 library. setup() refers to the parameters of a canvas on the DOM, and draw() is a function, which continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.
