example is now officially awesome

demo/demo.css

@@ -4,8 +4,8 @@
 }
 
 body { 
-    padding: 0 20px 20px 20px;
 	font: 9.5px/13px Lucida Grande, sans-serif;
+	padding: 0 20px 20px 20px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -46,6 +46,8 @@ pre {
     font: 10px Monaco, monospace;
 }
 
+canvas { border: 1px solid #000; }
+
 p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; }
 
 a:link {

demo/demo.js

@@ -2,10 +2,16 @@ function DynamicText(message, width, height, textAscent) {
     
     var _this = this;
     
-    this.growthSpeed = 0.1;
+    this.growthSpeed = 0.5;
     this.minSize = 0;
     this.maxSize = 5;
     
+    this.noiseScale = 300;
+    this.noiseStrength = 10;
+    this.stepSize = 1;
+    
+    this.displayOutline = false;
+    
     var message = message;
     
     this.width = width;
@@ -13,6 +19,13 @@ function DynamicText(message, width, height, textAscent) {
     
     this.textAscent = textAscent;
     
+    var colors = [
+        "#00aeff",
+        "#0fa954",
+        "#54396e",
+        "#e61d5f"
+        ]
+    
     var r = document.createElement('canvas');
     var s = r.getContext('2d');
     
@@ -29,7 +42,7 @@ function DynamicText(message, width, height, textAscent) {
     var pixels    = [];
     var particles = [];
     
-    s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
+    s.font = g.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
     
 	// Set reference onto particles
 	for (var i = 0; i < 1000; i++) {
@@ -53,10 +66,20 @@ function DynamicText(message, width, height, textAscent) {
         
         g.clearRect(0, 0, width, height);
         
-        for (var i = 0; i < particles.length; i++) {
+        if(_this.displayOutline) {
-            particles[i].update();
+            g.globalCompositeOperation = "source-over";
-            particles[i].draw();
+            g.strokeStyle = "#000";
+            g.lineWidth = .25;
+            g.strokeText(message, 0, textAscent);
         }
+        
+        g.globalCompositeOperation = "darker";
+        
+        for (var i = 0; i < particles.length; i++) {
+            g.fillStyle = colors[i%colors.length];
+            particles[i].render();
+        }
+
     };
     
     var getPosition = function(i) {
@@ -83,23 +106,28 @@ function DynamicText(message, width, height, textAscent) {
     setInterval(render, 30);
     
 	function Particle(x, y, c) {
-		this.x = x;
+	    this.p  = { x: x, y: y };
-		this.y = y;
 		this.r  = 0;
-		this.update = function() {
+		
-			this.x += Math.random() - Math.random();
+		this.render = function() {
-			this.y += Math.random() - Math.random();
-		}
-		this.draw = function() {
             var c = getColor(this.x, this.y);
+            
+                     var angle = noise(this.p.x/_this.noiseScale, this.p.y/_this.noiseScale) * _this.noiseStrength;
+                     var c = getColor(this.p.x, this.p.y);
                         if (c == "rgb(255,255,255)") {
                             this.r -= _this.growthSpeed;
                         } else {
                             this.r += _this.growthSpeed;
                         }
+                        this.p.x += Math.cos(angle) * _this.stepSize;
+                        this.p.y += -Math.sin(angle) * _this.stepSize;
                         this.r = constrain(this.r, _this.minSize, _this.maxSize);
+                        if(this.r <= _this.minSize) {
+                            this.p.x = Math.random() * width;
+                            this.p.y = Math.random() * height;
+                        }
             g.beginPath();
-			g.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
+			g.arc(this.p.x, this.p.y, this.r, 0, Math.PI*2, false);
 			g.fill();
 		}
 	}

demo/improvedNoise.js

@@ -0,0 +1,181 @@
+// http://mrl.nyu.edu/~perlin/noise/
+
+var ImprovedNoise = function () {
+
+	var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
+		 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
+		 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
+		 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
+		 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
+		 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
+		 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
+		 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
+		 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
+		 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
+
+	for ( var i = 0; i < 256 ; i++ ) {
+
+		p[ 256 + i ] = p[ i ];
+
+	}
+
+	function fade( t ) {
+
+		return t * t * t * ( t * ( t * 6 - 15 ) + 10 );
+
+	}
+
+	function lerp( t, a, b ) {
+
+		return a + t * ( b - a );
+
+	}
+
+	function grad( hash, x, y, z ) {
+
+		var h = hash & 15;
+		var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
+		return ( ( h & 1 ) == 0 ? u : -u ) + ( ( h & 2 ) == 0 ? v : -v );
+
+	}
+
+	return {
+
+		noise: function ( x, y, z ) {
+
+			var floorX = Math.floor( x ), floorY = Math.floor( y ), floorZ = Math.floor( z );
+
+			var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
+
+			x -= floorX;
+			y -= floorY;
+			z -= floorZ;
+
+			var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
+
+			var u = fade( x ), v = fade( y ), w = fade( z );
+
+			var A = p[ X ] + Y, AA = p[ A ] + Z, AB = p[ A + 1 ] + Z, B = p[ X + 1 ] + Y, BA = p[ B ] + Z, BB = p[ B + 1 ] + Z;
+
+			return lerp( w, lerp( v, lerp( u, grad( p[ AA ], x, y, z ),
+							   grad( p[ BA ], xMinus1, y, z ) ),
+						  lerp( u, grad( p[ AB ], x, yMinus1, z ),
+							   grad( p[ BB ], xMinus1, yMinus1, z ) ) ),
+					 lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ),
+							   grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ),
+						  lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ),
+							   grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) );
+
+		}
+	}
+}
+
+var currentRandom = Math.random;
+
+// Pseudo-random generator
+function Marsaglia(i1, i2) {
+  // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
+  var z=i1 || 362436069, w= i2 || 521288629;
+  var nextInt = function() {
+	z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
+	w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
+	return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
+  };
+ 
+  this.nextDouble = function() {
+	var i = nextInt() / 4294967296;
+	return i < 0 ? 1 + i : i;
+  };
+  this.nextInt = nextInt;
+}
+Marsaglia.createRandomized = function() {
+  var now = new Date();
+  return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
+};		
+
+// Noise functions and helpers
+function PerlinNoise(seed) {
+  var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
+  var i, j;
+  // http://www.noisemachine.com/talk1/17b.html
+  // http://mrl.nyu.edu/~perlin/noise/
+  // generate permutation
+  var p = new Array(512); 
+  for(i=0;i<256;++i) { p[i] = i; }
+  for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
+  // copy to avoid taking mod in p[0];
+  for(i=0;i<256;++i) { p[i + 256] = p[i]; } 
+  
+  function grad3d(i,x,y,z) {        
+	var h = i & 15; // convert into 12 gradient directions
+	var u = h<8 ? x : y,                 
+		v = h<4 ? y : h===12||h===14 ? x : z;
+	return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
+  }
+
+  function grad2d(i,x,y) { 
+	var v = (i & 1) === 0 ? x : y;
+	return (i&2) === 0 ? -v : v;
+  }
+  
+  function grad1d(i,x) { 
+	return (i&1) === 0 ? -x : x;
+  }
+  
+  function lerp(t,a,b) { return a + t * (b - a); }
+	
+  this.noise3d = function(x, y, z) {
+	var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
+	x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
+	var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
+	var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1  = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
+	return lerp(fz, 
+	  lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x-1, y, z)),
+			   lerp(fx, grad3d(p[p01], x, y-1, z), grad3d(p[p11], x-1, y-1,z))),
+	  lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)),
+			   lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1))));
+  };
+  
+  this.noise2d = function(x, y) {
+	var X = Math.floor(x)&255, Y = Math.floor(y)&255;
+	x -= Math.floor(x); y -= Math.floor(y);
+	var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
+	var p0 = p[X]+Y, p1  = p[X + 1] + Y;
+	return lerp(fy, 
+	  lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x-1, y)),
+	  lerp(fx, grad2d(p[p0 + 1], x, y-1), grad2d(p[p1 + 1], x-1, y-1)));
+  };
+
+  this.noise1d = function(x) {
+	var X = Math.floor(x)&255;
+	x -= Math.floor(x);
+	var fx = (3-2*x)*x*x;
+	return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
+  };
+}
+
+//	these are lifted from Processing.js
+// processing defaults
+var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};
+
+function noise(x, y, z) {
+  if(noiseProfile.generator === undefined) {
+	// caching
+	noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
+  }
+  var generator = noiseProfile.generator;
+  var effect = 1, k = 1, sum = 0;
+  for(var i=0; i<noiseProfile.octaves; ++i) {
+	effect *= noiseProfile.fallout;        
+	switch (arguments.length) {
+	case 1:
+	  sum += effect * (1 + generator.noise1d(k*x))/2; break;
+	case 2:
+	  sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
+	case 3:
+	  sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
+	}
+	k *= 2;
+  }
+  return sum;
+};

index.html

@@ -6,7 +6,7 @@
         
         <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
         <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
-  <!--   <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
+    <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
 
         <script type="text/javascript" src="gui.js"></script>
         <script type="text/javascript" src="controllers/slider.js"></script>
@@ -15,6 +15,7 @@
         <script type="text/javascript" src="controllers/controller.number.js"></script>
         <script type="text/javascript" src="controllers/controller.boolean.js"></script>
         <script type="text/javascript" src="controllers/controller.function.js"></script>
+        <script type="text/javascript" src="demo/improvedNoise.js"></script>
         <script type="text/javascript" src="demo/demo.js"></script>
         <script type="text/javascript">
             var controllableObject = 
@@ -35,24 +36,27 @@
 
                 var testDisplay = new DynamicText("gui-dat", 600, 300, 160);
 
-        //       prettyPrint();
+              prettyPrint();
 
                GUI.start();
                
-               // Creates a number box
-               GUI.add(testDisplay, "minSize", 0, 1);
-               
                // Creates a number box
                GUI.add(testDisplay, "maxSize", 1, 5);
 
                // Creates a slider (min, max)
-               GUI.add(testDisplay, "growthSpeed", 0.01, 0.5);
+               GUI.add(testDisplay, "growthSpeed", 0.01, 1);
+               
+               // Creates a slider (min, max)
+               GUI.add(testDisplay, "noiseStrength", 10, 100);
+               
+               // Creates a slider (min, max)
+               GUI.add(testDisplay, "stepSize", 1, 4);
 
                // Creates a text field
                GUI.add(testDisplay, "message");
 
                // Creates a checkbox
-               GUI.add(controllableObject, "booleanProperty");
+               GUI.add(testDisplay, "displayOutline");
 
                // Creates a button
                GUI.add(controllableObject, "functionProperty")
@@ -73,8 +77,6 @@
     </head>
     <body>
         <h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo"></span></h1>
-        
-        <div id = "helvetica-test"></div>
         <p>
             <strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
         </p>