diff --git a/README.md b/README.md
index a4deb84..edfec1d 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,17 @@ p5.gui will magically pick up variables ending in `Min`, `Max` and `Step` to co
*See [here](examples/slider-range-1) for an example.*
+
+### Update gui param
+
+Sometimes you want to update one or more gui params, e.g. when you provide presets.
+
+```js
+gui.update('myNumber', 5);
+```
+
+*See [here](examples/quicksettings-3) for an example.*
+
### Use sliderRange() to control slider creation
If you want explicitly control the range of a couple of sliders you can also use the `sliderRange(min, max, step)` command.
@@ -95,6 +106,8 @@ let params = {
*See [here](examples/slider-range-3) for an example.*
+
+
### Pass your sketch in instance mode
If you want to run your processing sketch in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode), you need to pass your sketch to the createGui function. Here's a simple example:
diff --git a/examples/quicksettings-3/index.html b/examples/quicksettings-3/index.html
new file mode 100644
index 0000000..b3539fd
--- /dev/null
+++ b/examples/quicksettings-3/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ p5.gui example
+
+
+
+
+
+
+
+
+
diff --git a/examples/quicksettings-3/sketch.js b/examples/quicksettings-3/sketch.js
new file mode 100644
index 0000000..cc0ab4d
--- /dev/null
+++ b/examples/quicksettings-3/sketch.js
@@ -0,0 +1,166 @@
+
+// gui params
+var numShapes = 20;
+var strokeWidth = 4;
+var strokeColor = '#00ddff';
+var fillColor = [180, 255, 255];
+var drawStroke = true;
+var drawFill = true;
+var radius = 20;
+var shape = ['circle', 'triangle', 'square', 'pentagon', 'star'];
+var label = 'label';
+var preset = ["1", "2", "3"];
+
+var currentPreset = false;
+
+// gui
+var visible = true;
+var gui, gui2;
+
+// dynamic parameters
+var bigRadius;
+
+function setup() {
+
+ createCanvas(windowWidth, windowHeight);
+
+ // Calculate big radius
+ bigRadius = height / 3.0;
+
+ // Create Layout GUI
+ gui = createGui();
+ gui.addGlobals('numShapes', 'bigRadius', 'shape', 'label', 'radius',
+ 'drawFill', 'fillColor', 'drawStroke', 'strokeColor', 'strokeWidth', 'preset');
+
+ // Don't loop automatically
+ // noLoop();
+
+}
+
+
+function draw() {
+
+ // clear all
+ clear();
+
+ // Select Preset
+ if (preset !== currentPreset) {
+
+ switch (preset) {
+ case "3":
+ gui.update('numShapes', 5);
+ gui.update('radius', 200);
+ gui.update('bigRadius', 50);
+ break;
+ case "2":
+ gui.update('numShapes', 100);
+ gui.update('radius', 5);
+ gui.update('bigRadius', 200);
+ break;
+ default:
+ gui.update('numShapes', 20);
+ gui.update('radius', 20);
+ gui.update('bigRadius', 333);
+ }
+ currentPreset = preset;
+ }
+
+ // set fill style
+ if(drawFill) {
+ fill(fillColor);
+ } else {
+ noFill();
+ }
+
+ // set stroke style
+ if(drawStroke) {
+ stroke(strokeColor);
+ strokeWeight(strokeWidth);
+ } else {
+ noStroke();
+ }
+
+ // draw circles arranged in a circle
+ for(var i = 0; i < numShapes; i++) {
+
+ var angle = TWO_PI / numShapes * i;
+ var x = width / 2 + cos(angle) * bigRadius;
+ var y = height / 2 + sin(angle) * bigRadius;
+ var d = 2 * radius;
+
+ // pick a shape
+ switch(shape) {
+
+ case 'circle':
+ ellipse(x, y, d, d);
+ break;
+
+ case 'square':
+ rectMode(CENTER);
+ rect(x, y, d, d);
+ break;
+
+ case 'triangle':
+ ngon(3, x, y, d);
+ break;
+
+ case 'pentagon':
+ ngon(5, x, y, d);
+ break;
+
+ case 'star':
+ star(6, x, y, d/sqrt(3), d);
+ break;
+
+ }
+
+ // draw a label below the shape
+ push();
+ noStroke();
+ fill(0);
+ textAlign(CENTER);
+ text(label, x, y + radius + 15);
+ pop();
+
+ }
+
+}
+
+
+// check for keyboard events
+function keyPressed() {
+ switch(key) {
+ // type [F1] to hide / show the GUI
+ case 'p':
+ visible = !visible;
+ if(visible) gui.show(); else gui.hide();
+ break;
+ }
+}
+
+
+// draw a regular n-gon with n sides
+function ngon(n, x, y, d) {
+ beginShape();
+ for(var i = 0; i < n; i++) {
+ var angle = TWO_PI / n * i;
+ var px = x + sin(angle) * d / 2;
+ var py = y - cos(angle) * d / 2;
+ vertex(px, py);
+ }
+ endShape(CLOSE);
+}
+
+
+// draw a regular n-pointed star
+function star(n, x, y, d1, d2) {
+ beginShape();
+ for(var i = 0; i < 2 * n; i++) {
+ var d = (i % 2 === 1) ? d1 : d2;
+ var angle = PI / n * i;
+ var px = x + sin(angle) * d / 2;
+ var py = y - cos(angle) * d / 2;
+ vertex(px, py);
+ }
+ endShape(CLOSE);
+}
diff --git a/libraries/p5.gui.js b/libraries/p5.gui.js
index c758c2c..0ff2f4a 100644
--- a/libraries/p5.gui.js
+++ b/libraries/p5.gui.js
@@ -136,6 +136,20 @@
qs.bindParams(object, params);
};
+ // update to update a param value.
+ this.update = function (key, value) {
+ if (!key || !value) { console.error("No Parameters defined. Key and value required: obj.update(key, value)"); return false; }
+ try {
+ qs.setValue(key, value);
+ } catch (e) {
+ if (e instanceof TypeError) {
+ console.error(key + " is not a known GUI Element.");
+ } else {
+ logMyErrors(e);
+ }
+ }
+ }
+
// noLoop() to call draw every time the gui changes when we are not looping
this.noLoop = function() {
qs.setGlobalChangeHandler(sketch._draw);