Get Started With P5.js
An Introduction to creative coding
Ever wondered why they say “Coding is fun” ?. If you are from any mainstream programming languages like c,c++, python, or java, then you are definitely aware of the fact that creating variables, writing lots of mathematical expressions just to see some outputs in a console is not that exciting. Not at the beginning, at least.
So here comes the p5.js community, which has proved that coding can be fun with their libraries. Without worrying much about the actual code behind the scene, you can start being more creative.
This article aims at providing a basic understanding of the p5.js library and p5.js web editor but assumes basic knowledge of Javascript and its syntax, specifically:
I would like to suggest you to refer these docs in parallel.
What is p5.js?
Here is the quotation from the official site.
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone
The p5.js is a Javascript library that is used to draw sketches on top of the HTML <canvas> element. Well, as the documentation says, and with the addition of multiple add-on libraries, we can now perform much more and can think of the whole browser page as our playground.
Setup
The quickest and easiest way to get started is using the p5.js web editor. This provides a much better interactive way to do our sketches. If you are more comfortable using your own code editor you can include the CDN or download the files in your sketches. If you are using VS Code you can use this extension for autocompletion and template creation.
Alright, let’s start.
Our First Sketch
We are now ready to write our own sketches. Open the p5.js web editor and paste the below code into the sketch.js file.
Now press the run button. You can also turn on the auto-refresh so that you don’t have to explicitly rerun the sketch whenever you make any changes to the code.
Do you see anything in the preview? Nah, you don’t. There’s nothing wrong with the code. Just like its name, the method createCanvas() , inside the setup() function, creates an HTML canvas element of width 400px and height 400px. We just cannot see it right now because the canvas background color has the same value as the page background color.
So let’s give the canvas, a background color.
You should see a gray box in the preview. The value 200 is the grayscale color value to the background. The value can be from 0–255.
We can also give the color in different formats. One such is the RGB format.
Pasting the above code will result in a red canvas. You can refer to this link for all the color formats.
But wait, what is setup() and draw()?
Let’s understand the code structure.
The setup() function is called once when the sketch starts. It’s where all things are initialized. It contains initial environment properties such as canvas. It should never be called more than once.
The draw() function calls in a loop, default is 60 refresh rate per sec. We can change the refresh rate with the framerate() function.
Now the draw function will be called thrice a sec.
Let’s visualize the function call by changing the background color on every call.
First, we have to introduce a new method, random(). It takes two arguments min and max and gives us a value between these two. To read more about random() refer to this link.
Now you should see random colors are being set to the canvas.
Moving on to the next part, let’s add some shape into our sketch.
The circle() method creates a circle at coordinates (100,100) with a diameter of 50.
Look at the below image to have a better understanding of the p5.js coordinate system.
Hooray!!! Congratulations! You have made your first sketch. It’s indeed a simple one but you can explore different shapes from the reference section.
Fill & Stroke
P5.js gives us a few methods to customize the look of shapes.
stroke()takes a color value as a parameter in different format as background() method and sets the stoke colornoStroke()disable the stroke outlinestrokeWeight()takes a single parameter and sets that value as the width of the stroke line.fill()takes a color value as a parameter and sets the fill color of the shapesnoFill()disable the fill color
Examples:
We need to be careful while using the above methods. Using one of these sets stroke/fill color value of the succeeding shapes unless and until they are overridden by another function call. These methods retain even across multiple calls of draw().
Making sketches alive
We now know how to create shapes and place them on our canvas wherever we want. But, how can we make our sketch a little more interactive? Maybe changing the circle position with respect to the mouse movement?
Well, it’s very easy. p5.js provides two such system variables with which we can access our mouse current position. At any point in time, the position of the mouse pointer can be defined as (mouseX, mouseY). mouseX gives the x-coordinate and mouseY gives the y-coordinate of the current position.
In the above sketch, the circle’s center will update as the mouse moves.
Here’s the question that arises “can’t the shapes move there on their own?”. Well, they can. But we have to make some changes to the code.
As the value of x & y changes so the center of the circle, putting the circle into motion. The circle is going out of the canvas and it’s the expected behavior.
We will make much more interesting sketches in our upcoming tutorial.
Bye for now! Thank you for reading! Have fun exploring p5.js!
