Intro to Interactive Processing Sketch in a Web Page Using p5.js

Processing and p5.js are powerful libraries for creating interactive graphics and animations — they provide easy access to tools such as forces and particle simulation, 3D rendering and computer vision to allow easy creation of interactive digital experiences and/or visual arts.

In this article, we will go over how to incorporate a Processing sketch of a rectangle rotating to mouse position using p5.js into a web application. Like this one!

There are two ways to create and run a sketch. The first one is using the online editor, which is the fastest way to start coding and experimenting with a sketch. The second one is linking to the library in your files, this allows you to incorporate the sketch into your web content.

Personally, I prefer using the online editor to build out a first draft of the sketch as it is hassle-free, and then proceed to move the sketch into my files to fine tune it as the code is directly translatable.

So let’s start creating our first sketch using the web editor:

You should see this page with the two main functions of Processing in place.

This is a good time to touch on some basic structures of Processing. There are two main functions: setup() and draw(). Code in setup() runs once at the beginning, and draw() runs 60 times per second — this is important to keep in mind as it is the foundation of rendering visual content in Processing. In this case, the setup() creates a sketch canvas of 400 by 400 pixels, and the draw() is filling that background with color greyscale 220 60 times per second.

Now you can try running the sketch by pressing the ‘play’ button on the top left corner to verify that it is indeed running.

Next, let’s add our rectangle by adding rect(0,0,70,30) inside draw(). The first two parameters are the x and y coordinates of the rectangle on the canvas, and the others are width and height.

Voila! We can now see a rectangle on our canvas.

As I am a designer, I usually want to tweak the visual styling to my preference. And we could do that by specifying basic properties of the shapes on this canvas in setup(). In this case, I remove the stroke with noStroke() and changed the fill color to greyscale 220. Note that this applies to all of the shapes with the canvas. And I changed the background color to white in draw(). Now it looks more pleasing!

Now we want to move the rectangle to the center of the canvas, we do this by using translate(). This function will shift the origin point of the coordinate system. In this case we translate it by half of the width and height of our canvas with width/2 and height/2.

But wait, the rectangle seems still to be off-centered? You are a keen observer! That’s because the rectangle is now centered around its upper left corner by default. We want to change that to its center by rectMode(CENTER). And now it is dead center.

Now we can start rotating it, we do so by rotate(). Try it for a fixed number first to see it work.

Finally, to make it rotate to the mouse, we want to first obtain the mouse position on the canvas by using mouseX and mouseY. And we calculate the angle to rotate by taking the arctangent of the mouse position relative to the center of our rectangle, which is also the center of the canvas, using atan2(mouseY — width/2, mouseX — height/2).

Now you have your first interactive Processing sketch! Let’s integrate it into a web page.

To do that, just copy your code into a js file.

And reference the p5.js library and your sketch js file in the head section of your html file.

Congratualtions! You’ve created your first interactive web application with P5.js and Processing!

Finally, be sure to explore this examples page of processing sketches on various topic to get a sense of what you could do and draw inspirations from them, like a visualization of quicksort and simulation of particle system.