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.
Then run
npm start
After executing the command your browser window should look like this.
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...
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.
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) => {
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.
We can see that the canvas is not centered. To do that let's do some math.
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);
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
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%)");
p5.stroke(255);
p5.strokeWeight(4);
p5.noFill();
p5.ellipse(a, b, 100, 100);
}
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 (a >= p5.width) {
speed = -3;
}
if (a === 90) {
speed = 3;
}
a = a + speed;
};
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:
