2f:T87c,{ const surface = d3.create('svg') .attr('width', img.width) .attr('height', img.height) .style('border', '1px solid black') .style('touch-action', 'none') .style('transform-origin', '0px 0px 0px') const img_plane = d3.create('svg') .attr('width', img.width) .attr('height', img.height) .style('border', '1px solid black') .style('touch-action', 'none') .style('transform-origin', '0px 0px 0px') const image = surface.append("image") //.attr("xlink:href", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Chess_Board.svg/600px-Chess_Board.svg.png") .attr("xlink:href", dataurl)//"http://jdh.hamkins.org/wp-content/uploads/2018/08/15-final-chessboard-1.jpg") .attr("width", img.width) .attr("height", img.height); const make_draggable = ({element, update_position}) => { let start = null let i = 0 element.call(d3.drag() .on('start', () => null) .on('drag', () => { const curr = {x: d3.event.x, y: d3.event.y} start = i > 1 ? start : curr const dx = curr.x - start.x const dy = curr.y - start.y mutable log = {dy} update_position({dx, dy}) i++ }) .on('end', () => (start = null, i = 0))) } const add_circle = ({x, y}) => surface.append('circle') .attr('r', 20) .attr('cx', x) .attr('cy', y) .attr('stroke', 'gray') .attr('stroke-width', 2.5) .attr('fill', 'transparent') surface.append('path').datum(state.centers).attr('stroke', 'black').attr('fill', 'none').attr('d', d3.line().x(d => d.x).y(d => d.y).curve(d3.curveLinearClosed)) state.centers.map((c, i) => make_draggable({ element: add_circle(c), update_position: ({dx, dy}) => { mutable state = produce(state, state => {state.centers[i] = {x: c.x + dx, y: c.y + dy}}) } })) const sourcePoints = [[0, 0], [img.width, 0], [img.width, img.height], [0, img.height]] const targetPoints = state.centers.map(({x, y}) => [x, y]) const matrix = get_matrix(sourcePoints, targetPoints) img_plane.style('transform', "matrix3d(" + matrix + ")") return surface.node() }30:T6cf,output = () => { const margin = {left: 0, top: 0} const svg = d3.create('svg') .attr('width', img.width) // doesn't work .attr('height', img.height) .attr('viewBox', `0 0 ${img.width} ${img.height}`) // doesn't work .style(`transform-origin`, `${margin.left}px ${margin.top}px 0px`) .style('overflow', 'hidden') .attr('overflow', 'hidden') const img_plane = svg.append('g') /*.attr('width', '100%') // doesn't work .attr('height', '100%')*/ .style(`transform-origin`, `${margin.left}px ${margin.top}px 0px`) .style('overflow', 'hidden !important') // doesn't work. .attr('overflow', 'hidden') // Doesn't work. const clipper = svg.append('g').append('clipPath').attr('id', 'clipper').append('rect').attr('x', 0).attr('y', 0).attr('width', img.width).attr('height', img.height).style('overflow', 'hidden !important') .attr('overflow', 'hidden') const image = img_plane.append("image") //.attr("xlink:href", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Chess_Board.svg/600px-Chess_Board.svg.png") .attr("xlink:href", dataurl)//"http://jdh.hamkins.org/wp-content/uploads/2018/08/15-final-chessboard-1.jpg") .attr('clip-path', 'url(#clipper)') // doesn't work .attr("width", img.width) .attr("height", img.height) .attr('transform', "translate(" + margin.left + "," + margin.top + ")") .style('overflow', 'hidden !important') //doesn't work .attr('overflow', 'hidden') const sourcePoints = state.centers.map(({x, y}) => [x, y]) const targetPoints = [[0, 0], [500, 0], [500, 500], [0, 500]] const matrix = get_matrix(sourcePoints, targetPoints) svg.style('transform', "matrix3d(" + matrix + ")") return svg.node() }31:T8e8,solve = { var abs = Math.abs; function _foreach2(x, s, k, f) { if (k === s.length - 1) return f(x); var i, n = s[k], ret = Array(n); for (i = n - 1; i >= 0; --i) ret[i] = _foreach2(x[i], s, k + 1, f); return ret; } function _dim(x) { var ret = []; while (typeof x === "object") ret.push(x.length), x = x[0]; return ret; } function dim(x) { var y, z; if (typeof x === "object") { y = x[0]; if (typeof y === "object") { z = y[0]; if (typeof z === "object") { return _dim(x); } return [x.length, y.length]; } return [x.length]; } return []; } function cloneV(x) { var _n = x.length, i, ret = Array(_n); for (i = _n - 1; i !== -1; --i) ret[i] = x[i]; return ret; } function clone(x) { return typeof x !== "object" ? x : _foreach2(x, dim(x), 0, cloneV); } function LU(A, fast) { fast = fast || false; var i, j, k, absAjk, Akk, Ak, Pk, Ai, max, n = A.length, n1 = n - 1, P = new Array(n); if (!fast) A = clone(A); for (k = 0; k < n; ++k) { Pk = k; Ak = A[k]; max = abs(Ak[k]); for (j = k + 1; j < n; ++j) { absAjk = abs(A[j][k]); if (max < absAjk) { max = absAjk; Pk = j; } } P[k] = Pk; if (Pk != k) { A[k] = A[Pk]; A[Pk] = Ak; Ak = A[k]; } Akk = Ak[k]; for (i = k + 1; i < n; ++i) { A[i][k] /= Akk; } for (i = k + 1; i < n; ++i) { Ai = A[i]; for (j = k + 1; j < n1; ++j) { Ai[j] -= Ai[k] * Ak[j]; ++j; Ai[j] -= Ai[k] * Ak[j]; } if (j===n1) Ai[j] -= Ai[k] * Ak[j]; } } return { LU: A, P: P }; } function LUsolve(LUP, b) { var i, j, LU = LUP.LU, n = LU.length, x = clone(b), P = LUP.P, Pi, LUi, tmp; for (i = n - 1; i !== -1; --i) x[i] = b[i]; for (i = 0; i < n; ++i) { Pi = P[i]; if (P[i] !== i) tmp = x[i], x[i] = x[Pi], x[Pi] = tmp; LUi = LU[i]; for (j = 0; j < i; ++j) { x[i] -= x[j] * LUi[j]; } } for (i = n - 1; i >= 0; --i) { LUi = LU[i]; for (j = i + 1; j < n; ++j) { x[i] -= x[j] * LUi[j]; } x[i] /= LUi[i]; } return x; } return function(A, b, fast) { return LUsolve(LU(A, fast), b); }; }32:[{"id":"179ff35291b306213840cfce0e53f2605ccb2257c15391f3002a55805a06f62452675a1753776b05f17b12c88e9587c03ce74e6b195fb6d602fdc09c68c540fd","href":"https://static.observableusercontent.com/files/179ff35291b306213840cfce0e53f2605ccb2257c15391f3002a55805a06f62452675a1753776b05f17b12c88e9587c03ce74e6b195fb6d602fdc09c68c540fd","name":"Screenshot 2023-04-23 212158.png","type":"image/png","lastModified":1701485806922.14,"size":6620701}] 2d:{"title":"Perspective transform proof-of-concept","cells":[{"id":0,"value":"md`# Perspective transform proof-of-concept`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`Some amount of this is borrowed from https://bl.ocks.org/mbostock/10571478`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"img = FileAttachment(\"Screenshot 2023-04-23 212158.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`Drag the circles on the bordered image below to the corners of the chessboard. (Requires Chrome.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"html`${output()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"dataurl = {\n // Step 1: Get the image\nvar image = img\n\n// Step 2: Create a canvas\nvar canvas = document.createElement('canvas');\ncanvas.width = image.width;\ncanvas.height = image.height;\n\n// Step 3: Draw the image on the canvas\nvar ctx = canvas.getContext('2d');\nctx.drawImage(image, 0, 0);\n\n// Step 4: Convert the canvas to a data URL\nreturn canvas.toDataURL('image/png');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"mutable log = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"async function svg_to_png (svg) {\n var svgString = new XMLSerializer().serializeToString(svg);\n\nvar canvas = html`

`;\nvar ctx = canvas.getContext(\"2d\");\nvar DOMURL = self.URL || self.webkitURL || self;\nvar img = new Image();\nvar svg = new Blob([svgString], {type: \"image/svg+xml;charset=utf-8\"});\nvar url = DOMURL.createObjectURL(svg);\nconst p = new Promise(resolve => \n img.onload = function() {\n ctx.drawImage(img, 0, 0);\n var png = canvas.toDataURL(\"image/png\");\n resolve(png)//html`

`)\n DOMURL.revokeObjectURL(png);\n})\nimg.src = url;\n return await p\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"produce = (await require('immer@9.0.5/dist/immer.umd.production.min.js')).produce","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5.0.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"mutable state = ({centers: [{x: 0, y: 0}, {x: img.width, y: 0}, {x: img.width, y: img.height}, {x: 0, y: img.height}]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"get_matrix = (sourcePoints, targetPoints) => {\n // Borrowed from https://bl.ocks.org/mbostock/10571478\n for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) {\n var s = sourcePoints[i], t = targetPoints[i];\n a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]), b.push(t[0]);\n a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]), b.push(t[1]);\n }\n\n var X = solve(a, b, true), matrix = [\n X[0], X[3], 0, X[6],\n X[1], X[4], 0, X[7],\n 0, 0, 1, 0,\n X[2], X[5], 0, 1\n ].map(function(x) {\n return x//d3.round(x, 6);\n });\n return matrix\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"mutable sourcePoints = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"mutable targetPoints = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"mutable matrix = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`Resources/notes:\n* [About the homography transformation](https://web.archive.org/web/20180815111418/http://www.corrmap.com/features/homography_transformation.php)\n* [slides from a lecture](https://web.archive.org/web/20190419045454/http://6.869.csail.mit.edu/fa12/lectures/lecture13ransac/lecture13ransac.pdf)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}