Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / skia / ffadfb5d43a2b09394b4650829bcfc7329ed2d30 / . / experimental / Intersection / bc.htm
blob: 684f1c0796f3b3a513fb21ee9eda9fc1b4e99a18 [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
42</div>
43
44<script type="text/javascript">
45
46var testDivs = [
47 clip1,
48];
49
50var scale, columns, rows, xStart, yStart;
51
52var ticks = 0.1;
53var at_x = 13 + 0.5;
54var at_y = 13 + 0.5;
55var decimal_places = 0; // make this 3 to show more precision
56
57var tests = [];
58var testTitles = [];
59var testIndex = 0;
60var ctx;
61var fat1 = true;
62var fat2 = false;
63
64function parse(test, title) {
65 var curveStrs = test.split("{{");
66 var pattern = /\$?-?\d+\.*\d*/g;
67 var curves = [];
68 for (var c in curveStrs) {
69 var curveStr = curveStrs[c];
70 var points = curveStr.match(pattern);
71 var pts = [];
72 for (var wd in points) {
73 var num = parseFloat(points[wd]);
74 if (isNaN(num)) continue;
75 pts.push(num);
76 }
77 if (pts.length > 0)
78 curves.push(pts);
79 }
80 if (curves.length == 2) {
81 tests.push(curves);
82 testTitles.push(title);
83 }
84}
85
86function init(test) {
87 var canvas = document.getElementById('canvas');
88 if (!canvas.getContext) return;
89 canvas.width = window.innerWidth - at_x;
90 canvas.height = window.innerHeight - at_y;
91 ctx = canvas.getContext('2d');
92 var xmin = Infinity;
93 var xmax = -Infinity;
94 var ymin = Infinity;
95 var ymax = -Infinity;
96 for (var curves in test) {
97 var curve = test[curves];
98 var last = curve.length;
99 for (var idx = 0; idx < last; idx += 2) {
100 xmin = Math.min(xmin, curve[idx]);
101 xmax = Math.max(xmax, curve[idx]);
102 ymin = Math.min(ymin, curve[idx + 1]);
103 ymax = Math.max(ymax, curve[idx + 1]);
104 }
105 }
106 var subscale = 1;
107 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
108 subscale *= 10;
109 }
110 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
111 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
112 xStart = Math.floor(xmin);
113 yStart = Math.floor(ymin);
114 var hscale = ctx.canvas.width / columns / ticks;
115 var vscale = ctx.canvas.height / rows / ticks;
116 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
117}
118
119function drawPoint(px, py, xoffset, yoffset, unit) {
120 var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
121 var _px = px * unit + xoffset;
122 var _py = py * unit + yoffset;
123 ctx.beginPath();
124 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
125 ctx.closePath();
126 ctx.fill();
127 ctx.fillText(label, _px + 5, _py);
128}
129
130function draw(test, title, _at_x, _at_y, scale) {
131 ctx.fillStyle = "rgba(0,0,0, 0.1)";
132 ctx.font = "normal 50px Arial";
133 ctx.fillText(title, 50, 50);
134 ctx.font = "normal 10px Arial";
135
136 var unit = scale * ticks;
137 ctx.lineWidth = 1;
138 var i;
139 for (i = 0; i <= rows * ticks; ++i) {
140 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
141 ctx.beginPath();
142 ctx.moveTo(_at_x + 0, _at_y + i * scale);
143 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
144 ctx.stroke();
145 }
146 for (i = 0; i <= columns * ticks; ++i) {
147 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
148 ctx.beginPath();
149 ctx.moveTo(_at_x + i * scale, _at_y + 0);
150 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
151 ctx.stroke();
152 }
153
154 var xoffset = xStart * -unit + _at_x;
155 var yoffset = yStart * -unit + _at_y;
156
157 ctx.fillStyle = "rgb(40,80,60)"
158 for (i = 0; i <= columns; i += (1 / ticks))
159 {
160 num = (xoffset - _at_x) / -unit + i;
161 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
162 }
163 for (i = 0; i <= rows; i += (1 / ticks))
164 {
165 num = (yoffset - _at_x) / -unit + i;
166 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
167 }
168
169 // draw curve 1 and 2
170 var curves, pts;
171 for (curves in test) {
172 var curve = test[curves];
173 ctx.beginPath();
174 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
175 switch (curve.length) {
176 case 6:
177 ctx.quadraticCurveTo(
178 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
179 xoffset + curve[4] * unit, yoffset + curve[5] * unit);
180 break;
181 case 8:
182 ctx.bezierCurveTo(
183 xoffset + curve[2] * unit, yoffset + curve[3] * unit,
184 xoffset + curve[4] * unit, yoffset + curve[5] * unit,
185 xoffset + curve[6] * unit, yoffset + curve[7] * unit);
186 break;
187 }
188 if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
189 ctx.stroke();
190 ctx.strokeStyle = "rgba(0,0,0, 0.3)";
191 ctx.beginPath();
192 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
193 ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
194 ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
195 if (curve.length == 8)
196 ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
197 ctx.stroke();
198 }
199 // optionally draw fat lines for cruve
200 if (fat1)
201 drawFat(test[0], xoffset, yoffset, unit);
202 if (fat2)
203 drawFat(test[1], xoffset, yoffset, unit);
204}
205
206function drawFat(curve, xoffset, yoffset, unit) {
207 var last = curve.length - 2;
208 ctx.strokeStyle = "rgba(0,0,0, 0.5)";
209 ctx.beginPath();
210 ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
211 ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
212 ctx.stroke();
213 // draw line parallel to end points through control points
214 var dx = curve[last] - curve[0];
215 var dy = curve[last + 1] - curve[1];
216 drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
217 if (curve.length == 8)
218 drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
219}
220
221function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
222 var x1 = x - dx;
223 var y1 = y - dy;
224 var x2 = x + dx;
225 var y2 = y + dy;
226 ctx.beginPath();
227 ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
228 ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
229 ctx.stroke();
230}
231
232function drawTop() {
233 init(tests[testIndex]);
234 redraw();
235}
236
237function redraw() {
238 ctx.beginPath();
239 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
240 ctx.fillStyle="white";
241 ctx.fill();
242 draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
243}
244
245function doKeyPress(evt) {
246 var char = String.fromCharCode(evt.charCode);
247 switch (char) {
248 case 'f':
249 fat2 ^= true;
250 if (fat2 == false)
251 fat1 ^= true;
252 drawTop();
253 break;
254 case 'N':
255 testIndex += 9;
256 case 'n':
257 if (++testIndex >= tests.length)
258 testIndex = 0;
259 mouseX = Infinity;
260 drawTop();
261 break;
262 case 'P':
263 testIndex -= 9;
264 case 'p':
265 if (--testIndex < 0)
266 testIndex = tests.length - 1;
267 mouseX = Infinity;
268 drawTop();
269 break;
270 }
271}
272
273function handleMouseClick() {
274}
275
276function handleMouseOver() {
277}
278
279function start() {
280 for (i = 0; i < testDivs.length; ++i) {
281 var title = testDivs[i].id.toString();
282 var str = testDivs[i].firstChild.data;
283 parse(str, title);
284 }
285 drawTop();
286 window.addEventListener('keypress', doKeyPress, true);
287 window.onresize = function() {
288 drawTop();
289 }
290}
291
292</script>
293</head>
294
295<body onLoad="start();">
296<canvas id="canvas" width="750" height="500"
297 onmousemove="handleMouseOver()"
298 onclick="handleMouseClick()"
299 ></canvas >
300</body>
301</html>