public
Description: A JavaScript implementation of Chris Coyne's Context Free Design Grammar.
Clone URL: git://github.com/osteele/cfdg-js.git
tune up html rescaling
osteele (author)
Mon Feb 06 17:22:28 -0800 2006
commit  96408d19a53279a4677a0ab6201602ecb189278e
tree    47c71482ba4966548eeeb5a91d90e99871326027
parent  deedd718f1623b19da932e010f549e6ff8fc8c1a
...
3
4
5
6
 
7
8
9
...
3
4
5
 
6
7
8
9
0
@@ -3,7 +3,7 @@ require 'openlaszlo_tasks'
0
 
0
 desc "Upload the app to the server"
0
 task :app_deploy => 'cfdg.swf' do
0
- rsync 'cfdg.swf' 'osteele@osteele.com:tree.com/public'
0
+ rsync 'cfdg.swf', 'osteele@osteele.com:tree.com/public'
0
 end
0
 
0
 desc "Sync the server to svn"
...
 
 
1
2
3
4
5
6
7
8
9
10
11
 
12
13
14
...
77
78
79
80
81
82
 
 
 
83
84
85
86
 
87
88
89
90
 
 
 
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
111
112
...
118
119
120
121
122
123
124
125
126
127
 
 
 
128
129
130
131
132
133
 
134
135
136
...
175
176
177
178
 
179
180
181
...
1
2
3
4
5
6
7
8
 
 
9
10
 
11
12
13
14
...
77
78
79
 
 
 
80
81
82
83
84
85
 
86
87
 
 
 
88
89
90
91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
...
122
123
124
 
 
 
 
 
 
 
125
126
127
128
129
130
131
132
 
133
134
135
136
...
175
176
177
 
178
179
180
181
0
@@ -1,14 +1,14 @@
0
+/* Copyright 2006 Oliver Steele. All rights reserved. */
0
+
0
 //var interval_name = setInterval('draw()',100);
0
 //clearInterval('animateShape()',500);
0
 
0
 canvas = document.getElementById("canvas");
0
 var ctx = canvas.getContext("2d");
0
 ctx.save();
0
-//ctx.translate(50, 50);
0
-//ctx.scale(10, 10);
0
 
0
 var Stats;
0
-var State;
0
+var Bounds;
0
 
0
 HalfUnitCircle = new Transform().prescale(.5,.5).
0
   transformPoints(makeCubicCircle());
0
@@ -77,36 +77,40 @@ Graphics.prototype.drawPath = function (pts, isCubic) {
0
       ctx.lineTo(x, y);
0
   }
0
   ctx.fill();
0
- var mins = [State.xmin,State.ymin];
0
- var maxs = [State.xmax,State.ymax];
0
- if (State.xmin == null) {
0
+ var mins = [Bounds.xmin,Bounds.ymin];
0
+ var maxs = [Bounds.xmax,Bounds.ymax];
0
+ if (Bounds.xmin == null) {
0
     mins = [pts[0][0],pts[0][1]];
0
     maxs = [pts[0][0],pts[0][1]];
0
   }
0
- for (var dim in mins)
0
+ for (var d in mins)
0
     for (var i = 0; i < pts.length; i++) {
0
- var x = pts[i][dim];
0
- mins[dim] = Math.min(mins[dim], x);
0
- maxs[dim] = Math.max(maxs[dim], x);
0
+ var x = pts[i][d];
0
+ mins[d] = Math.min(mins[d], x);
0
+ maxs[d] = Math.max(maxs[d], x);
0
     }
0
- if (mins[0] < State.xmin || mins[1] < State.ymin ||
0
- maxs[0] > State.xmax || maxs[1] > State.ymax) {
0
- /*if (mins[0] < State.xmin) info('x ' + mins[0] + ' < ' + State.xmin);
0
- if (mins[1] < State.ymin) info('x ' + mins[1] + ' < ' + State.xmin);
0
- if (maxs[0] > State.xmax) info('x ' + maxs[0] + ' > ' + State.xmax);
0
- if (maxs[1] > State.ymax) info('x ' + maxs[1] + ' > ' + State.ymax);*/
0
- var xmin = mins[0], ymin = mins[1], xmax = maxs[0], ymax = maxs[1];
0
- var dx = xmax - xmin, dy = ymax - ymin;
0
- var firstTime = State.xmin == null;
0
- this.rescale = this.rescale || .33;
0
- var rs = this.rescale *= 1.1;
0
- if (firstTime || xmin < State.xmin) State.xmin = xmin - dx*rs;
0
- if (firstTime || ymin < State.ymin) State.ymin = ymin - dy*rs;
0
- if (firstTime || xmax > State.xmax) State.xmax = xmax + dx*rs;
0
- if (firstTime || ymax > State.ymax) State.ymax = ymax + dy*rs;
0
- if (State.xmin < State.xmax && State.ymin < State.ymax)
0
- rescaleFlag = true;
0
- }
0
+ expandBounds(mins[0], mins[1], maxs[0], maxs[1]);
0
+};
0
+
0
+function expandBounds(x0_, y0_, x1_, y1_) {
0
+ var x0 = Bounds.xmin, y0 = Bounds.ymin, x1 = Bounds.xmax, y1 = Bounds.ymax;
0
+ x0 = Math.min(x0, x0_);
0
+ y0 = Math.min(y0, y0_);
0
+ x1 = Math.max(x1, x1_);
0
+ y1 = Math.max(y1, y1_);
0
+ if (x0 != Bounds.xmin || y0 != Bounds.ymin ||
0
+ x1 != Bounds.xmax || y1 != Bounds.ymax) {
0
+ var rescale = .10; //this.rescale = this.rescale || .33;
0
+ if (x0 < Bounds.xmin)
0
+ x0 -= rescale * (Bounds.xmax - Bounds.xmin);
0
+ if (Bounds.xmax < x1)
0
+ x1 += rescale * (Bounds.xmax - Bounds.xmin);
0
+ if (y0 < Bounds.xmin)
0
+ y0 -= rescale * (Bounds.ymax - Bounds.ymin);
0
+ if (Bounds.xmax < y1)
0
+ y1 += rescale * (Bounds.ymax - Bounds.ymin);
0
+ Bounds = {xmin: x0, ymin: y0, xmax: x1, ymax: y1, rescale: true};
0
+ }
0
 };
0
 
0
 Graphics.prototype.setRGBA = function (rgba) {
0
@@ -118,19 +122,15 @@ Graphics.prototype.setRGBA = function (rgba) {
0
 };
0
 
0
 function drawNext() {
0
- if (rescaleFlag) {
0
- //info("scale to " + State.xmin + ", " + State.ymin + ", " + State.xmax + ", " + State.ymax);
0
- var s = .25*(State.xmax-State.xmin);
0
- //State.xmin -= s; State.xmax += s;
0
- var s = .25*(State.ymax-State.ymin);
0
- //State.ymin -= s; State.ymax += s;
0
- cxt.graphics.viewport(State.xmin, State.ymin, State.xmax, State.ymax);
0
+ if (Bounds.rescale) {
0
+ //info("scale to " + Bounds.xmin + ", " + Bounds.ymin + ", " + Bounds.xmax + ", " + Bounds.ymax);
0
+ cxt.graphics.viewport(Bounds.xmin, Bounds.ymin, Bounds.xmax, Bounds.ymax);
0
     cxt.queue = [];
0
     model.randomGenerator.rewind();
0
     model.draw(cxt);
0
     Stats.shapeCount = 0;
0
     Stats.resetCount += 1;
0
- rescaleFlag = false;
0
+ Bounds.rescale = false;
0
   }
0
   cxt.flush(100);
0
   
0
@@ -175,7 +175,7 @@ function doRender() {
0
   //tm[1][1] *= -1;
0
   //cxt.stats.cutoff *= Math.abs(tm[0][0] * tm[1][1]);
0
   //cxt.stats.cutoff /= 100;
0
- State = {xmin: null, xmax: null, ymin: null, ymax: null};
0
+ Bounds = {xmin: null, xmax: null, ymin: null, ymax: null};
0
   Stats = {startTime: (new Date).getTime(),
0
        shapeCount: 0, resetCount: 0};
0
   var canvas = document.getElementById("canvas");
...
1
 
2
3
4
...
 
1
2
3
4
0
@@ -1,4 +1,4 @@
0
-/* Copyright 2005-2006 Oliver Steele. All rights reserved. */
0
+/* Copyright 2006 Oliver Steele. All rights reserved. */
0
 
0
 var Context = function (model) {
0
   this.model = model;
...
1
 
2
3
4
...
 
1
2
3
4
0
@@ -1,4 +1,4 @@
0
-/* Copyright 2005-2006 Oliver Steele. All rights reserved. */
0
+/* Copyright 2006 Oliver Steele. All rights reserved. */
0
 
0
 function Graphics() {}
0
 
...
1
 
2
3
4
...
 
1
2
3
4
0
@@ -1,4 +1,4 @@
0
-/* Copyright 2005-2006 Oliver Steele. All rights reserved. */
0
+/* Copyright 2006 Oliver Steele. All rights reserved. */
0
 
0
 // translate rotate scale skew reflect
0
 var ATTRIBUTE_NAMES = 'x y rotate size sx sy skew flip hue sat brightness alpha'.split(' ');
...
1
 
2
3
4
...
 
1
2
3
4
0
@@ -1,4 +1,4 @@
0
-/* Copyright 2005-2006 Oliver Steele. All rights reserved. */
0
+/* Copyright 2006 Oliver Steele. All rights reserved. */
0
 
0
 var EOF = -1;
0
 var PUNCTUATION = "()[]{}|;";

Comments

    No one has commented yet.