p5_gui
Experimental Graphical User Interface for P5js sketches
This was created for a specific project, so the interface and capabilities are very dependant on what was needed on that project. Hopefully it can be expanded and improved to fit other needs. Please let me know if you do something with it.
For it to work with P5js, your sketch should be in instance mode: https://github.com/processing/p5.js/wiki/Global-and-instance-mode
Installation
Using npm:
$ npm install p5_gui
Usage
let gui = require('p5_gui');
gui.setup(p,
2,
.5);
gui.createArea("area_name",
0,
0,
600,
600,
p.color(100),
callback_function);
gui.createButton("button_name",
"Press me",
10,
10,
200,
30,
p.color(100,0,0),
callback_function,
p.color(255));
gui.createSlider("slider_name",
10,
10,
50,
400,
10,
p.color(100,0,0),
callback_function,
0,
20);
gui.createToggle("toggle_name",
true,
"Press me",
10,
100,
200,
30,
p.color(100,0,0),
callback_function,
p.color(255);
gui.createRadio("radio_name",
2,
[1,2,3],
["One","Two","Three"],
10,
150,
500,
30,
p.color(100,0,0),
callback_function,
p.color(255));
gui.createText("text_name",
"Text to display goes here",
10,
200,
10,
p.color(0),
callback_function,
[p.CENTER,p.TOP],
p.NORMAL);
p.draw = function() {
gui.mouseIsPressed(p.mouseIsPressed,p.mouseX,p.mouseY);
gui.mouseOver(p.mouseX,p.mouseY);
gui.draw();
}
p.mousePressed = function() {
gui.mousePressed(p.mouseX,p.mouseY);
}
p.mouseReleased = function() {
gui.mouseReleased();
}
let gui_elements = gui.getGuiElts();
TODO
- Simplify element creation?
- Make interface clearer
- parenting in gui elements???