p5.gui magically generates a graphical user interface for your p5.js sketches
JavaScript
Latest commit 1c5dc41 Jan 16, 2017 @craftoid craftoid Add slider range example 2
Permalink
Failed to load latest commit information.
examples Add slider range example 2 Jan 16, 2017
libraries More Magic Jan 16, 2017
LICENSE Initial commit Nov 2, 2016
README.md Update Readme Jan 16, 2017
p5_gui_logo.png Add logos for the Readme Dec 5, 2016
p5_gui_screenshot.png Add logos for the Readme Dec 5, 2016

README.md

p5.gui

screenshot of p5.gui

p5.gui magically generates a graphical user interface (sliders, color selector, etc) for each of your variables. Behind the scenes it uses other libraries such as Quicksettings (and in the future also DAT.GUI) to do all the hard work.

You currently need to include both p5.gui.js and quicksettings.js in your p5.js sketch.

Usage

See the examples for how to use it!

Create a new GUI:

var gui = createGui('Label');

Add gui elements for your variables:

gui.addGlobals('my_variable','my_other_variable', ...);

You can also use the colorMode() functions to change the default color mode used to interpret colors and sliderRange() to change the default range used when creating sliders.

Examples

Links

Licensing

logo of p5.gui

p5.gui is licensed under the MIT License.

This repo also includes code from other libraries: