2e:null 2f:["$","title",null,{"children":"Simplifying Pose Estimation with Circular Barcodes | Tom Larkworthy | Observable"}] 34:T51f,A [decade](https://edinburghhacklab.com/2012/05/optical-localization-to-0-1mm-no-problemo/) ago I hoped to build low-cost, high-speed optical positioning for robots, using camera-based end effector measurements. However, the challenge lies in achieving high-frequency measurements comparable to those of commercial robot arms, which measure 10,000 times per second, far beyond the capabilities of affordable 30 frames per second digital cameras. Recent advancements have somewhat closed this gap: for instance, a Raspberry PI camera utilizing raspiraw can [reach 1007 frames-per-second](https://www.youtube.com/watch?v=m3Bs-yhWZ3M), providing a low-latency hardware solution. Still, the hurdle of fast pose estimation remains due to the inherent bandwidth intensity of computer vision. The difficulty lies in the variability of object appearances and the high dimensionality of the task, requiring a search for a 6DOF-oriented object in a 2D image plane. However, by redesigning the problem with circular barcodes, which can be read from any angle, we can transform a 2D recognition problem into a simpler 1D task that matches the camera's hardware interface better. This notebook presents a open-source simulator setup and a basic scan line-based template detector algorithm to confirm the geometric argument.35:[{"id":"09c7c5d686ad26e455eac60a5cd204d331b4c0347355f152b9217908da2d138503008965a0963c4e5ceeb6868ac3c3acad8e79518a8c6a432b4547a5b4e2f103","href":"https://static.observableusercontent.com/files/09c7c5d686ad26e455eac60a5cd204d331b4c0347355f152b9217908da2d138503008965a0963c4e5ceeb6868ac3c3acad8e79518a8c6a432b4547a5b4e2f103","name":"image@7.png","type":"image/png","lastModified":1685473128250.168,"size":477188},{"id":"19fddea7642a31261b8f89e951c48ab43ef57a272d273aad8d4b746432eec2f91f76595b1ffe395b81bfd883c1f9f8858a723957f24fe1bc2271e662b57b611d","href":"https://static.observableusercontent.com/files/19fddea7642a31261b8f89e951c48ab43ef57a272d273aad8d4b746432eec2f91f76595b1ffe395b81bfd883c1f9f8858a723957f24fe1bc2271e662b57b611d","name":"image@9.png","type":"image/png","lastModified":1685473211236.609,"size":1430335},{"id":"c8a38767b458c271e20a6510ce2cae7f121ab9cfa0757db945fad69ef6d4381e45307e9d0755d4d5f82a8967715e0f56df525a1291af8606c13e4fdd632d7d81","href":"https://static.observableusercontent.com/files/c8a38767b458c271e20a6510ce2cae7f121ab9cfa0757db945fad69ef6d4381e45307e9d0755d4d5f82a8967715e0f56df525a1291af8606c13e4fdd632d7d81","name":"image@2.png","type":"image/png","lastModified":1685214087529.42,"size":117098},{"id":"b93b935028522ee6a48a144fe4cdb0a153a9daf82e0f7d9ad444b46a1024e1bb7de99698ec5c76eba0e84484184d176d2fdc2e9de01f151391e81bd677788fab","href":"https://static.observableusercontent.com/files/b93b935028522ee6a48a144fe4cdb0a153a9daf82e0f7d9ad444b46a1024e1bb7de99698ec5c76eba0e84484184d176d2fdc2e9de01f151391e81bd677788fab","name":"image@5.png","type":"image/png","lastModified":1685278823271.016,"size":96252},{"id":"021e29bc2e9e3924e230940400200d4e3933153e9babd520c6e594e6dabeffc4fc3501ca9b57b15170768c883c90f1e89386bcaf0f9bae04858b02b5099ed99d","href":"https://static.observableusercontent.com/files/021e29bc2e9e3924e230940400200d4e3933153e9babd520c6e594e6dabeffc4fc3501ca9b57b15170768c883c90f1e89386bcaf0f9bae04858b02b5099ed99d","name":"image.png","type":"image/png","lastModified":1685173568268.201,"size":732928}] 32:{"id":"4fe413fb2e36d2a3","slug":"circular-barcode-simulator","title":"Simplifying Pose Estimation with Circular Barcodes","thumbnail":"fdc2cd2e961e5d06e851a9dc167261a0376ebebb89b4f938f4f9242f7d91ce8f","access_level":"public","create_time":"$D2023-05-27T06:31:29.089Z","update_time":"$D2025-08-24T21:53:48.214Z","view_time":null,"first_public_time":"$D2023-06-10T15:47:54.475Z","has_unpublished_edits":null,"fork":{"id":"86895897d60fb007","slug":"hello-three-js-orbit-controls","title":"Hello, Three.js Orbit Controls!","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":7,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":3101,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5494066b62750766","slug":"robots","title":"robots","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Simplifying Pose Estimation with Circular Barcodes","cells":[{"id":0,"value":"# Simplifying Pose Estimation with Circular Barcodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2736,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1767,"value":"## Camera simulation\n\nThis is our model of a camera built with [three.js](https://threejs.org/). You can pan and zoom with the mouse to alter the pose of the barcode relative to the camera.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2591,"value":"viewof imageSource = Inputs.select([\"real\", \"synthetic\"], {\n label: \"image\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2363,"value":"renderer = new THREE.WebGLRenderer({ antialias: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"render = {\n var renderTarget = new THREE.WebGLRenderTarget(width, height);\n const gl = renderer.getContext();\n const render = () => {\n renderer.setRenderTarget(renderTarget);\n renderer.render(scene, camera);\n gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer);\n renderer.setRenderTarget(null);\n renderer.render(scene, camera);\n mutable renders++;\n };\n render.renderer = renderer;\n return render;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"pixelBuffer = new Uint8Array(width * height * 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2353,"value":"scene = {\n const textureLoader = new THREE.TextureLoader();\n let texture = undefined;\n if (imageSource == \"real\") {\n texture = textureLoader.load(await FileAttachment(\"image.png\").url());\n } else {\n const blob = new Blob([synthetic.outerHTML], { type: \"image/svg+xml\" });\n const url = URL.createObjectURL(blob);\n texture = textureLoader.load(url);\n }\n\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n await new Promise((res) => (textureLoader.manager.onLoad = res));\n const cube = new THREE.Mesh(\n geometry,\n new THREE.MeshBasicMaterial({ map: texture })\n );\n cube.position.x = -0.5;\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000);\n scene.add(cube);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const aspect = width / height;\n const near = 0.0001;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(1, 0, 1);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"viewof fov = Inputs.range([0, 180], {\n label: \"field-of-view (degrees, vertical)\",\n value: 45\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"canvas = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(1);\n controls.addEventListener(\"change\", render);\n render();\n return html`

${renderer.domElement}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"overlay = {\n const overlay = html``;\n canvas.insertBefore(overlay, canvas.firstChild);\n invalidation.then(() => canvas.removeChild(overlay));\n return overlay;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"## Scan line sampler\n\nWe expect to be able to recognize a barcode from a single scan that passes through the center of the barcode. Here you choose the scan line position and visualize the available signal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"viewof scanY = Inputs.range([0, height], {\n label: \"scanY\",\n step: 1,\n value: 198\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"scanline = {\n renders;\n const slice = pixelBuffer.slice(scanY * width * 4, (scanY + 1) * width * 4);\n\n return Array.from({ length: width }).map((_, i) => ({\n x: i,\n y: scanY,\n v: Math.round((slice[i * 4] + slice[i * 4 + 1] + slice[i * 4 + 2]) / 3)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"Plot.plot({\n width: 1000,\n marks: [\n Plot.auto(scanline, {x: \"x\", y: \"v\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"## Barcode Template\n\nWe skip barcode decoding for now and concentrate on recognizing the *known* barcode pattern expressed as a binary string.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"template = {\n const half = [\n 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1,\n 1, 1, 1\n ];\n return [...half, ...[...half].reverse()];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"templateData = template.flatMap((v, i) => [\n { x: i, y: v },\n { x: i + 1, y: v }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"Plot.plot({\n marks: [\n Plot.auto(templateData, {x: \"x\", y: \"y\", color: \"#ff5375\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"## Projecting the template\n\nThe barcode will appear somewhere in the scan line deformed by perspective geometry. Translation and scale are obvious, but more complex is the effect of orientation. Note an evenly spaced barcode will end up observed as a non-evenly spaced pattern due to vanishing distance effects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"image2 = FileAttachment(\"image@2.png\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"## Pinhole Camera model ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2797,"value":"We can calculate the spacings by considering the angle that that the barcode is relative to the camera position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":804,"value":"image5 = FileAttachment(\"image@5.png\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"\n```\n cos(x) * c = cos(a) * b - d\n sin(x) * c = sin(a) * b\n=> (eliminate c)\n (b * cos(a) - d) / cos(x) = (sin(a) * b) / sin(x)\n=>\n (b * cos(a)) / cos(x) - (sin(a) * b) / sin(x) = d / cos(x)\n=> \n b * (cos(a) / cos(x) - sin(a) / sin(x)) = d / cos(x)\n=>\n b = d / (cos(x) * (cos(a) / cos(x) - sin(a) / sin(x)))\n=>\n b = d / (cos(a) - sin(a) * cos(x) / sin(x))\n\n\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2803,"value":"We eventually arrive at the conclusion the size of the barcode and the distance from the camera are the same thing. There are only 4 important parameters, one of which is the field-of-view which is fixed. So pose estimation on a scan line becomes a 3 dimensional problem.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"viewof offset_pinhole = Inputs.range([-0.5, 0.5], {\n label: \"offset\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"viewof scale_pinhole = Inputs.range([0, 1.5], { label: \"scale\", value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof angle_pinhole = Inputs.range([-Math.PI, Math.PI], {\n label: \"angle\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"viewof fov_pinhole = Inputs.range([0.00001, Math.PI], {\n label: \"field-of-view (radians)\",\n // three JS FOV is vertical which is related to horizontal via aspect ratio\n value:\n 2 * Math.atan(Math.tan((camera.fov * Math.PI) / 180 / 2) * camera.aspect)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2805,"value":"The pinhole model assumes the angle related directly to the pixel coordinates, which leads to very warped images. Real cameras project the angle to a flat plane sensor, which is what the angle correction toggle does below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2654,"value":"viewof useAngleCoorection = Inputs.toggle({\n label: \"angle correction\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"viewof useAngleCoorection1 = Inputs.toggle({\n label: \"angle correction\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2812,"value":"With these parameters, we can simulate expected pixel values for a given projection on our image. Note how adjusting the angle creates the vanishing effect, and note how the field of view further modulates the effect. I have normalized all the params so it's easy to simulate in resolution-independant scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2394,"value":"pinhole = (\n px,\n model = {\n angle: 0,\n offset: 0,\n scale: 1\n }\n) => {\n const angleCorrection = (px) => {\n // flatten the image against an image plane, distance d from focal point\n // tan(angle) = opposite / adjacent\n // -fov / 2 is the extreme, -0.5 is extreme of image coords\n // tan(-fov / 2) = -0.5 / d\n // => d = -0.5 / tan(-fov * 0.5)\n // Now we d we can go forward, preserving image coordinates\n const d = -0.5 / Math.tan(-0.5 * fov_pinhole);\n return Math.atan((px - model.offset) / d) / fov_pinhole;\n };\n const pinhole = (angle) => {\n if (!useAngleCoorection) angle -= model.offset;\n const x = angle * fov_pinhole; // range: [-0.5, -0.5]\n const a = model.angle + Math.PI / 2;\n const b = 0.5 / (Math.cos(a) - (Math.sin(a) * Math.cos(x)) / Math.sin(x));\n return (b / model.scale / fov_pinhole + 0.25) * templateData.length;\n };\n const imgCoord = useAngleCoorection ? angleCorrection(px) : px;\n return template[Math.round(pinhole(imgCoord))];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"Plot.plot({\n marks: [\n Plot.auto(projectedPinholeData, {x: \"x\", y: \"y\", color: \"#1ca463\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":671,"value":"projectedPinholeData = Array.from({ length: width }).map((_, x) => ({\n x: x,\n y: pinhole(x / width - 0.5, {\n offset: offset_pinhole,\n scale: scale_pinhole,\n angle: angle_pinhole\n })\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"## Estimate the goodness-of-fit of a proposed pose","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2816,"value":"Given the camera model and the parameters of a template projection, we can measure the goodness-of-fit with the mean squared error of pixel intensities. This visualization is reactive to the parameters elsewhere in the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1345,"value":"fitData = Array.from({ length: width }).map((_, x) => {\n const scan = scanline[x].v / 256;\n const template = pinhole(x / width - 0.5, {\n offset: offset_pinhole,\n scale: scale_pinhole,\n angle: angle_pinhole\n });\n const error = Math.pow(scan - template, 2);\n return {\n x: x,\n scan,\n template,\n error\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"meanError = d3.mean(fitData, (d) => d.error)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"score_template_fit = (params = { offset: 0, scale: 1, angle: 0 }) => {\n let sumSquaredError = 0;\n for (let x = 0; x < width; x++) {\n const scan = scanline[x].v / 256;\n const template = pinhole(x / width - 0.5, {\n offset: params.offset,\n scale: params.scale,\n angle: params.angle\n });\n sumSquaredError += (scan - template) * (scan - template) || 1;\n }\n return sumSquaredError;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"viewof showTemplate = Inputs.toggle({\n label: \"show template?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"viewof showScan = Inputs.toggle({\n label: \"show scan?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2618,"value":"viewof showError = Inputs.toggle({\n label: \"show error?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"Plot.plot({\n y: {\n domain: [0, 1]\n },\n marks: [\n showTemplate\n ? Plot.lineY(fitData, { x: \"x\", y: \"template\", stroke: \"green\" })\n : undefined,\n showScan\n ? Plot.lineY(fitData, { x: \"x\", y: \"scan\", stroke: \"blue\" })\n : undefined,\n showError\n ? Plot.lineY(fitData, { x: \"x\", y: \"error\", stroke: \"red\" })\n : undefined,\n Plot.ruleY([meanError], { stroke: \"black\" }),\n Plot.text([{ meanError, text: \"mean\\nerror\" }], {\n x: width,\n y: (d) => d.meanError + 0.03,\n text: \"text\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"## Grid searching a best fit\n#### ⚠️ slow!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2829,"value":"A simple way of template matching is exhaustively trying all the pose combinations. However, this is a three-dimensional problem with an ${tex`O(n^4)`} time complexity. My computer can handle 50 steps per dimension, but this is not high enough to solve the problem without help. I have had luck using 5 steps per dim interactively, manually trimming the search space, then following up with a high step per dimension to get the best match in a small search space. Remember to turn off grid search so you can then fine-tune the final estimate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1497,"value":"viewof useBestFit = Inputs.toggle({\n label: \"Use grid search\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"viewof steps = Inputs.range([1, 50], {\n value: 5,\n step: 1,\n label: \"steps per dim\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"viewof offset_range = interval([-0.4, 0.4], {\n label: \"offset range\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"viewof scale_range = interval([0, 1.5], {\n value: [0.1, 1.5],\n label: \"scale range\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"viewof angle_range = interval([-Math.PI / 2 + 0.1, Math.PI / 2 - 0.1], {\n label: \"angle range\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"doBestFit = {\n if (useBestFit) {\n viewof offset_pinhole.value = bestFit.offset;\n viewof scale_pinhole.value = bestFit.scale;\n viewof angle_pinhole.value = bestFit.angle;\n\n viewof offset_pinhole.dispatchEvent(new Event(\"input\"));\n viewof scale_pinhole.dispatchEvent(new Event(\"input\"));\n viewof angle_pinhole.dispatchEvent(new Event(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"bestFit = {\n if (!useBestFit) return this;\n let lowestError = Number.POSITIVE_INFINITY;\n let lowestParams = undefined;\n for (\n let offset = offset_range[0];\n offset <= offset_range[1];\n offset += (offset_range[1] - offset_range[0]) / steps\n )\n for (\n let scale = scale_range[0];\n scale <= scale_range[1];\n scale += (scale_range[1] - scale_range[0]) / steps\n )\n for (\n let angle = angle_range[0];\n angle <= angle_range[1];\n angle += (angle_range[1] - angle_range[0]) / steps\n ) {\n const params = {\n angle,\n scale,\n offset\n };\n const sumSquaredError = score_template_fit(params);\n if (sumSquaredError < lowestError) {\n lowestError = sumSquaredError;\n lowestParams = {\n ...params,\n sumSquaredError: sumSquaredError\n };\n }\n }\n return lowestParams;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"## Fine-tune with Local Patch Search","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2860,"value":"When in the vicinity of a good match, you can find tune with the following routine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2837,"value":"viewof precision_patch = Inputs.range([1, 5], { label: \"precision\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"step_size = Number.parseFloat(\n \"0.\" +\n Array.from({ length: precision_patch - 1 })\n .map((_) => \"0\")\n .join(\"\") +\n \"1\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1693,"value":"current = ({\n offset: offset_pinhole,\n angle: angle_pinhole,\n scale: scale_pinhole\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"Inputs.button(\"step\", {\n reduce: () => {\n let currentScore = score_template_fit(current);\n let next = current;\n // look around\n for (let dim in current) {\n for (let extent = -10; extent <= 10; extent += 10) {\n const candidate = {\n ...current,\n [dim]: current[dim] + extent * step_size\n };\n const candidateScore = score_template_fit(candidate);\n if (candidateScore < currentScore) {\n currentScore = candidateScore;\n next = candidate;\n }\n }\n }\n // update params\n viewof offset_pinhole.value = next.offset;\n viewof scale_pinhole.value = next.scale;\n viewof angle_pinhole.value = next.angle;\n\n viewof offset_pinhole.dispatchEvent(new Event(\"input\"));\n viewof scale_pinhole.dispatchEvent(new Event(\"input\"));\n viewof angle_pinhole.dispatchEvent(new Event(\"input\"));\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2868,"value":"## Results\n\nAfter lots of bug fixes, I am pleased that it is possible to achieve very good template matches, indicating the template is keyed in correctly and we can faithfully predict the template deformation for the camera model. This is true even with high field-of-view camera models and strangely orientated barcodes as shown below.\n\n

\n ${await FileAttachment(\"image@9.png\").image({width: 600})}\n

I angled the barcode awkwardly to the scan line

\n\n\n

\n ${await FileAttachment(\"image@7.png\").image({width: 400})}\n

Mean error of 0.014 achieved on the barcode above. This is what a good fit looks like

\n\n\nThe theory that circular barcodes can be read at any pose works out! This demonstrates circular barcodes can reduce orientated object detection down to a 3-degree-of-freedom problem on a 1-dimensional slice, a drastic reduction in underlying problem complexity that fits hardware.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2898,"value":"## Next steps\n\nLooking forward, I think intensity-based approaches are not going to scale well. So in future work, I will try a feature-based approach (e.g. edge detection) to avoid the expensive inner loop and explore a streaming algorithm to suit hardware implementation. Future work will be added to the [realtime optical positioning collection](https://observablehq.com/collection/@tomlarkworthy/realtime-optical-positioning) of notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2938,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2940,"value":"##### extra stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2632,"value":"

synthetic image

\n ${synthetic}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2530,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"synthetic","database":"$undefined"},{"id":52,"value":"height = 401","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"mutable renders = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"