Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / d1688744d537d928699b6069f99c4470a0f6e772 / . / experimental / Intersection / bc.htm
blob: 95a8d754ab0638149dc9f7b14e6f5a5000c5e11f [file] [log] [blame]
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]1<!-- bezier clip visualizer -->
2<html>
3<head>
4<div style="height:0">
5
6<div id="clip1">
7(gdb) p smaller
8$2 = {{
9 x = 0.91292418204644155,
10 y = 0.41931201426549197
11 }, {
12 x = 0.70491388044579517,
13 y = 0.64754305977710236
14 }, {
15 x = 0,
16 y = 1
17 }}
18(gdb) p larger
19$3 = {{
20 x = 0.21875,
21 y = 0.765625
22 }, {
23 x = 0.125,
24 y = 0.875
25 }, {
26 x = 0,
27 y = 1
28 }}
29(gdb) p distance2y
30$1 = {{
31 x = 0,
32 y = 0.080355482722450078
33 }, {
34 x = 0.5,
35 y = 0.038383741101172597
36 }, {
37 x = 1,
38 y = 0
39 }}
40</div>
41
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]42<div id="quad21a">
43bezier_clip q1=(0,0 1,0 0,2) q2=(0.5,0.25 0.5,0.5 0,1) minT=0 maxT=1
44</div>
45<div id="quad21b">
46bezier_clip q1=(0.5,0.25 0.5,0.375 0.375,0.5625) q2=(0,0 1,0 0,2) minT=0.3 maxT=0.78125
47</div>
48<div id="quad21c">
49bezier_clip q1=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) q2=(0.5,0.25 0.5,0.375 0.375,0.5625) minT=0 maxT=0.926710098
50</div>
51<div id="quad21d">
52bezier_clip q1=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) q2=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) minT=0.187231244 maxT=0.729263299
53</div>
54<div id="quad21e">
55bezier_clip q1=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) q2=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) minT=0 maxT=1
56</div>
57<div id="quad21f">
58bezier_clip q1=(0.493290691,0.311274036 0.486581381,0.343588381 0.473162762,0.379257381) q2=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) minT=0.0828748517 maxT=0.150086861
59</div>
60
61<div id="quad21g">
62(gdb) p smaller
63$1 = {{
64 x = 0.48441440743366754,
65 y = 0.33903196011243797
66 }, {
67 x = 0.48750982503868118,
68 y = 0.35346899178071778
69 }, {
70 x = 0.48999046908865357,
71 y = 0.368520797004039
72 }}
73(gdb) p larger
74$2 = {{
75 x = 0.49329069058425024,
76 y = 0.31127403581536672
77 }, {
78 x = 0.48658138116850047,
79 y = 0.34358838107698753
80 }, {
81 x = 0.47316276233700094,
82 y = 0.37925738104648321
83 }}
84</div>
85
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]86<div id="quad36">
87(gdb) p fQ
88$2 = {{
89 x = 1.8883839294261275,
90 y = 2.1108590606904345
91 }, {
92 x = 1.888463903363252,
93 y = 2.1111576060205435
94 }, {
95 x = 1.8885438199983176,
96 y = 2.1114561800016824
97 }}
98(gdb) p rh.fQ
99$3 = {{
100 x = 1.8883839294260976,
101 y = 2.1108590606903377
102 }, {
103 x = 1.8886366953645748,
104 y = 2.1109850143489544
105 }, {
106 x = 1.8888888888888888,
107 y = 2.1111111111111112
108 }}
109(gdb)
110</div>
111
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]112</div>
113
114<script type="text/javascript">
115
116var testDivs = [
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]117 quad36,
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]118 quad21g,
119 quad21a,
120 quad21b,
121 quad21c,
122 quad21d,
123 quad21e,
124 quad21f,
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]125 clip1,
126];
127
128var scale, columns, rows, xStart, yStart;
129
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]130var ticks = 10;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]131var at_x = 13 + 0.5;
132var at_y = 13 + 0.5;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]133var init_decimal_places = 1; // make this 3 to show more precision
134var decimal_places;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]135var tests = [];
136var testTitles = [];
137var testIndex = 0;
138var ctx;
139var fat1 = true;
140var fat2 = false;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]141var ctl1 = true;
142var ctl2 = false;
143var ctlPts1 = true;
144var ctlPts2 = false;
145var minScale = 1;
146var subscale = 1;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]147
148function parse(test, title) {
149 var curveStrs = test.split("{{");
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]150 if (curveStrs.length == 1)
151 curveStrs = test.split("=(");
152 var pattern = /[a-z$=]?-?\d+\.*\d*/g;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]153 var curves = [];
154 for (var c in curveStrs) {
155 var curveStr = curveStrs[c];
156 var points = curveStr.match(pattern);
157 var pts = [];
158 for (var wd in points) {
159 var num = parseFloat(points[wd]);
160 if (isNaN(num)) continue;
161 pts.push(num);
162 }
163 if (pts.length > 0)
164 curves.push(pts);
165 }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]166 if (curves.length >= 2) {
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]167 tests.push(curves);
168 testTitles.push(title);
169 }
170}
171
172function init(test) {
173 var canvas = document.getElementById('canvas');
174 if (!canvas.getContext) return;
175 canvas.width = window.innerWidth - at_x;
176 canvas.height = window.innerHeight - at_y;
177 ctx = canvas.getContext('2d');
178 var xmin = Infinity;
179 var xmax = -Infinity;
180 var ymin = Infinity;
181 var ymax = -Infinity;
182 for (var curves in test) {
183 var curve = test[curves];
184 var last = curve.length;
185 for (var idx = 0; idx < last; idx += 2) {
186 xmin = Math.min(xmin, curve[idx]);
187 xmax = Math.max(xmax, curve[idx]);
188 ymin = Math.min(ymin, curve[idx + 1]);
189 ymax = Math.max(ymax, curve[idx + 1]);
190 }
191 }
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]192 subscale = 1;
193 decimal_places = init_decimal_places;
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]194 if (xmax != xmin && ymax != ymin) {
195 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
196 subscale *= 10;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]197 decimal_places += 1;
198 // if (subscale > 100000) {
199 // break;
200 // }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]201 }
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]202 }
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]203 columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1;
204 rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1;
205
206 xStart = Math.floor(xmin * subscale) / subscale;
207 yStart = Math.floor(ymin * subscale) / subscale;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]208 var hscale = ctx.canvas.width / columns / ticks;
209 var vscale = ctx.canvas.height / rows / ticks;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]210 minScale = Math.floor(Math.min(hscale, vscale));
211 scale = minScale * subscale;
212 // while (columns < 1000 && rows < 1000) {
213 // columns *= 2;
214 // rows *= 2;
215 // }
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]216}
217
218function drawPoint(px, py, xoffset, yoffset, unit) {
219 var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
220 var _px = px * unit + xoffset;
221 var _py = py * unit + yoffset;
222 ctx.beginPath();
223 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
224 ctx.closePath();
225 ctx.fill();
226 ctx.fillText(label, _px + 5, _py);
227}
228
229function draw(test, title, _at_x, _at_y, scale) {
230 ctx.fillStyle = "rgba(0,0,0, 0.1)";
231 ctx.font = "normal 50px Arial";
232 ctx.fillText(title, 50, 50);
233 ctx.font = "normal 10px Arial";
234
235 var unit = scale * ticks;
236 ctx.lineWidth = 1;
237 var i;
238 for (i = 0; i <= rows * ticks; ++i) {
239 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
240 ctx.beginPath();
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]241 ctx.moveTo(_at_x + 0, _at_y + i * minScale);
242 ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]243 ctx.stroke();
244 }
245 for (i = 0; i <= columns * ticks; ++i) {
246 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
247 ctx.beginPath();
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]248 ctx.moveTo(_at_x + i * minScale, _at_y + 0);
249 ctx.lineTo(_at_x + i * minScale, _at_y + unit * rows);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]250 ctx.stroke();
251 }
252
253 var xoffset = xStart * -unit + _at_x;
254 var yoffset = yStart * -unit + _at_y;
255
256 ctx.fillStyle = "rgb(40,80,60)"
257 for (i = 0; i <= columns; i += (1 / ticks))
258 {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]259 num = xStart + i / subscale;
260 ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]261 }
262 for (i = 0; i <= rows; i += (1 / ticks))
263 {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]264 num = yStart + i / subscale;
265 ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]266 }
267
268 // draw curve 1 and 2
269 var curves, pts;
270 for (curves in test) {
271 var curve = test[curves];
272 ctx.beginPath();
273 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
274 switch (curve.length) {
275 case 6:
276 ctx.quadraticCurveTo(
277 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
278 xoffset + curve[4] * unit, yoffset + curve[5] * unit);
279 break;
280 case 8:
281 ctx.bezierCurveTo(
282 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
283 xoffset + curve[4] * unit, yoffset + curve[5] * unit,
284 xoffset + curve[6] * unit, yoffset + curve[7] * unit);
285 break;
286 }
287 if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
288 ctx.stroke();
289 ctx.strokeStyle = "rgba(0,0,0, 0.3)";
290 ctx.beginPath();
291 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
292 ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
293 ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
294 if (curve.length == 8)
295 ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
296 ctx.stroke();
297 }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]298 // optionally draw fat lines for curve
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]299 if (fat1)
300 drawFat(test[0], xoffset, yoffset, unit);
301 if (fat2)
302 drawFat(test[1], xoffset, yoffset, unit);
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]303 if (ctl1)
304 drawCtl(test[0], xoffset, yoffset, unit);
305 if (ctl2)
306 drawCtl(test[1], xoffset, yoffset, unit);
307 if (ctlPts1)
308 drawCtlPts(test[0], xoffset, yoffset, unit);
309 if (ctlPts2)
310 drawCtlPts(test[1], xoffset, yoffset, unit);
311}
312
313function drawCtl(curve, xoffset, yoffset, unit) {
314 var last = curve.length - 2;
315 ctx.strokeStyle = "rgba(0,0,0, 0.5)";
316 ctx.beginPath();
317 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
318 ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
319 ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
320 ctx.stroke();
321}
322
323function drawCtlPts(curve, xoffset, yoffset, unit) {
324 drawPoint(curve[0], curve[1], xoffset, yoffset, unit);
325 drawPoint(curve[2], curve[3], xoffset, yoffset, unit);
326 drawPoint(curve[4], curve[5], xoffset, yoffset, unit);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]327}
328
329function drawFat(curve, xoffset, yoffset, unit) {
330 var last = curve.length - 2;
331 ctx.strokeStyle = "rgba(0,0,0, 0.5)";
332 ctx.beginPath();
333 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
334 ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
335 ctx.stroke();
336 // draw line parallel to end points through control points
337 var dx = curve[last] - curve[0];
338 var dy = curve[last + 1] - curve[1];
339 drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
340 if (curve.length == 8)
341 drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
342}
343
344function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
345 var x1 = x - dx;
346 var y1 = y - dy;
347 var x2 = x + dx;
348 var y2 = y + dy;
349 ctx.beginPath();
350 ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
351 ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
352 ctx.stroke();
353}
354
355function drawTop() {
356 init(tests[testIndex]);
357 redraw();
358}
359
360function redraw() {
361 ctx.beginPath();
362 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
363 ctx.fillStyle="white";
364 ctx.fill();
365 draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
366}
367
368function doKeyPress(evt) {
369 var char = String.fromCharCode(evt.charCode);
370 switch (char) {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame^]371 case 'c':
372 ctl2 ^= true;
373 if (ctl2 == false)
374 ctl1 ^= true;
375 drawTop();
376 break;
377 case 'd':
378 ctlPts2 ^= true;
379 if (ctlPts2 == false)
380 ctlPts1 ^= true;
381 drawTop();
382 break;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]383 case 'f':
384 fat2 ^= true;
385 if (fat2 == false)
386 fat1 ^= true;
387 drawTop();
388 break;
389 case 'N':
390 testIndex += 9;
391 case 'n':
392 if (++testIndex >= tests.length)
393 testIndex = 0;
394 mouseX = Infinity;
395 drawTop();
396 break;
397 case 'P':
398 testIndex -= 9;
399 case 'p':
400 if (--testIndex < 0)
401 testIndex = tests.length - 1;
402 mouseX = Infinity;
403 drawTop();
404 break;
405 }
406}
407
408function handleMouseClick() {
409}
410
411function handleMouseOver() {
412}
413
414function start() {
415 for (i = 0; i < testDivs.length; ++i) {
416 var title = testDivs[i].id.toString();
417 var str = testDivs[i].firstChild.data;
418 parse(str, title);
419 }
420 drawTop();
421 window.addEventListener('keypress', doKeyPress, true);
422 window.onresize = function() {
423 drawTop();
424 }
425}
426
427</script>
428</head>
429
430<body onLoad="start();">
431<canvas id="canvas" width="750" height="500"
432 onmousemove="handleMouseOver()"
433 onclick="handleMouseClick()"
434 ></canvas >
435</body>
436</html>