canvasGUI ++++ 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.

Features

Controls available canvasGUI features

Label
Button
Checkbox
Option button
Ranger
Slider
Text field (single line input with user supplied validation)
Viewer (image viewer can zoom and pan large images)
Side panes (panels of controls that expand from the canvas edge)
  • Works with P2D and WEBGL renderers without code changes
  • Supports both global and instance modes
  • Slider and Ranger controls support touch events
  • Controls can be displayed in any of 7 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 language="javascript" type="text/javascript"
  src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI@1.0.0/dist/lib/gui.min.js">
</script>

replacing 1.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 language="javascript" type="text/javascript"
  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.

Examples

There are a number of 'Control demos' in the guides page. These code examples will give you an idea of how use this library.

Library Support

As well as the examples the guides page has a number of additional guides covering the library basics. Additional support can be found at at github. You should explore both of these sources 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.