diff --git a/demo/demo.js b/demo/demo.js
index 905681a..cd4d6bd 100644
--- a/demo/demo.js
+++ b/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);
- c.setAttribute('width', width);
+ r.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 pixels = imageData.data;
+ var imageData = s.getImageData(0, 0, width, height);
+ 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() {
- // Draw the particles
+ this.render = function(c) {
+ 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) {
-
- return
- }
+ 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 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;
+ }
+ });
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a68188..a00165c 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
-
+