P5JS Template

Let's not reinvent the wheel

We learn a lot each time we make a P5JS app and as we make improvements, we periodically create a downloadable template we can repurpose to get a head-start on future apps.

This template installation is based on our work with the Lilac Chaser App which featured a cool animation with a responsive grid of adjustment sliders. It wasn't trivial to create so we decided to 'gut it' and use that framework for future development.

What's up with this particular app?

This is a simple animation of a regular polygon where you can influence various parameters with the adjustment sliders.

Since many apps you might wish to create require the ability to adjust user inputs (aka parameters) we figured this framework would give you a running start, and, by looking at the source code, you can even see a JavaScript function that creates the polygon in action!

This app features some common elements found in many P5JS apps:

• Negative space: A 'hole' is cut in the base polygon by putting another on top that matches the color of the canvas background
• Clicking the canvas activates/pauses the animation removing the need for an additional start/stop/pause button
• A 'color picker' lets you customize the canvas color
• The polygon function allows you to draw regular polygons using vertex points
• input elements of type range create 'sliders' that allow controlled changes of various parameters
• 'Toggle' buttons with their associated functions allow boolean-type variables to be toggled between true and false
• The app is fully responsive with controls that adjust to browser size; a 'loading' feature prevents awkward views until the page is fully loaded, at which point the animation begins
• 3 different images (outer polygon, inner polygon and crosshair) are drawn using the P5JS functions push, translate, rotate and pop to get them to work independently of each other

The original app that inspired this one is found in some (archived) examples provided by the folks at P5JS which was updated some time in the summer of 2024. They feature a new set of library examples that does not appear as extensive as before.

---