diff --git a/demo/demo.css b/demo/demo.css index 9143e80..74d9b39 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -18,7 +18,7 @@ h1 { font-weight: 800; text-transform: lowercase; line-height: 80px; - margin: 20px 0 30px 0; + margin: 20px 0 0 0; } h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { @@ -31,6 +31,7 @@ h1 img { height: 45px; -moz-border-radius: 9px; border-radius: 9px; + margin-bottom: 20px; } h2 { diff --git a/demo/demo.js b/demo/demo.js index cd4d6bd..38eb257 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,6 +1,6 @@ -function DynamicText(string, width, height, textAscent) { +function DynamicText(message, width, height, textAscent) { - this.string = string; + var message = message; this.width = width; this.height = height; @@ -26,54 +26,74 @@ function DynamicText(string, width, height, textAscent) { s.font = "800 "+textAscent+"px helvetica, arial, sans-serif"; - this.update = function() { - - // Create our reference bitmap + var createParticles = function(m) { s.fillStyle = "#fff"; - s.fillRect(0, 0, this.width, this.height); + s.fillRect(0, 0, width, height); - s.fillStyle = "#000"; - s.fillText(this.string, 0, this.textAscent); + s.fillStyle = "#222"; + s.fillText(m, 0, textAscent); // Pull reference 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) ); + var c = getPixel(p.x, p.y); + particles.push( new Particle(p.x, p.y, c) ); } } }; - this.render = function(c) { - g.fillStyle = c; + var render = function() { + + g.clearRect(0, 0, width, height); + for(var i = 0; i < particles.length; i++) { + particles[i].update(); + var p = particles[i].position; + g.fillStyle = particles[i].color; 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; + return { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) }; }; 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 p; + var base = (y * width + x) * 4; + return { r: pixels[base + 0], g: pixels[base + 1], b: pixels[base + 2], a: pixels[base + 3]}; }; + + this.__defineGetter__("message", function() { + return message; + }); + + this.__defineSetter__("message", function(m) { + message = m; + particles = []; + createParticles(message); + render(); + }); + + createParticles(message); + setInterval(render, 30); } -function Particle(x, y) { +function Particle(x, y, c) { var x = x; var y = y; + this.color = "rgb("+c.r+", "+c.g+", "+c.b+")"; + + this.update = function() { + // x+=Math.random() - Math.random(); + }; + this.__defineGetter__("x", function() { return x; }); diff --git a/index.html b/index.html index 90f068a..86d9337 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,6 @@ window.onload = function() { var testDisplay = new DynamicText("gui-dat", 500, 100, 80); - testDisplay.update(); - testDisplay.render("#000"); prettyPrint(); @@ -51,7 +49,7 @@ GUI.add(controllableObject, "notchedNum", 0, 800, 100); // Creates a text field - GUI.add(document.getElementById('helvetica-demo'), "innerHTML"); + GUI.add(testDisplay, "message"); // Creates a checkbox GUI.add(controllableObject, "booleanProperty"); @@ -64,7 +62,7 @@
-