GUI components - Griffith-ICT/1701ICT-Creative-Coding GitHub Wiki

Applications often have GUI components (GUI = Graphical User Interface) components such as buttons, textfields, and other input fields to allow users to interact with the application.

The HTML5 canvas object which p5.js uses is a bitmap canvas used primarily for drawing. We could draw our own controls, however this may be a lot of work. Instead most operating systems provide an inbuilt set of GUI components that we can use. HTML also provides a set of GUI components.

There is a bit of hackery involved in getting GUI components to work with the canvas as the canvas does not support HTML GUI components within it. Instead p5 creates the HTML input field outside of canvas but then renders it within canvas. Thankfully p5 does most of the work for us, but it is good to be aware of how they have achieved it.

We are going to begin with the slider input control.

Slider

The slider input control is useful for all kinds of operations, it could be used to change the speed of animation or gameplay, change colours, sound volume and speed of sound.

The example from the reference documentation is a good place to start:

var slider;
function setup() {
  slider = createSlider(0, 255, 100);
  slider.position(10, 10);
  slider.style('width', '80px');
}

function draw() {
  var val = slider.value();
  background(val);
}

We begin by creating a slider variable var slider. This will hold a reference to the slider we create so that we can access its value later.

In the setup function we create the slider itself using the createSlider() function. The createSlider() function takes a number of parameters. The first two parameters are the min and max values of the slider. In this case the slider will be used to change the background colour so the min and max values are the min and max values for colour (0 to 255). The next parameter is optional and allows you to set the initial value of the slider, in this case 100, which is a dark grey.

The createSlider() function will also add the created slider to the HTML page but outside the canvas. To move the slider inside the canvas we need to set its position. We can set the position of the slider using the slider.position() function. We can also apply CSS styles to the object, in the example above the width is set to 80 pixels.

In the draw() function the slider's value is accessed using slider.value(). We can then directly place that value as the background's greyscale value.

Because the draw() function is called continuously any changes to the slider will be visible immediately in the background colour. Note that event handling isn't being used, we are simply polling the value of the slider.

Changing the Framerate

We can use the slider to change the speed of our game.

The default frame rate is 30 fps. We can set a range from 1 to 100.

function setup() {
  slider = createSlider(0, 100, 30);
}

On each draw() frame we will set the frame rate to the value of the slider:

function draw() {
  frameRate(slider.value());
}