wrapping up first implementation, this all works

docs/demo.js

@@ -1,4 +1,4 @@
-function FizzyText(message) {
+function FizzyText(message, font) {
 
   var that = this;
 
@@ -6,6 +6,7 @@ function FizzyText(message) {
   // Notice they're all defined with "this". That makes them public.
   // Otherwise, gui-dat can't see them.
 
+
   this.growthSpeed = 0.2;       // how fast do particles change size?
   this.maxSize = 5.59;          // how big can they get?
   this.noiseStrength = 10;      // how turbulent is the flow?
@@ -25,7 +26,16 @@ function FizzyText(message) {
 
   this.__defineSetter__("message", function (m) {
     message = m;
-    createBitmap(message);
+    createBitmap(message, font);
+  });
+
+  this.__defineGetter__("font", function () {
+    return font;
+  });
+
+  this.__defineSetter__("font", function (f) {
+    font = f;
+    createBitmap(message, font);
   });
 
   // We can even add functions to the DAT.GUI! As long as they have
@@ -87,9 +97,8 @@ function FizzyText(message) {
 
   // This function creates a bitmap of pixels based on your message
   // It's called every time we change the message property.
-  var createBitmap = function (msg) {
+  var createBitmap = function (msg, font) {
-    s.font = g.font = "800 82px " + that.allFonts[ that.font ];
+    s.font = g.font = "800 82px " + that.allFonts[ font ];
-    console.log('createBitmap: ', s.font);
     s.fillStyle = "#fff";
     s.fillRect(0, 0, width, height);
 
@@ -107,7 +116,6 @@ function FizzyText(message) {
     that.framesRendered ++;
 
     s.font = g.font = "800 82px " + that.allFonts[ that.font ];
-    console.log('render: ', s.font);
 
     g.clearRect(0, 0, width, height);
 

index.html

@@ -37,22 +37,18 @@
 
       prettyPrint();
 
-      window.fizzyText = new FizzyText('dat.gui');
+      window.fizzyText = new FizzyText('dat.gui', 0);
       var gui = new DAT.GUI();
 
       // Text field
-      gui.add(fizzyText, 'message')
+      gui.add(fizzyText, 'message');
-      
 		
       // Sliders with min + max
       gui.add(fizzyText, 'maxSize').min(0.5).max(7);
       gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
       gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
-      gui.add(fizzyText, 'font', fizzyText.allFonts ) // Font toggle
+      gui.add(fizzyText, 'font', fizzyText.allFonts ); // Font toggle
-      .onChange(function(newValue) {
+
-      		fizzyText.message = fizzyText.message;
-		});
-      
       // Sliders with min, max and increment.
       gui.add(fizzyText, 'noiseStrength', 10, 100, 5);
 

src/DAT/GUI/ControllerObject.js

@@ -20,15 +20,8 @@ DAT.GUI.ControllerObject = function( gui, object, propertyName, options ) {
     _this.setValue(select.value);
   }, false);
 
-  this.domElement.style.cursor = "pointer";
-  this.propertyNameElement.style.cursor = "pointer";
   this.domElement.appendChild(select);
 
-  this.updateDisplay = function() {
-
-  };
-
-
   this.setValue = function(val) {
     val = select.value;
     return DAT.GUI.Controller.prototype.setValue.call(this, val);

src/DAT/GUI/ControllerString.js

@@ -51,7 +51,6 @@ DAT.GUI.ControllerString = function() {
   };
 
   this.domElement.appendChild(input);
-
 };
 
 DAT.GUI.extendController(DAT.GUI.ControllerString);

src/DAT/GUI/GUI.css

@@ -116,7 +116,7 @@ a.guidat-toggle:hover {
 }
 
 .guidat-controller.object {
-  border-left: 5px solid #f00;
+  border-left: 5px solid #ffff00;
 }
 
 .guidat-controller.number input[type=text] {