canvasGUI V2 ++++ A library for p5.js

As the name suggests this library provides a GUI where the controls such as buttons and sliders appear on the actual canvas. This makes it ideal if you want to show your sketches on websites like OpenProcessing.

V2 is a major upgrade on the original version released in 2022 This website and all other canvasGUI resources are to support this version.

Features

Controls available canvasGUI features

Label>
Button
Checkbox
Option (radio button)
Ranger
Slider
Joystick
Knob
Textfield (single line input with user supplied validation)
Viewer (image viewer can zoom and pan large images)
Panel (holds controls on a draggable panel)
Side Panes (holds controls on a pane that slides in from a canvas edge)
  • Works with P2D and WEBGL renderers without code changes.
  • Supports both global and instance modes.
  • Supports both mouse and touch events.
  • Controls can be displayed in any of 9 color schemes.
  • Controls can be rotated in the 4 cardinal directions (north, south, east and west).
  • Controls can have their own tooltips.
  • and so much more ....

Using canvasGUI in your own webpages?

To use canvasGUI in your own webpage add the following code to the HTML in your webpage

<script 
  src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI@2.0.0/dist/lib/gui.min.js">
</script>

replacing 2.0.0 with the library version number you wish to use.

If you don't include a version number, the latest available version will be used i.e.

<script 
  src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI/dist/lib/gui.min.js">
</script>

Showcase sketch

This sketch shows many of the controls and features available to the canvasGUI user. The actual 3D animation was taken from a p5.js example so I don't take credit for that, but the GUI is all mine LOL.

Library Support

  1. There are a number of 'Control demos' in the guides page. These code examples will give you an idea of how use this library.
  2. The sorce code is available in the github repositiory.
  3. The github wiki is another invaluable source of information.
  4. Editable canvasGUI examples covering all the controls available at the p5js sketch editor in an account dedicated to canvasGUI V2.

You should explore all of these resources if you want to get the best out of canvasGUI.

If you can't find the answer here or on github them you can always ask questions on the Processing forum as I am a regular visitor there.