public
Description: A JavaScript implementation of Chris Coyne's Context Free Design Grammar.
Clone URL: git://github.com/osteele/cfdg-js.git
add Driver class; move dom bindings to demo file
osteele (author)
Sun Mar 23 19:45:35 -0700 2008
commit  acbbfc4a5c0749ffb6b338c978e9ed5ca67937db
tree    1a9d0ea1285904a44335415dba18f61e10f84aec
parent  73ebc27720cada5003c980213739fac1c2d144d0
...
1
2
 
 
 
 
3
4
5
...
13
14
15
 
 
16
17
 
18
19
20
...
1
 
2
3
4
5
6
7
8
...
16
17
18
19
20
21
 
22
23
24
25
0
@@ -1,5 +1,8 @@
0
 * Architecture
0
-- decouple driver from demo
0
+- turn driver into an object
0
+
0
+* Literacy
0
+- namespaces
0
 - css for styling
0
 
0
 * Language
0
@@ -13,8 +16,10 @@
0
 * Features
0
 - inline syntax errors
0
 - syntax coloring
0
+- jquery plugin
0
+- svg back end
0
 
0
-* Errors checking
0
+* Error checking
0
 - unknown rules
0
 - "s 1 2 3"
0
 - "s 1 s 2 3"
...
1
2
3
4
 
 
 
 
 
 
 
 
 
 
 
5
6
7
 
 
 
 
 
 
8
...
1
2
3
 
4
5
6
7
8
9
10
11
12
13
14
15
 
 
16
17
18
19
20
21
22
0
@@ -1,8 +1,22 @@
0
 /* Copyright 2008 by Oliver Steele. All rights reserved. */
0
 
0
 $(function() {
0
- setup($("#canvas")[0]);
0
+ CFDG.Driver.setup({
0
+ canvas: $("#canvas")[0],
0
+ onstart: function() { $('body').addClass('rendering') },
0
+ onstop: function() { $('body').removeClass('rendering') },
0
+ onstatus: function(msg) {
0
+ $('#statusField').html(msg);
0
+ },
0
+ onerror: function(msg) {
0
+ alert(msg);
0
+ }
0
+ });
0
     var rendering = false;
0
- $('#renderButton').click(doRender);
0
- $('#stopButton').click(stopRendering);
0
+ $('#renderButton').click(function() {
0
+ CFDG.Driver.start($('#sourceField')[0].value);
0
+ });
0
+ $('#stopButton').click(function() {
0
+ CFDG.Driver.stop();
0
+ });
0
 });
...
3
4
5
6
7
8
9
10
11
12
13
14
...
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
...
3
4
5
 
 
 
 
 
 
6
7
8
...
115
116
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
0
@@ -3,12 +3,6 @@
0
 var canvas;
0
 var ctx;
0
 
0
-function setup(canvasElement) {
0
- canvas = canvasElement;
0
- ctx = canvas.getContext("2d");
0
- ctx.save();
0
-}
0
-
0
 var Stats;
0
 var NewBounds;
0
 
0
@@ -121,91 +115,100 @@ Graphics.prototype.setRGBA = function (rgba) {
0
   this.ctx.globalAlpha = rgba[3];
0
 };
0
 
0
-function doRender() {
0
- model = new Model;
0
- var sourceText = document.getElementById("sourceField").value;
0
- var err = lex(sourceText, new Parser(new Builder(model)));
0
- if (err) {
0
- var msg = "syntax error at \'" + err.token + "\' on line " + err.lineno + ": " + err.message;
0
- alert(msg);
0
- return;
0
- }
0
- drawingContext = new Context(model); // global
0
- drawingContext.transform.m[1][1] *= -1;
0
- model.randomGenerator = new RepeatableRandom;
0
- var graphics = drawingContext.graphics;
0
- graphics.setCanvas(document.getElementById("canvas"));
0
- graphics.reset();
0
- graphics.rescale = 0.25;
0
- var tm = drawingContext.transform.m;
0
- //tm[0][0] = tm[1][1] = 20;
0
- //tm[1][1] *= -1;
0
- //drawingContext.stats.cutoff *= Math.abs(tm[0][0] * tm[1][1]);
0
- //drawingContext.stats.cutoff /= 100;
0
- bounds = new Bounds(0, 0, 0, 0);
0
- drawingContext.graphics.setViewport(bounds);
0
- drawingContext.graphics.bounds = bounds;
0
- Stats = {
0
- startTime: (new Date).getTime(),
0
- shapeCount: 0,
0
- resetCount: 0
0
- };
0
- model.draw(drawingContext);
0
- drawNext();
0
- document.getElementById('renderButton').style.display = 'none';
0
- document.getElementById('stopButton').style.display = 'inline';
0
-}
0
-
0
-function drawNext() {
0
- if (drawingContext == null) return; // if stopRendering has been called
0
- var graphics = drawingContext.graphics;
0
- var oldBounds = graphics.viewport;
0
- var newBounds = graphics.bounds;
0
- if (!newBounds.equals(oldBounds)) {
0
- var w = newBounds.xmax - newBounds.xmin;
0
- var h = newBounds.ymax - newBounds.ymin;
0
- var rescale = graphics.rescale;
0
- graphics.rescale += 0.05;
0
- if (newBounds.xmin < oldBounds.xmin) newBounds.xmin -= rescale * w;
0
- if (newBounds.ymin < oldBounds.ymin) newBounds.ymin -= rescale * h;
0
- if (newBounds.xmax > oldBounds.xmax) newBounds.xmax += rescale * w;
0
- if (newBounds.ymax > oldBounds.ymax) newBounds.ymax += rescale * h;
0
- //info("scale to " + Bounds.xmin + ", " + Bounds.ymin + ", " + Bounds.xmax + ", " + Bounds.ymax);
0
- w = newBounds.xmax - newBounds.xmin;
0
- h = newBounds.xmax - newBounds.xmin;
0
- var ar = w / h;
0
- var car = graphics.canvas.width / graphics.canvas.height;
0
- //if (ar > car)
0
- graphics.setViewport(newBounds);
0
- graphics.bounds = newBounds;
0
- drawingContext.queue = [];
0
- model.randomGenerator.rewind();
0
- Stats.shapeCount = 0;
0
- Stats.resetCount += 1;
0
- model.draw(drawingContext);
0
- }
0
- drawingContext.flush(100);
0
-
0
- var t0 = Stats.startTime;
0
- var t1 = (new Date).getTime();
0
- var msg = "Rendered " + Stats.shapeCount + " shapes in " + Math.round((t1-t0)/1000) + "s.";
0
- if (drawingContext.queue.length)
0
- msg += " " + drawingContext.queue.length + " expansions remaining.";
0
- if (Stats.resetCount) msg += " (Reset bounds " + Stats.resetCount + " time"+(Stats.resetCount==1?'':'s')+".)";
0
- $('#statusField').html(msg);
0
-
0
- if (drawingContext.queue.length)
0
- setTimeout(drawNext, 10);
0
- else
0
- stopRendering();
0
-}
0
-
0
-function stopRendering() {
0
- if (drawingContext.queue.length)
0
- $('#statusField').html("<font color='#ff0000'>Stopped rendering</font> at " + Stats.shapeCount + " shapes after " + Math.round(((new Date).getTime() - Stats.startTime)/1000) + "s, with " + drawingContext.queue.length + " expansions remaining.");
0
-
0
- drawingContext.queue = [];
0
- drawingContext = null;
0
- document.getElementById('renderButton').style.display = '';
0
- document.getElementById('stopButton').style.display = 'none';
0
-}
0
+var CFDG = window.CFDG || {};
0
+
0
+CFDG.Driver = {
0
+ setup: function(options) {
0
+ this.options = options;
0
+ canvas = options.canvas;
0
+ ctx = canvas.getContext("2d");
0
+ ctx.save();
0
+ },
0
+
0
+ start: function(sourceText) {
0
+ model = new Model;
0
+ var err = lex(sourceText, new Parser(new Builder(model)));
0
+ if (err) {
0
+ var msg = "syntax error at \'" + err.token + "\' on line " + err.lineno + ": " + err.message;
0
+ this.options.onerror(msg);
0
+ return;
0
+ }
0
+ drawingContext = new Context(model); // global
0
+ drawingContext.transform.m[1][1] *= -1;
0
+ model.randomGenerator = new RepeatableRandom;
0
+ var graphics = drawingContext.graphics;
0
+ graphics.setCanvas(canvas);
0
+ graphics.reset();
0
+ graphics.rescale = 0.25;
0
+ var tm = drawingContext.transform.m;
0
+ //tm[0][0] = tm[1][1] = 20;
0
+ //tm[1][1] *= -1;
0
+ //drawingContext.stats.cutoff *= Math.abs(tm[0][0] * tm[1][1]);
0
+ //drawingContext.stats.cutoff /= 100;
0
+ bounds = new Bounds(0, 0, 0, 0);
0
+ drawingContext.graphics.setViewport(bounds);
0
+ drawingContext.graphics.bounds = bounds;
0
+ Stats = {
0
+ startTime: (new Date).getTime(),
0
+ shapeCount: 0,
0
+ resetCount: 0
0
+ };
0
+ model.draw(drawingContext);
0
+ (this.options.onstart||function(){})();
0
+ this.step();
0
+ },
0
+
0
+ step: function() {
0
+ if (drawingContext == null)
0
+ // not rendering
0
+ return;
0
+ var graphics = drawingContext.graphics,
0
+ oldBounds = graphics.viewport,
0
+ newBounds = graphics.bounds;
0
+ if (!newBounds.equals(oldBounds)) {
0
+ var w = newBounds.xmax - newBounds.xmin;
0
+ var h = newBounds.ymax - newBounds.ymin;
0
+ var rescale = graphics.rescale;
0
+ graphics.rescale += 0.05;
0
+ if (newBounds.xmin < oldBounds.xmin) newBounds.xmin -= rescale * w;
0
+ if (newBounds.ymin < oldBounds.ymin) newBounds.ymin -= rescale * h;
0
+ if (newBounds.xmax > oldBounds.xmax) newBounds.xmax += rescale * w;
0
+ if (newBounds.ymax > oldBounds.ymax) newBounds.ymax += rescale * h;
0
+ w = newBounds.xmax - newBounds.xmin;
0
+ h = newBounds.xmax - newBounds.xmin;
0
+ var ar = w / h;
0
+ var car = graphics.canvas.width / graphics.canvas.height;
0
+ //if (ar > car)
0
+ graphics.setViewport(newBounds);
0
+ graphics.bounds = newBounds;
0
+ drawingContext.queue = [];
0
+ model.randomGenerator.rewind();
0
+ Stats.shapeCount = 0;
0
+ Stats.resetCount += 1;
0
+ model.draw(drawingContext);
0
+ }
0
+ drawingContext.flush(100);
0
+
0
+ var t0 = Stats.startTime,
0
+ t1 = new Date().getTime();
0
+ var msg = "Rendered " + Stats.shapeCount + " shapes in " + Math.round((t1-t0)/1000) + "s.";
0
+ if (drawingContext.queue.length)
0
+ msg += " " + drawingContext.queue.length + " expansions remaining.";
0
+ if (Stats.resetCount) msg += " (Reset bounds " + Stats.resetCount + " time"+(Stats.resetCount==1?'':'s')+".)";
0
+ this.options.onstatus(msg);
0
+
0
+ if (drawingContext.queue.length)
0
+ setTimeout(function() {CFDG.Driver.step()}, 10);
0
+ else
0
+ this.stop();
0
+ },
0
+
0
+ stop: function() {
0
+ if (drawingContext.queue.length)
0
+ this.options.onstatus("<font color='#ff0000'>Stopped rendering</font> at " + Stats.shapeCount + " shapes after " + Math.round(((new Date).getTime() - Stats.startTime)/1000) + "s, with " + drawingContext.queue.length + " expansions remaining.");
0
+
0
+ drawingContext.queue = [];
0
+ drawingContext = null;
0
+ (this.options.onstop||function(){})();
0
+ }
0
+}
0
\ No newline at end of file

Comments

    No one has commented yet.