Rotating Polygon

A simple P5JS app: Stage

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

Try them all! What do they do?!

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 examples provided by the folks at P5JS.

Back to Stage 2

...loading...