began particle type

demo/demo.js

@@ -1,4 +1,4 @@
-function Example(string, width, height, textAscent) {
+function DynamicText(string, width, height, textAscent) {
     
     this.string = string;
     
@@ -13,16 +13,20 @@ function Example(string, width, height, textAscent) {
     var c = document.createElement('canvas');
     var g = c.getContext('2d');
     
-    r.setAttribute('width', width);
+    r.setAttribute('width',  width);
-    c.setAttribute('width', width);
+    c.setAttribute('width',  width);
     r.setAttribute('height', height);
     c.setAttribute('height', height);
     
+    // document.getElementById('helvetica-demo').appendChild(r);
     document.getElementById('helvetica-demo').appendChild(c);
     
-    s.font("800 "+textAscent+"px helvetica, arial, sans-serif");
+    var pixels    = [];
+    var particles = [];
     
-    var update = function() {
+    s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
+    
+    this.update = function() {
         
         // Create our reference bitmap
         s.fillStyle = "#fff";
@@ -32,27 +36,69 @@ function Example(string, width, height, textAscent) {
         s.fillText(this.string, 0, this.textAscent);
         
         // Pull reference
-        var imageData = r.getImageData(0, 0, width, height);
+        var imageData = s.getImageData(0, 0, width, height);
-        var pixels = imageData.data;
+        pixels = imageData.data;
         
+        // Set reference onto particles
         for(var i = 0; i < pixels.length; i+=4) {
-            
+            if(pixels[i] < 255) {
+                var p = getPosition(i);
+                if(particles[i])
+                    particles[i].position = p;
+                else
+                    particles.push( new Particle(p.x, p.y) );
+            }
         }
-        
-        // Take the string
-        // save a bitmap
-        // and generate particles
-        // in the same points
-        // with hooks for the
-        // GUI
     };
     
-    var render = function() {
+    this.render = function(c) {
-        // Draw the particles
+        g.fillStyle = c;
+        for(var i = 0; i < particles.length; i++) {
+            var p = particles[i].position;
+            g.fillRect(p.x, p.y, 1, 1);
+        }
+    };
+    
+    var getPosition = function(i) {
+        var p = { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
+        return p;
     };
     
     var getPixel = function(x, y) {
-        
+        var p = { r: pixels[4 * x * y + 0], g: pixels[4 * x * y + 1], b: pixels[4 * x * y + 2], a:  pixels[4 * x * y + 3]};
-        return 
+        return p;
-    }
+    };
+}
+
+function Particle(x, y) {
+    var x = x;
+    var y = y;
+    
+    this.__defineGetter__("x", function() {
+        return x;
+    });
+    
+    this.__defineGetter__("y", function() {
+        return y;
+    });
+    
+    this.__defineGetter__("position", function() {
+        return { x: x, y: y };
+    });
+    
+    this.__defineSetter__("x", function(n) {
+        x = n;
+    });
+    
+    this.__defineSetter__("y", function(n) {
+        y = n;
+    });
+    
+    // Dependent on Vector format
+    this.__defineSetter__("position", function(p) {
+        if(p.x && p.y) {
+            x = p.x;
+            y = p.y;
+        }
+    });
 }

index.html

@@ -15,7 +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/demo.js"></script> -->
+        <script type="text/javascript" src="demo/demo.js"></script>
         <script type="text/javascript">
             var controllableObject = 
                {   
@@ -30,9 +30,13 @@
                      alert("I am a function!");
                   }
                };
-
+               
             window.onload = function() {
 
+                var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
+                testDisplay.update();
+                testDisplay.render("#000");
+
                prettyPrint();
 
                GUI.start();
@@ -62,6 +66,8 @@
     </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">gui-dat</span></h1>
+        
+        <div id = "helvetica-test"></div>
         <p>
             is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
         </p>