git @ Cat's Eye Technologies HTML5-Gewgaws / 093fa1c
Partly solved. Chris Pressey 7 years ago
1 changed file(s) with 85 addition(s) and 103 deletion(s). Raw diff Collapse all Expand all
+85
-103
bezier-knots/bezier-knots.js less more
6161
6262 var QUADRANT = Math.PI / 2;
6363 var TWO_PI = Math.PI * 2;
64 var DEGREE = TWO_PI / 360.0;
65
66
67 Segment = function() {
68 this.init = function(cx, cy, radius, angle1, angle2) {
69 this.cx = cx;
70 this.cy = cy;
71 this.radius = radius;
72 this.angle1 = angle1;
73 this.angle2 = angle2;
74 return this;
75 }
76
77 this.getLine = function(tweak) {
78 var angle1 = this.angle1 + tweak;
79 var angle2 = this.angle2 + tweak;
80 var x1 = this.cx + Math.cos(angle1) * this.radius;
81 var y1 = this.cy + Math.sin(angle1) * this.radius;
82 var x2 = this.cx + Math.cos(angle2) * this.radius;
83 var y2 = this.cy + Math.sin(angle2) * this.radius;
84 return [[x1, y1], [x2, y2]];
85 };
86
87 this.drawConnectTo = function(ctx, nextSegment) {
88 var l1 = this.getLine(DEGREE * -0.5);
89 var l2 = nextSegment.getLine(DEGREE * 0.5);
90
91 // the arguments represent 2 lines, (x1,y1)-(x2,y2) and (x3,y3)-(x4,y4)
92
93 var x1 = l1[0][0];
94 var y1 = l1[0][1];
95
96 var x2 = l1[1][0];
97 var y2 = l1[1][1];
98
99 var x3 = l2[0][0];
100 var y3 = l2[0][1];
101
102 var x4 = l2[1][0];
103 var y4 = l2[1][1];
104
105 // find their midpoints:
106 var xm1 = (x1 + x2) * 0.50;
107 var ym1 = (y1 + y2) * 0.50;
108
109 var xm2 = (x3 + x4) * 0.50;
110 var ym2 = (y3 + y4) * 0.50;
111
112 ctx.moveTo(xm1, ym1);
113 ctx.bezierCurveTo(
114 x2, y2,
115 x3, y3,
116 xm2, ym2
117 );
118 };
119 };
120
64121
65122 BezierKnots = function() {
66123 this.init = function(cfg) {
82139 this.draw();
83140 };
84141
85 /* Utilities */
86
87142 this.shuffled = function(a) {
88143 var b = [];
89144 while (a.length > 0) {
92147 return b;
93148 };
94149
95 this.pathSegment = function(ctx, cx, cy, r1, r2, th1, th2) {
96 ctx.arc(cx, cy, r1, th1, th2, false);
97 ctx.arc(cx, cy, r2, th2, th1, true);
98 };
99
100 this.fillSegment = function(ctx, cx, cy, r1, r2, th1, th2) {
101 ctx.beginPath();
102 this.pathSegment(ctx, cx, cy, r1, r2, th1, th2);
103 ctx.fill();
104 };
105
106 this.setFillColour = function(r, g, b) {
107 this.ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
108 };
109
110 this.setFillHSL = function(h, s, l) {
111 if (l === -1) {
112 l = 0.5 + (Math.random() - 0.5) * this.scale;
113 }
114 h = Math.floor(h) % 360;
115 s = '' + (s * 100) + '%';
116 l = '' + (l * 100) + '%';
117 this.ctx.fillStyle = 'hsl(' + h + ',' + s + ',' + l + ')';
118 };
119
120 this.bezierConnect = function(x1, y1, x2, y2, x3, y3, x4, y4) {
121 // the arguments represent 2 lines, (x1,y1)-(x2,y2) and (x3,y3)-(x4,y4)
122
123 // find their midpoints:
124 var xm1 = (x1 + x2) / 2;
125 var ym1 = (y1 + y2) / 2;
126
127 var xm2 = (x3 + x4) / 2;
128 var ym2 = (y3 + y4) / 2;
129
130 this.ctx.moveTo(xm1, ym1);
131 this.ctx.bezierCurveTo(
132 x2, y2,
133 x3, y3,
134 xm2, ym2);
135 };
136
137 this.bezierConnectLines = function(l1, l2) {
138 // the arguments represent 2 lines, (x1,y1)-(x2,y2) and (x3,y3)-(x4,y4)
139
140 var x1 = l1[0][0];
141 var y1 = l1[0][1];
142
143 var x2 = l1[1][0];
144 var y2 = l1[1][1];
145
146 var x3 = l2[0][0];
147 var y3 = l2[0][1];
148
149 var x4 = l2[1][0];
150 var y4 = l2[1][1];
151
152 this.bezierConnect(x1, y1, x2, y2, x3, y3, x4, y4);
153 };
154
155 this.createRandomLine = function() {
156 var x1 = Math.floor(Math.random() * this.canvas.width);
157 var y1 = Math.floor(Math.random() * this.canvas.height);
158 var x2 = Math.floor(Math.random() * this.canvas.width);
159 var y2 = Math.floor(Math.random() * this.canvas.height);
160 return [[x1, y1], [x2, y2]];
161 };
162
163 this.createLine = function(cx, cy, radius, angle1, angle2) {
164 var x1 = cx + Math.cos(angle1) * radius;
165 var y1 = cy + Math.sin(angle1) * radius;
166 var x2 = cx + Math.cos(angle2) * radius;
167 var y2 = cy + Math.sin(angle2) * radius;
168 return [[x1, y1], [x2, y2]];
169 };
170
171 this.createLineSets = function(cx, cy, numSides, numRadii) {
150 this.createSegmentSets = function(cx, cy, numSides, numRadii) {
172151 var sets = [];
173152
174153 for (var i = 0; i < numSides; i++) {
175 var lines = [];
154 var segments = [];
176155
177156 for (var pos = 0; pos < numRadii; pos++) {
178157 radius = (cx / numRadii) * (pos + 1);
179 lines.push(this.createLine(
158
159 segments.push((new Segment()).init(
180160 cx, cy, radius,
181161 (i / numSides) * TWO_PI - Math.PI/2,
182162 ((i + 1) / numSides) * TWO_PI - Math.PI/2
183163 ));
184 }
185
186 sets.push(lines);
164
165 }
166
167 sets.push(segments);
187168 }
188169
189170 // Now shuffle the sets.
198179 var cx = this.canvas.width / 2;
199180 var cy = this.canvas.height / 2;
200181
201 var lineSets = this.createLineSets(cx, cy, this.numSides, this.numRadii);
182 var segmentSets = this.createSegmentSets(cx, cy, this.numSides, this.numRadii);
202183
203184 var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'orange'];
204185
205 for (var j = 0; j < lineSets.length; j++) {
186 var minJ = 0;
187 var maxJ = segmentSets.length - 1;
188 //minJ = 5; maxJ = 5;
189 for (var j = minJ; j <= maxJ; j++) {
190 var segmentSet = segmentSets[j];
206191
207192 // shuffle the indexes so we don't always draw the same colours over other colours
208193 var indexes = [];
209 for (var i = 0; i < lineSets[j].length; i++) {
194 for (var i = 0; i < segmentSet.length; i++) {
210195 indexes.push(i);
211196 }
212197 indexes = this.shuffled(indexes);
213198
214 for (var n = 0; n < lineSets[j].length; n++) {
199 for (var n = 0; n < segmentSet.length; n++) {
215200
216201 i = indexes[n];
217202
218 var l1 = lineSets[j][i];
219 var l2;
220
221 if (j + 1 >= lineSets.length) {
222 l2 = lineSets[0][i];
223 } else {
224 l2 = lineSets[j+1][i];
203 var segment = segmentSets[j][i];
204 var nextSegment = segmentSets[(j+1) % segmentSets.length][i];
205
206 drawBg = false;
207 if (drawBg) {
208 this.ctx.strokeStyle = 'black';
209 this.ctx.lineWidth = this.lineWidth + 3;
210
211 this.ctx.beginPath();
212 segment.drawConnectTo(this.ctx, nextSegment);
213 this.ctx.stroke();
225214 }
226
227 this.ctx.strokeStyle = 'black';
228 this.ctx.lineWidth = this.lineWidth + 3;
229
230 this.ctx.beginPath();
231 this.bezierConnectLines(l1, l2);
232 this.ctx.stroke();
233215
234216 this.ctx.strokeStyle = colours[i % colours.length];
235217 this.ctx.lineWidth = this.lineWidth;
236218
237219 this.ctx.beginPath();
238 this.bezierConnectLines(l1, l2);
220 segment.drawConnectTo(this.ctx, nextSegment);
239221 this.ctx.stroke();
240222 }
241223 }