p5 Component

Creating a reusable component from a p5 Sketch

Feb 14, 2019

2 minutes

Built with

In this coursework we were to take a p5 sketch from https://www.openprocessing.org/ and adapt it into a reusable component. For this I used the sketch https://www.openprocessing.org/sketch/429506. It looks like this:

Image of sketch


This only needs an internet connection to request the various libraries involved, it can be ran by just opening the HTML file in your browser

Example functions


function setup() {
  createCanvas(windowWidth, windowHeight);


function draw() {
  let b = new shape();
  b.background_colour = background_colour;
  b.speed = speed;
  b.offset = offset;
  b.value1 = value1;
  b.value2 = value2;


The parameters for the constructor of the class shape are as follows:

Parameter Type Min Max Description
background_colour Integer 0 360 The colour of the background of the sketch
speed Integer 0 N/A The speed at which the shape oscillates
offset Integer 0 90 The offset between the squares
value1 Integer 0 360 The minimum colour of the shape
value2 Integer 0 360 The maximum colour of the shape

All these parameters then have methods in the form of getters and setters in order to verify the data being passed is in the correct format and range.

value1 should be less than value2, but if this is not true, the definitions of value1 and value2 will be swapped so that the sketch still works.

There are then three functions:

Explanation of example

The example allows you to control all of the parameters for the constructor shape.

The example uses the variable b to draw the shape