Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / a461ff0866526bc51dbd4c4f9f066a727ec21510 / . / experimental / Intersection / bc.htm
blob: 15601def03d5c0cc8865423a506d7e7f7d454aaf [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.com6aea33f2012-10-09 14:11:58 +0000[diff] [blame]112<div id="quad37">
113 {{x = 360.048828125, y = 229.2578125}, {x = 360.048828125, y = 224.4140625}, {x = 362.607421875, y = 221.3671875}}
114 {{x = 362.607421875, y = 221.3671875}, {x = 365.166015625, y = 218.3203125}, {x = 369.228515625, y = 218.3203125}}
115</div>
116
caryclark@google.coma461ff02012-10-11 12:54:23 +0000[diff] [blame^]117<div id="quad38">
118$2 = {{fX = 369.969421, fY = 137.94809}, {fX = 383.982849, fY = 121.260353}, {fX = 406.233154, fY = 121.260353}}
119$4 = {{fX = 406.232788, fY = 121.260353}, {fX = 409.441956, fY = 121.260353}, {fX = 412.972046, fY = 121.795212}}
120</div>
121
122<div id="quad39">
123{{x = 406.233154296875, y = 121.26035308837891}, {x = 406.23153587045397, y = 121.26035308837891}, {x = 406.22991748761177, y = 121.26035317666889}},
124{{x = 406.23295158013377, y = 121.26035308872596}, {x = 406.2328698329315, y = 121.26035308837889}, {x = 406.2327880859375, y = 121.26035308837891}},
125</div>
caryclark@google.com6aea33f2012-10-09 14:11:58 +0000[diff] [blame]126
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]127</div>
128
129<script type="text/javascript">
130
131var testDivs = [
caryclark@google.coma461ff02012-10-11 12:54:23 +0000[diff] [blame^]132 quad39,
133 quad38,
caryclark@google.com6aea33f2012-10-09 14:11:58 +0000[diff] [blame]134 quad37,
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]135 quad36,
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]136 quad21g,
137 quad21a,
138 quad21b,
139 quad21c,
140 quad21d,
141 quad21e,
142 quad21f,
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]143 clip1,
144];
145
146var scale, columns, rows, xStart, yStart;
147
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]148var ticks = 10;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]149var at_x = 13 + 0.5;
150var at_y = 13 + 0.5;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]151var init_decimal_places = 1; // make this 3 to show more precision
152var decimal_places;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]153var tests = [];
154var testTitles = [];
155var testIndex = 0;
156var ctx;
157var fat1 = true;
158var fat2 = false;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]159var ctl1 = true;
160var ctl2 = false;
161var ctlPts1 = true;
162var ctlPts2 = false;
163var minScale = 1;
164var subscale = 1;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]165
166function parse(test, title) {
167 var curveStrs = test.split("{{");
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]168 if (curveStrs.length == 1)
169 curveStrs = test.split("=(");
170 var pattern = /[a-z$=]?-?\d+\.*\d*/g;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]171 var curves = [];
172 for (var c in curveStrs) {
173 var curveStr = curveStrs[c];
174 var points = curveStr.match(pattern);
175 var pts = [];
176 for (var wd in points) {
177 var num = parseFloat(points[wd]);
178 if (isNaN(num)) continue;
179 pts.push(num);
180 }
181 if (pts.length > 0)
182 curves.push(pts);
183 }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]184 if (curves.length >= 2) {
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]185 tests.push(curves);
186 testTitles.push(title);
187 }
188}
189
190function init(test) {
191 var canvas = document.getElementById('canvas');
192 if (!canvas.getContext) return;
193 canvas.width = window.innerWidth - at_x;
194 canvas.height = window.innerHeight - at_y;
195 ctx = canvas.getContext('2d');
196 var xmin = Infinity;
197 var xmax = -Infinity;
198 var ymin = Infinity;
199 var ymax = -Infinity;
200 for (var curves in test) {
201 var curve = test[curves];
202 var last = curve.length;
203 for (var idx = 0; idx < last; idx += 2) {
204 xmin = Math.min(xmin, curve[idx]);
205 xmax = Math.max(xmax, curve[idx]);
206 ymin = Math.min(ymin, curve[idx + 1]);
207 ymax = Math.max(ymax, curve[idx + 1]);
208 }
209 }
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]210 subscale = 1;
211 decimal_places = init_decimal_places;
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]212 if (xmax != xmin && ymax != ymin) {
213 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
214 subscale *= 10;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]215 decimal_places += 1;
216 // if (subscale > 100000) {
217 // break;
218 // }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]219 }
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]220 }
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]221 columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1;
222 rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1;
223
224 xStart = Math.floor(xmin * subscale) / subscale;
225 yStart = Math.floor(ymin * subscale) / subscale;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]226 var hscale = ctx.canvas.width / columns / ticks;
227 var vscale = ctx.canvas.height / rows / ticks;
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]228 minScale = Math.floor(Math.min(hscale, vscale));
229 scale = minScale * subscale;
230 // while (columns < 1000 && rows < 1000) {
231 // columns *= 2;
232 // rows *= 2;
233 // }
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]234}
235
236function drawPoint(px, py, xoffset, yoffset, unit) {
237 var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
238 var _px = px * unit + xoffset;
239 var _py = py * unit + yoffset;
240 ctx.beginPath();
241 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
242 ctx.closePath();
243 ctx.fill();
244 ctx.fillText(label, _px + 5, _py);
245}
246
247function draw(test, title, _at_x, _at_y, scale) {
248 ctx.fillStyle = "rgba(0,0,0, 0.1)";
249 ctx.font = "normal 50px Arial";
250 ctx.fillText(title, 50, 50);
251 ctx.font = "normal 10px Arial";
252
253 var unit = scale * ticks;
254 ctx.lineWidth = 1;
255 var i;
256 for (i = 0; i <= rows * ticks; ++i) {
257 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
258 ctx.beginPath();
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]259 ctx.moveTo(_at_x + 0, _at_y + i * minScale);
260 ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]261 ctx.stroke();
262 }
263 for (i = 0; i <= columns * ticks; ++i) {
264 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
265 ctx.beginPath();
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]266 ctx.moveTo(_at_x + i * minScale, _at_y + 0);
267 ctx.lineTo(_at_x + i * minScale, _at_y + unit * rows);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]268 ctx.stroke();
269 }
270
271 var xoffset = xStart * -unit + _at_x;
272 var yoffset = yStart * -unit + _at_y;
273
274 ctx.fillStyle = "rgb(40,80,60)"
275 for (i = 0; i <= columns; i += (1 / ticks))
276 {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]277 num = xStart + i / subscale;
278 ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]279 }
280 for (i = 0; i <= rows; i += (1 / ticks))
281 {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]282 num = yStart + i / subscale;
283 ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]284 }
285
286 // draw curve 1 and 2
287 var curves, pts;
288 for (curves in test) {
289 var curve = test[curves];
290 ctx.beginPath();
291 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
292 switch (curve.length) {
293 case 6:
294 ctx.quadraticCurveTo(
295 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
296 xoffset + curve[4] * unit, yoffset + curve[5] * unit);
297 break;
298 case 8:
299 ctx.bezierCurveTo(
300 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
301 xoffset + curve[4] * unit, yoffset + curve[5] * unit,
302 xoffset + curve[6] * unit, yoffset + curve[7] * unit);
303 break;
304 }
305 if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
306 ctx.stroke();
307 ctx.strokeStyle = "rgba(0,0,0, 0.3)";
308 ctx.beginPath();
309 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
310 ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
311 ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
312 if (curve.length == 8)
313 ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
314 ctx.stroke();
315 }
caryclark@google.com235f56a2012-09-14 14:19:30 +0000[diff] [blame]316 // optionally draw fat lines for curve
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]317 if (fat1)
318 drawFat(test[0], xoffset, yoffset, unit);
319 if (fat2)
320 drawFat(test[1], xoffset, yoffset, unit);
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]321 if (ctl1)
322 drawCtl(test[0], xoffset, yoffset, unit);
323 if (ctl2)
324 drawCtl(test[1], xoffset, yoffset, unit);
325 if (ctlPts1)
326 drawCtlPts(test[0], xoffset, yoffset, unit);
327 if (ctlPts2)
328 drawCtlPts(test[1], xoffset, yoffset, unit);
329}
330
331function drawCtl(curve, xoffset, yoffset, unit) {
332 var last = curve.length - 2;
333 ctx.strokeStyle = "rgba(0,0,0, 0.5)";
334 ctx.beginPath();
335 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
336 ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
337 ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
338 ctx.stroke();
339}
340
341function drawCtlPts(curve, xoffset, yoffset, unit) {
342 drawPoint(curve[0], curve[1], xoffset, yoffset, unit);
343 drawPoint(curve[2], curve[3], xoffset, yoffset, unit);
344 drawPoint(curve[4], curve[5], xoffset, yoffset, unit);
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]345}
346
347function drawFat(curve, xoffset, yoffset, unit) {
348 var last = curve.length - 2;
349 ctx.strokeStyle = "rgba(0,0,0, 0.5)";
350 ctx.beginPath();
351 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
352 ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
353 ctx.stroke();
354 // draw line parallel to end points through control points
355 var dx = curve[last] - curve[0];
356 var dy = curve[last + 1] - curve[1];
357 drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
358 if (curve.length == 8)
359 drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
360}
361
362function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
363 var x1 = x - dx;
364 var y1 = y - dy;
365 var x2 = x + dx;
366 var y2 = y + dy;
367 ctx.beginPath();
368 ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
369 ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
370 ctx.stroke();
371}
372
373function drawTop() {
374 init(tests[testIndex]);
375 redraw();
376}
377
378function redraw() {
379 ctx.beginPath();
380 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
381 ctx.fillStyle="white";
382 ctx.fill();
383 draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
384}
385
386function doKeyPress(evt) {
387 var char = String.fromCharCode(evt.charCode);
388 switch (char) {
caryclark@google.comd1688742012-09-18 20:08:37 +0000[diff] [blame]389 case 'c':
390 ctl2 ^= true;
391 if (ctl2 == false)
392 ctl1 ^= true;
393 drawTop();
394 break;
395 case 'd':
396 ctlPts2 ^= true;
397 if (ctlPts2 == false)
398 ctlPts1 ^= true;
399 drawTop();
400 break;
caryclark@google.coma7e483d2012-08-28 20:44:43 +0000[diff] [blame]401 case 'f':
402 fat2 ^= true;
403 if (fat2 == false)
404 fat1 ^= true;
405 drawTop();
406 break;
407 case 'N':
408 testIndex += 9;
409 case 'n':
410 if (++testIndex >= tests.length)
411 testIndex = 0;
412 mouseX = Infinity;
413 drawTop();
414 break;
415 case 'P':
416 testIndex -= 9;
417 case 'p':
418 if (--testIndex < 0)
419 testIndex = tests.length - 1;
420 mouseX = Infinity;
421 drawTop();
422 break;
423 }
424}
425
426function handleMouseClick() {
427}
428
429function handleMouseOver() {
430}
431
432function start() {
433 for (i = 0; i < testDivs.length; ++i) {
434 var title = testDivs[i].id.toString();
435 var str = testDivs[i].firstChild.data;
436 parse(str, title);
437 }
438 drawTop();
439 window.addEventListener('keypress', doKeyPress, true);
440 window.onresize = function() {
441 drawTop();
442 }
443}
444
445</script>
446</head>
447
448<body onLoad="start();">
449<canvas id="canvas" width="750" height="500"
450 onmousemove="handleMouseOver()"
451 onclick="handleMouseClick()"
452 ></canvas >
453</body>
454</html>