From 340f58fbabe18ba2f463c8446384345f877ae16c Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Tue, 25 Jan 2011 16:07:51 -0800 Subject: [PATCH 1/4] decided not to use svgs and am using the native font method for the canvas object --- demo/assets/a.svg | 22 -- demo/assets/b.svg | 18 -- demo/assets/c.svg | 17 -- demo/assets/d.svg | 17 -- demo/assets/e.svg | 18 -- demo/assets/f.svg | 15 -- demo/assets/favicon.gif | Bin 169 -> 0 bytes demo/assets/g.svg | 20 -- demo/assets/h.svg | 16 -- demo/assets/i.svg | 13 - demo/assets/j.svg | 15 -- demo/assets/k.svg | 13 - demo/assets/l.svg | 13 - demo/assets/m.svg | 19 -- demo/assets/n.svg | 15 -- demo/assets/o.svg | 17 -- demo/assets/p.svg | 18 -- demo/assets/q.svg | 18 -- demo/assets/r.svg | 15 -- demo/assets/s.svg | 20 -- demo/assets/t.svg | 15 -- demo/assets/u.svg | 16 -- demo/assets/v.svg | 13 - demo/assets/w.svg | 14 -- demo/assets/x.svg | 13 - demo/assets/y.svg | 16 -- demo/assets/z.svg | 13 - demo/demo.js | 30 +++ demo/swell.js | 512 ---------------------------------------- index.html | 27 ++- 30 files changed, 45 insertions(+), 943 deletions(-) delete mode 100644 demo/assets/a.svg delete mode 100644 demo/assets/b.svg delete mode 100644 demo/assets/c.svg delete mode 100644 demo/assets/d.svg delete mode 100644 demo/assets/e.svg delete mode 100644 demo/assets/f.svg delete mode 100644 demo/assets/favicon.gif delete mode 100644 demo/assets/g.svg delete mode 100644 demo/assets/h.svg delete mode 100644 demo/assets/i.svg delete mode 100644 demo/assets/j.svg delete mode 100644 demo/assets/k.svg delete mode 100644 demo/assets/l.svg delete mode 100644 demo/assets/m.svg delete mode 100644 demo/assets/n.svg delete mode 100644 demo/assets/o.svg delete mode 100644 demo/assets/p.svg delete mode 100644 demo/assets/q.svg delete mode 100644 demo/assets/r.svg delete mode 100644 demo/assets/s.svg delete mode 100644 demo/assets/t.svg delete mode 100644 demo/assets/u.svg delete mode 100644 demo/assets/v.svg delete mode 100644 demo/assets/w.svg delete mode 100644 demo/assets/x.svg delete mode 100644 demo/assets/y.svg delete mode 100644 demo/assets/z.svg delete mode 100644 demo/swell.js diff --git a/demo/assets/a.svg b/demo/assets/a.svg deleted file mode 100644 index 0a96e0d..0000000 --- a/demo/assets/a.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/b.svg b/demo/assets/b.svg deleted file mode 100644 index d12fea7..0000000 --- a/demo/assets/b.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/c.svg b/demo/assets/c.svg deleted file mode 100644 index f768013..0000000 --- a/demo/assets/c.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/d.svg b/demo/assets/d.svg deleted file mode 100644 index 26fc963..0000000 --- a/demo/assets/d.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/e.svg b/demo/assets/e.svg deleted file mode 100644 index f67668b..0000000 --- a/demo/assets/e.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/f.svg b/demo/assets/f.svg deleted file mode 100644 index b911c4d..0000000 --- a/demo/assets/f.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/favicon.gif b/demo/assets/favicon.gif deleted file mode 100644 index c5d5b3fa2f016427cdb3b2ab2550f5ceb9137b3a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 169 zcmV;a09OA;Nk%w1VITk?0FeLyR5@Ps%&e*DlogY%Wn{^Xx=H@sOM}FVRu;l-=~k;8pjPp0#iBUHz9IW-+EwCU{1eX1IpfrufDf X=Qjsg=Xgh%XSs*jr}@V@Pyhfsn^H-B diff --git a/demo/assets/g.svg b/demo/assets/g.svg deleted file mode 100644 index 2abeb04..0000000 --- a/demo/assets/g.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/h.svg b/demo/assets/h.svg deleted file mode 100644 index 953a079..0000000 --- a/demo/assets/h.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/i.svg b/demo/assets/i.svg deleted file mode 100644 index 32df9d3..0000000 --- a/demo/assets/i.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/j.svg b/demo/assets/j.svg deleted file mode 100644 index f7ccfd3..0000000 --- a/demo/assets/j.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/k.svg b/demo/assets/k.svg deleted file mode 100644 index f4c61d6..0000000 --- a/demo/assets/k.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/l.svg b/demo/assets/l.svg deleted file mode 100644 index dc59937..0000000 --- a/demo/assets/l.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/m.svg b/demo/assets/m.svg deleted file mode 100644 index ebf2905..0000000 --- a/demo/assets/m.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/n.svg b/demo/assets/n.svg deleted file mode 100644 index 959f78c..0000000 --- a/demo/assets/n.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/o.svg b/demo/assets/o.svg deleted file mode 100644 index 15ecae7..0000000 --- a/demo/assets/o.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/p.svg b/demo/assets/p.svg deleted file mode 100644 index 3f095d8..0000000 --- a/demo/assets/p.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/q.svg b/demo/assets/q.svg deleted file mode 100644 index f9c19c8..0000000 --- a/demo/assets/q.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/r.svg b/demo/assets/r.svg deleted file mode 100644 index 20e759e..0000000 --- a/demo/assets/r.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/s.svg b/demo/assets/s.svg deleted file mode 100644 index 45e88b8..0000000 --- a/demo/assets/s.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/t.svg b/demo/assets/t.svg deleted file mode 100644 index e406c50..0000000 --- a/demo/assets/t.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/u.svg b/demo/assets/u.svg deleted file mode 100644 index 04606d8..0000000 --- a/demo/assets/u.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/v.svg b/demo/assets/v.svg deleted file mode 100644 index fcba554..0000000 --- a/demo/assets/v.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/w.svg b/demo/assets/w.svg deleted file mode 100644 index 384291b..0000000 --- a/demo/assets/w.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/x.svg b/demo/assets/x.svg deleted file mode 100644 index 0957a24..0000000 --- a/demo/assets/x.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/y.svg b/demo/assets/y.svg deleted file mode 100644 index b442724..0000000 --- a/demo/assets/y.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - -]> - - - - - diff --git a/demo/assets/z.svg b/demo/assets/z.svg deleted file mode 100644 index cfff0d1..0000000 --- a/demo/assets/z.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - -]> - - - - - diff --git a/demo/demo.js b/demo/demo.js index e69de29..2e4c70a 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -0,0 +1,30 @@ + +var c, g; +var frameRate = 1000/60; +var width, height; + +var checkAsset = 0; +var letterWidth = 50; + +function setup() { + + c = document.getElementById('helvetica-demo'); + g = c.getContext('2d'); + + width = c.width; + height = c.height; + + g.font = "800 80px helvetica, arial, sans-serif"; + frameRate = setInterval("draw()", frameRate); +} + + +function draw() { + + g.fillStyle = "#fff"; + g.fillRect(0, 0, width, height); + + g.fillStyle = "#222"; + g.fillText(controllableObject.pageTitle, 0, height); + +} \ No newline at end of file diff --git a/demo/swell.js b/demo/swell.js deleted file mode 100644 index 62933dd..0000000 --- a/demo/swell.js +++ /dev/null @@ -1,512 +0,0 @@ -/** - * @author george michael brower / http://georgemichaelbrower.com/ - */ - -function loadSVG(loc, success, fail) { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange=function() { - if (xmlhttp.readyState==4) { - if (xmlhttp.status == 200) { - if (xmlhttp.responseXML == null) { - if (fail != undefined) fail.call(this, loc); - } else { - var node = xmlhttp.responseXML.getElementsByTagName("svg").item(0); - var svg = new SVG(node); - svg.filename = loc; - success.call(this, svg, loc); - } - } else { - if (fail != undefined) fail.call(this, loc); - } - - } - } - xmlhttp.open("GET", loc, true); - xmlhttp.send(null); -} - -function createSVG(svgText) { - var node = document.createElement("svg"); - node.innerHTML = svgText; - return new SVG(node); -} - -var SVG = function(node) { - this.filename = ""; - - this.children = []; - - // TODO interpret things other than pixels. - - var w = node.getAttribute("width"); - var h = node.getAttribute("height"); - - this.width = w == null ? 0 : parseFloat(w.replace("px", "")); - this.height = h == null ? 0 : parseFloat(h.replace("px", "")); - - for (var i = 0; i < node.childNodes.length; i++) { - - if (!node.childNodes.item(i).getAttribute) continue; - - var toAdd; - if (node.childNodes.item(i).nodeName == "g") { - toAdd = new SVG(node.childNodes.item(i)); - } else { - toAdd = new Path(node.childNodes.item(i)); - } - - this.children.push(toAdd); - - } - - // Draws every path in this SVG to the specified context. - this.draw = function(context) { - for (var i = 0; i < this.children.length; i++) { - this.children[i].draw(context); - } - }; - - -} - -var Path = function(element) { - - this.element = element; - this.commands = commands(element); - this.lineWidth = parseLineWidth(element); - this.strokeStyle = parseStrokeStyle(element); - this.fillStyle = parseFillStyle(element); - -// for at - this.totalLength = 0; - this.lengths = []; - this.tlengths = [] - - - var turtle = function() { - this.x; - this.y; - this.x1; - this.y1; - this.x2; - this.y2; - this.reset = function() { - this.x = this.y = this.x1 = this.y1 = this.x2 = this.y2 = 0; - } - this.reset(); - } - - // Draws this entire path to the specified context. - this.draw = function(context) { - this.style(context); - context.beginPath(); - this.shape(context); - this.end(context); - - }; - - // Calls canvas shape methods such as moveTo(), lineTo(), bezierCurveTo() based on the commands in this path. - this.shape = function(context) { - for (var i = 0; i < this.commands.length; i++) { - this.commands[i].shape(turtle, context); - } - }; - - this.lerp = function(a,b,c,d,t) { - var t1 = 1.0 - t; - return a*t1*t1*t1 + 3*b*t*t1*t1 + 3*c*t*t*t1 + d*t*t*t; - - }; - - this.at = function(t, c) { - var rx, ry; - if (this.lengths.length == 0) { - this.calcLengths(c); - } - - var tt = this.tlengths[0]; - var i = 0; - - while (t > tt) { - i++; - tt += this.tlengths[i]; - } - - pt = tt - this.tlengths[i]; - - - - var it = this.map(t, pt, tt, 0, 1); - - - for (var j = 0; j <= i; j++) { - this.commands[j].shape(turtle, c); - } - var px = turtle.x; - var py = turtle.y; - - this.commands[i+1].shape(turtle, c); - - - rx = this.lerp(px, turtle.x1, turtle.x2, turtle.x, it); - ry = this.lerp(py, turtle.y1, turtle.y2, turtle.y, it); - - return {x:rx, y:ry}; - }; - - this.map = function(v, i1, i2, o1, o2) { - return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); - } - - - this.calcLengths = function(c) { - var rx,ry; - var prx, pry; - - // go through and get the length of the entire path - // as well as the lengths of each indiv. path - - var curLength = 0; - - var lengthAccuracy = 0.001; - - this.commands[0].shape(turtle, c); - - var px = prx = turtle.x; - var py = pry = turtle.y; - - for (var i = 1; i < this.commands.length; i++) { - - curLength = 0; - - px = turtle.x; - py = turtle.y; - this.commands[i].shape(turtle, c); - - for (var tt = 0; tt <=1; tt+= lengthAccuracy) { - - rx = this.lerp(px, turtle.x1, turtle.x2, turtle.x, tt); - ry = this.lerp(py, turtle.y1, turtle.y2, turtle.y, tt); - - - curLength += this.dist(rx, ry, prx, pry); - - - prx = rx; - pry = ry; - - } - - this.lengths.push(curLength); - this.totalLength += curLength; - - - } - - for (var j = 0; j < this.lengths.length; j++) { - this.tlengths.push(this.lengths[j]/this.totalLength); - } - } - - this.dist = function (x, y, xx, yy) { - return Math.sqrt((x - xx) * (x - xx) + (y - yy) * (y - yy)); - }; - - // Sets the drawing style of the canvas context based on the styles in this Path. - this.style = function(context) { - - if (this.lineWidth != null) { - context.lineWidth = this.lineWidth; - } - - if (this.strokeStyle != null) { - context.strokeStyle = this.strokeStyle; - if (this.lineWidth == undefined) { - context.lineWidth = 1; - } - } - - if (this.fillStyle != null) { - context.fillStyle = this.fillStyle; - } - - }; - - // Calls context.fill() and/or context.stroke() depending on the styles in this Path. - this.end = function(context) { - if (this.fillStyle != null) context.fill(); - if (this.strokeStyle != null) context.stroke(); - } - -} - -var parseLineWidth = function(element) { - var a = element.attributes.getNamedItem("stroke-width"); - return a == null ? null : parseFloat(a.nodeValue); -} - -var parseStrokeStyle = function(element) { - var a = element.attributes.getNamedItem("stroke"); - return a == null ? null : a.nodeValue; -} - -var parseFillStyle = function(element) { - var a = element.attributes.getNamedItem("fill"); - if (a == null) { - var s = element.attributes.getNamedItem("stroke"); - if (s != null) { - return null; - } else { - return "#000000"; - } - } else { - if (a.nodeValue == "none") return null; - return a.nodeValue; - } -} - -var Command = function(type, data) { - this.type = type; - this.data = data; - this.debug = false; - - // Calls context shape methods such as moveTo(), lineTo(), bezierCurveTo(), etc. - this.shape = function(turtle, c) { - - var px = turtle.x; - var py = turtle.y; - - if (this.type == "M") { - - turtle.x = this.data[0]; - turtle.y = this.data[1]; - if (c) c.moveTo(turtle.x, turtle.y); - - - } else if (this.type == "C") { - - turtle.x = this.data[4]; - turtle.y = this.data[5]; - if (c) c.bezierCurveTo(turtle.x1 = this.data[0], - turtle.y1 = this.data[1], - turtle.x2 = this.data[2], - turtle.y2 = this.data[3], - turtle.x, - turtle.y); - - } else if (this.type == "c") { - - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+this.data[0], - turtle.y1 = turtle.y+this.data[1], - turtle.x2 = turtle.x+this.data[2], - turtle.y2 = turtle.y+this.data[3], - turtle.x += this.data[4], - turtle.y += this.data[5]); - - } else if (this.type == "S") { - - turtle.x = this.data[2]; - turtle.y = this.data[3]; - var dx = turtle.x - turtle.x2; - var dy = turtle.y - turtle.y2; - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+dx, - turtle.y1 = turtle.y+dy, - turtle.x2 = this.data[0], - turtle.y2 = this.data[1], - turtle.x, - turtle.y); - - } else if (this.type == "s") { - - var dx = turtle.x - turtle.x2; - var dy = turtle.y - turtle.y2; - if (c) c.bezierCurveTo(turtle.x1 = turtle.x+dx, - turtle.y1 = turtle.y+dy, - turtle.x2 = turtle.x+this.data[0], - turtle.y2 = turtle.y+this.data[1], - turtle.x += this.data[2], - turtle.y += this.data[3]); - - } else if (this.type == "L") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x = this.data[0], - turtle.y = this.data[1]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "l") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x+=this.data[0], turtle.y+=this.data[1]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "H") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x = this.data[0], turtle.y) - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "h") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x += this.data[0], turtle.y) - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "V") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x, turtle.y = this.data[0]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "v") { - - turtle.x1 = turtle.x; - turtle.y1 = turtle.y; - if (c) c.lineTo(turtle.x, turtle.y += this.data[0]); - turtle.x2 = turtle.x; - turtle.y2 = turtle.y; - - } else if (this.type == "z") { - - c.closePath(); - - } else { - - alert("unrecognized command " + this.type); - - } - - if (c){ - c.strokeStyle = "#000000"; - c.lineWidth = 1; - if (this.debug) { - c.strokeRect(turtle.x-1.5, turtle.y-1.5, 3, 3); - c.beginPath(); - c.moveTo(turtle.px, turtle.py); - c.lineTo(turtle.x1, turtle.y1); - c.closePath(); - c.stroke(); - } - } - - } - -} - -// Utility functions - -var commands = function(element) { - - if (element.nodeName.toLowerCase() == "path") { - return commandsFromD(element.getAttribute("d")); - } - - if (element.nodeName.toLowerCase() == "polygon") { - return commandsFromPoints(element.getAttribute("points")); - } - - if (element.nodeName.toLowerCase() == "line") { - return commandsFromLine(element); - } - - if (element.nodeName.toLowerCase() == "rect") { - return commandsFromRect(element); - } - - return []; - -} - -// Returns an array of commands as interpreted by the "d" attribute of a path. -var commandsFromD = function(d) { - - var toReturn = []; - var commands = d.match(/[a-zA-Z][0-9\.\-\,]+/g); - - for (var i = 0; i < commands.length; i++) { - - var type = commands[i].charAt(0); - - // Dirty time. - var commandData = commands[i].substr(1); - commandData = commandData.replace(/\-/g, ",-") - - if (commandData.charAt(0) == ",") { - commandData = commandData.substr(1); - } - commandData = commandData.split(","); - for (var j = 0; j < commandData.length; j++) { - commandData[j] = parseFloat(commandData[j]); - } - - toReturn.push(new Command(type, commandData)); - - } - - return toReturn; -} - -var commandsFromLine = function(element) { - var toReturn = []; - var x1 = parseFloat(element.getAttribute("x1")); - var x2 = parseFloat(element.getAttribute("x2")); - var y1 = parseFloat(element.getAttribute("y1")); - var y2 = parseFloat(element.getAttribute("y2")); - toReturn.push(new Command("M", [x1,y1])); - toReturn.push(new Command("L", [x2,y2])); - return toReturn; -} - -// Returns an array of commands as interpreted by the "points" attribute of a polygon. -var commandsFromPoints = function(pointAttribute) { - //pointAttribute = pointAttribute.replace(/\,\-/g, "-"); - - - var shouldBeComma = true; - if (pointAttribute.indexOf(",") == -1) { - for (var i = 0; i < pointAttribute.length; i++) { - var c = pointAttribute.charAt(i); - if (c == " ") { - if (shouldBeComma) { - pointAttribute = pointAttribute.setCharAt(i, ","); - } - shouldBeComma = !shouldBeComma; - } - } - } - - pointAttribute = "M"+pointAttribute; - pointAttribute = pointAttribute.replace(/ /g, "L") + "z"; - var toReturn = commandsFromD(pointAttribute); - return toReturn; -} - -String.prototype.setCharAt = function(index,chr) { - if(index > this.length-1) return str; - return this.substr(0,index) + chr + this.substr(index+1); -} - -var commandsFromRect = function(element) { - - var toReturn = []; - var x = parseFloat(element.getAttribute("x")); - var y = parseFloat(element.getAttribute("y")); - var w = parseFloat(element.getAttribute("width")); - var h = parseFloat(element.getAttribute("height")); - toReturn.push(new Command("M", [x,y])); - toReturn.push(new Command("h", [w])); - toReturn.push(new Command("v", [h])); - toReturn.push(new Command("h", [-w])); - toReturn.push(new Command("v", [-h])); - return toReturn; -} \ No newline at end of file diff --git a/index.html b/index.html index 8415cf0..1cb2d22 100644 --- a/index.html +++ b/index.html @@ -15,14 +15,15 @@ + - -

GUI-DAT flagGUI-DAT

+

GUI-DAT flaggui-dat

is a super-light javascript library for making GUI elements. It is inspired by controlP5.

+ 
 var controllableObject = 
    {   

From fa4df59d0e8a0eb84598e4b037617c534dbb0004 Mon Sep 17 00:00:00 2001
From: jonobr1 
Date: Tue, 25 Jan 2011 17:19:16 -0700
Subject: [PATCH 2/4] fixed x-height

---
 demo/demo.css | 3 ++-
 demo/demo.js  | 2 +-
 index.html    | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index b4a6489..de418d3 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 20px 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;
 }
 
 pre { 
diff --git a/demo/demo.js b/demo/demo.js
index 2e4c70a..58c179a 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -25,6 +25,6 @@ function draw() {
     g.fillRect(0, 0, width, height);
     
     g.fillStyle = "#222";
-    g.fillText(controllableObject.pageTitle, 0, height);
+    g.fillText(controllableObject.pageTitle, 0, 80);
     
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index a64cbe6..fb683f1 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
         
     
     
-        
GUI-DAT flaggui-dat

+        
GUI-DAT flaggui-dat

         

             is a super-light javascript library for making GUI elements. It is inspired by controlP5.
         


From 7913c0d0b76103a000a0b2a4c06d65fb44e57dfb Mon Sep 17 00:00:00 2001
From: jonobr1 
Date: Tue, 25 Jan 2011 17:58:52 -0700
Subject: [PATCH 3/4] removed canvas element to be just html

---
 demo/demo.css | 17 +++++++++++++++--
 demo/demo.js  | 30 ------------------------------
 index.html    | 43 ++++++++++++++++++++++---------------------
 3 files changed, 37 insertions(+), 53 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index de418d3..6a3440b 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 0 0;
+    margin: 20px 0 20px 0;
 }
 
 h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@@ -31,7 +31,6 @@ h1 img {
     height: 45px;
     -moz-border-radius: 9px;
     border-radius: 9px;
-    margin-bottom: 20px;
 }
 
 pre { 
@@ -57,6 +56,20 @@ a:active {
     color: #54396e;
 }
 
+#columns {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+}
+
+#columns div {
+    float: left;
+    width : auto;
+    height: 10px;
+}
+
 /* SPAN elements with the classes below are added by prettyprint. */
 .str { color: #0fa954; }
 .kwd { color: #e61d5f; }
diff --git a/demo/demo.js b/demo/demo.js
index 58c179a..e69de29 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,30 +0,0 @@
-
-var c, g;
-var frameRate = 1000/60;
-var width, height;
-
-var checkAsset = 0;
-var letterWidth = 50;
-
-function setup() {
-    
-    c = document.getElementById('helvetica-demo');
-    g = c.getContext('2d');
-    
-    width  = c.width;
-    height = c.height;
-    
-    g.font = "800 80px helvetica, arial, sans-serif";
-    frameRate = setInterval("draw()", frameRate);
-}
-
-
-function draw() {
-    
-    g.fillStyle = "#fff";
-    g.fillRect(0, 0, width, height);
-    
-    g.fillStyle = "#222";
-    g.fillText(controllableObject.pageTitle, 0, 80);
-    
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index fb683f1..4a68188 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,7 @@
         
         
         
-        
-        
+        
         
     
     
-        
GUI-DAT flaggui-dat

+        
GUI-DAT flaggui-dat

         

             is a super-light javascript library for making GUI elements. It is inspired by controlP5.
         

@@ -70,20 +69,22 @@
         
 var controllableObject = 
    {   
-	  numberProperty: 20,
-	  constrainedNum: 0,
-	  notchedNum: 240,
-	  textProperty: "a string",
-	  anotherTextProperty: "another string",
-	  booleanProperty: false,
-	  anotherBooleanProperty: false,
-	  functionProperty: function() {
-		 alert("I am a function!");
-	  }
+      numberProperty: 20,
+      constrainedNum: 0,
+      notchedNum: 240,
+      pageTitle: "gui-dat",
+      anotherTextProperty: "another string",
+      booleanProperty: false,
+      anotherBooleanProperty: false,
+      functionProperty: function() {
+         alert("I am a function!");
+      }
    };
 
 window.onload = function() {
 
+   prettyPrint();
+
    GUI.start();
 
    // Creates a number box
@@ -91,12 +92,12 @@ window.onload = function() {
 
    // Creates a slider (min, max)
    GUI.add(controllableObject, "constrainedNum", -100, 100)
-   
+
    // Creates a slider with notches
    GUI.add(controllableObject, "notchedNum", 0, 800, 100)
 
    // Creates a text field
-   GUI.add(controllableObject, "textProperty");
+   GUI.add(controllableObject, "pageTitle");
 
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
@@ -104,11 +105,11 @@ window.onload = function() {
    // Creates a button
    GUI.add(controllableObject, "functionProperty")
       .setName("Fire a Function");
-
 };
         

         
+        

     
 
\ No newline at end of file

From 6d51c8e609aa9295e8a03ce95241bade7163ab9e Mon Sep 17 00:00:00 2001
From: jonobr1 
Date: Tue, 25 Jan 2011 18:36:47 -0700
Subject: [PATCH 4/4] pushing to George

---
 demo/demo.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/demo/demo.js b/demo/demo.js
index e69de29..905681a 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -0,0 +1,58 @@
+function Example(string, width, height, textAscent) {
+    
+    this.string = string;
+    
+    this.width  = width;
+    this.height = height;
+    
+    this.textAscent = textAscent;
+    
+    var r = document.createElement('canvas');
+    var s = r.getContext('2d');
+    
+    var c = document.createElement('canvas');
+    var g = c.getContext('2d');
+    
+    r.setAttribute('width', width);
+    c.setAttribute('width', width);
+    r.setAttribute('height', height);
+    c.setAttribute('height', height);
+    
+    document.getElementById('helvetica-demo').appendChild(c);
+    
+    s.font("800 "+textAscent+"px helvetica, arial, sans-serif");
+    
+    var update = function() {
+        
+        // Create our reference bitmap
+        s.fillStyle = "#fff";
+        s.fillRect(0, 0, this.width, this.height);
+        
+        s.fillStyle = "#000";
+        s.fillText(this.string, 0, this.textAscent);
+        
+        // Pull reference
+        var imageData = r.getImageData(0, 0, width, height);
+        var pixels = imageData.data;
+        
+        for(var i = 0; i < pixels.length; i+=4) {
+            
+        }
+        
+        // Take the string
+        // save a bitmap
+        // and generate particles
+        // in the same points
+        // with hooks for the
+        // GUI
+    };
+    
+    var render = function() {
+        // Draw the particles
+    };
+    
+    var getPixel = function(x, y) {
+        
+        return 
+    }
+}
\ No newline at end of file