bitcraftlab · cnoss · Jan 14, 2021
diff --git 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
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>p5.gui example</title>
+    <script src="../../libraries/p5.js" type="text/javascript"></script>
+    <script src="../../libraries/quicksettings.js" type="text/javascript"></script>
+    <script src="../../libraries/p5.gui.js" type="text/javascript"></script>
+    <script src="sketch.js" type="text/javascript"></script>
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/quicksettings-3/sketch.js 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
@@ -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);