12 - More on p5.js

Introducing couple of more p5.js specific subjects like transformations

Rotate & Translate

At this point, we are almost ready to work on our final project; an interactive game built using JavaScript and p5.js! Before we do that, I would like to demonstrate couple more useful p5.js functions to extend the realm of things that we can build.

Notice how we can draw shapes on the screen using our current knowledge, but we can’t really transform them like rotating them around their center. That’s a big blocker on the kinds of visuals that we can build, so let’s learn how to do transformations in p5.js to enhance our abilities.

Having used other kinds of drawing libraries, I should say that doing transformations such as scaling, rotating and translating shapes can be a bit unintuitive in p5.js. Here is an example that demonstrates how to use the p5.js rotate function that would allow us to rotate shapes.

Get hands-on with 1200+ tech skills courses.