The Basic Sketch

To use canvasGUI successfully there are certain programming statements that must be included. The following sketch show these statements.

let gui;

function setup(){
  let p5canvas = createCanvas(480, 320);
  gui = GUI.get(p5canvas);
  // the canvasGUI controls will be created here

}

function draw(){
  push();
  background(240);
  // user code to create the frame image

  pop();
  gui.draw(); // Will display the controls created in setup
}

We will be creating our controls in the setup function but before we can do that we need to create the GUI controller. This is done in two steps

1. in line 4 we get a reference to the canvas object created by the createCanvas method (p5canvas).
2. in the next line we create a GUI controller that is specific for this canvas object (gui).

In the draw function we can use the statement gui.draw() to display any controls we might create. Since we want the GUI to appear on top of the display this statement appears at the end of the draw function. The user code to create the frame image is surrounded with push() and pop() staements to prevent any user transformations affecting the position and appearance of the GUI.

If we run this sketch we will get a blank canvas because we have no controls to display. The next step is to create a control.