We have to add it using a few manipulations.Īdding a sketch in react is fairly simple, we need to do three basic things: The sample sketch above is written in plain javascript and we can’t just write the same code in react. If you don’t understand how the p5 sketch is drawing an ellipse, I suggest you learn a bit more about p5.js first and make a few projects using plain p5. The circle keeps increasing in size until the whole window becomes red. When we run this sketch, we get a red circle at the center of the window whose radius increases after every frame. Setup() is called once when the program runs and draw() is called continuously without stopping.Ī combination of these functions and variables through which we draw on the browser is called a sketch. The most basic (and necessary) functions are the setup() and draw() functions. P5.js has a number of predefined functions which we can use to draw anything we want. This command installs p5 in your react app and now we can use it to build creative stuff.īefore we integrate p5.js with react, we should have a basic understanding of how p5 works.
#MAKE YOUR OWN STAR WARS INTRO VIDEO INSTALL#
Use the following command to install p5 in your app: npm install p5 Once you have the basic react app ready, we can install the p5 npm package. But if you want you can try them out, here are the link to their github repositories:įor this project, we’ll download the official p5.js library from npm and we’ll integrate it into our react app ourselves. I didn’t use these libraries because I don’t like to rely on third party libraries.
There are multiple npm libraries available which help us to use p5 with react. The second thing we need to do is to integrate ps.js with react.
If not, you can read the official getting started documentation here.įirst things first, let’s install our boilerplate react app with the create-react-app command.
#MAKE YOUR OWN STAR WARS INTRO VIDEO HOW TO#
I’m assuming that you know how to set up a basic react app. If you’re interested in learning more about p5 (and creative coding in general), you should check out his channel: The Coding Train.īefore continuing with this tutorial, I would suggest you make a few simple creative projects with plain p5.js first. I learnt everything I know about p5 from Daniel Shiffman’s YouTube channel. It’s also great for artists and creative coders who want to use a computer to create some kicka*s art. p5.js helps beginner coders to visualize their code. P5.js is a JavaScript library used for creative coding. We’ll also be styling our app using the styled-components library, so it would be better if you go through it’s documentation once. Make sure you understand the following react concepts: This tutorial is for creative coders who understand the basics of React. Cool? Liked the video of what we are about to make? Let’s get started now.