30:T884,# gap digitiser the gap between the hand line and the machine line is the research finding. it is visible on every session sheet — two lines on the same surface, drawn by different agents, reading the same nine positions differently. the slider data holds the machine line. the hand line exists only on the physical sheet. this tool bridges them.

${await FileAttachment("Screenshot 2026-05-02 at 12.31.30.png").image({width: 400})}

   yellow — hand line (digitised) · dashed black — machine line (reconstruction) · blue — scan
 

for each participant: load their scan, click on the hand line at each of the nine axes in order left to right, adjust the dots by dragging, then export. the tool records both lines in the same coordinate space and calculates the gap per axis as a value between -0.5 and 0.5 — the same scale as the original slider data. twenty-five sessions. twenty-five exports. the gap made computable. --- getting here wasn't straightforward. the scans are photographs of physical sheets — they don't align automatically with the coordinate system the plotter used. the axis positions had to be calibrated by hand. the sign of every value came out inverted and had to be corrected. the export wouldn't fire until the dispatch was wired correctly. all 25 scans had to be standardised in Photoshop before a single value could be trusted. the tool was built in collaboration with Claude (Anthropic) — using AI to think alongside rather than to generate the solution. the coordinate system, the calibration approach, the data structure — worked through iteratively, the decisions mine throughout. this is the research argument applied to its own making. `amplify(AI as friction, tool building) → the gap made computable` **digitisation protocol**: where the hand line crosses each axis, the first crossing point is recorded. for lines that fill space rather than cross cleanly, the first entry point is used. the scan holds the full character of the mark. ------------__31:T1316,viewof digitiser = { const vb = svgCoords.viewBox.split(" ").map(Number); const [vx, vy, vw, vh] = vb; const machineY = participant.positions.map( (p) => svgCoords.yCentre + (p.value / 0.5) * (svgCoords.yCentre - svgCoords.yTop) ); const handPoints = new Array(9).fill(null); let nextClick = 0; const svg = d3 .create("svg") .attr("viewBox", svgCoords.viewBox) .attr("width", 900) .attr("style", "background: #faf9f5; cursor: crosshair; display: block;"); // scan image // scan image const imageUrl = scanFile ? URL.createObjectURL(await scanFile.blob()) : await FileAttachment("id_01_scan.png").url(); svg .append("image") .attr("href", imageUrl) .attr("x", vx) .attr("y", vy) .attr("width", vw) .attr("height", vh) .attr("preserveAspectRatio", "none") .attr("opacity", 0.7); // axis guide lines svgCoords.axisX.forEach((x) => { svg .append("line") .attr("x1", x) .attr("x2", x) .attr("y1", svgCoords.yTop) .attr("y2", svgCoords.yBottom) .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "2,4"); }); // centre line svg .append("line") .attr("x1", vx + 40) .attr("x2", vx + vw - 40) .attr("y1", svgCoords.yCentre) .attr("y2", svgCoords.yCentre) .attr("stroke", "#eee") .attr("stroke-width", 1); // machine line svg .append("polyline") .attr( "points", svgCoords.axisX.map((x, i) => `${x},${machineY[i]}`).join(" ") ) .attr("fill", "none") .attr("stroke", "#130C0E") .attr("stroke-width", 2) .attr("stroke-dasharray", "6,4"); // hand line group const handGroup = svg.append("g"); // instruction const instruction = svg .append("text") .attr("x", vx + vw / 2) .attr("y", vy + 30) .attr("text-anchor", "middle") .attr("font-size", 16) .attr("fill", "#888") .attr("font-family", "IBM Plex Mono, monospace") .text(`click axis 1 of 9 — ${axes[0].top}`); function redrawHandLine() { handGroup.selectAll("polyline").remove(); const filled = handPoints .map((p, i) => (p ? `${svgCoords.axisX[i]},${p.y}` : null)) .filter(Boolean); if (filled.length > 1) { handGroup .append("polyline") .attr("points", filled.join(" ")) .attr("fill", "none") .attr("stroke", "#FFD700") .attr("stroke-width", 2); } } function calcValue(y) { return ( ((y - svgCoords.yCentre) / (svgCoords.yCentre - svgCoords.yTop)) * 0.5 ); } function dispatchResult() { svg.node().value = { id: participant.id, name: participant.name, axes: axes.map((axis, i) => ({ axis: i, labelTop: axis.top, labelBottom: axis.bottom, slider: participant.positions[i].value, hand: handPoints[i] ? calcValue(handPoints[i].y) : null, gap: handPoints[i] ? calcValue(handPoints[i].y) - participant.positions[i].value : null })) }; svg.node().dispatchEvent(new Event("input", { bubbles: true })); } // drag — defined once, used by all circles const drag = d3.drag().on("drag", function (event) { const [, vbY] = d3.pointer(event, svg.node()); const i = +d3.select(this).attr("data-index"); handPoints[i] = { ...handPoints[i], y: vbY }; d3.select(this).attr("cy", vbY); redrawHandLine(); dispatchResult(); }); // click handler svg.on("click", function (event) { if (nextClick >= 9) return; const [, vbY] = d3.pointer(event, svg.node()); handPoints[nextClick] = { x: svgCoords.axisX[nextClick], y: vbY, axis: nextClick }; handGroup .append("circle") .attr("cx", svgCoords.axisX[nextClick]) .attr("cy", vbY) .attr("r", 10) .attr("fill", "#FFD700") .attr("opacity", 0.85) .attr("data-index", nextClick) .style("cursor", "grab") .call(drag); redrawHandLine(); nextClick++; dispatchResult(); if (nextClick < 9) { instruction.text( `click axis ${nextClick + 1} of 9 — ${axes[nextClick].top}` ); } else { instruction.text("done — drag dots to adjust, then export"); } }); // reset button svg .append("text") .attr("x", vx + vw / 2 + 80) .attr("y", vy + vh - 20) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("fill", "#888") .attr("font-family", "IBM Plex Mono, monospace") .attr("letter-spacing", "2px") .attr("cursor", "pointer") .text("RESET") .on("click", () => { handPoints.fill(null); nextClick = 0; handGroup.selectAll("*").remove(); instruction.text(`click axis 1 of 9 — ${axes[0].top}`); }); // initialise value dispatchResult(); return svg.node(); }32:T5c1,## calibration the digitisation tool overlays an SVG coordinate system onto the scan image. the coordinate system was taken from the original session tool — the same viewBox and axis positions used to generate the plotter path. in theory the scan and the coordinate system should align automatically. in practice they don't. the scans are photographs, not orthographic renders — there is lens distortion, slight perspective shift, and variation in how each sheet was placed on the scanner. the SVG axis lines landed consistently to the left of the actual printed axes. the calibration tool fixes this by clicking directly on the scan to record the actual x position of each axis line and the y positions of the top, centre, and bottom of the coordinate space. those nine x values and three y values replace the hardcoded originals in `svgCoords`. for this dataset the calibrated values are: ```js svgCoords = ({ viewBox: "200 180 1200 770", yTop: 255, yBottom: 851, yCentre: 557, axisX: [324, 444, 564, 684, 804, 924, 1044, 1164, 1284] }) ``` the calibration assumes all 25 scans were made on the same scanner at the same settings — which they were. one calibration, twenty-five sessions. this is the interpolation argument applied to the tool itself: the coordinate system the plotter used to draw the machine line is not the same coordinate system the camera used to photograph it. the gap between them had to be felt through and corrected by hand.33:[{"id":"827173acaa6f2df4523126f45d37d4ba6393c9b6e74208ad479cf1ad21c5bbe96483e5f40c3028c105e8a22b3ca6366bc63495f485f4bb30a33f9a067937d035","href":"https://static.observableusercontent.com/files/827173acaa6f2df4523126f45d37d4ba6393c9b6e74208ad479cf1ad21c5bbe96483e5f40c3028c105e8a22b3ca6366bc63495f485f4bb30a33f9a067937d035","name":"Screenshot 2026-05-02 at 12.31.30.png","type":"image/png","lastModified":1777722390015.396,"size":487977},{"id":"52cdd509538f8bdca6441dbad5bad3bd661537ace0ae4ed36b0bd95d49879bcf0fc289b53640f59450a671238ecf80f1ba8472cd6acb56502a5e0d8b6037450f","href":"https://static.observableusercontent.com/files/52cdd509538f8bdca6441dbad5bad3bd661537ace0ae4ed36b0bd95d49879bcf0fc289b53640f59450a671238ecf80f1ba8472cd6acb56502a5e0d8b6037450f","name":"Screenshot 2026-05-02 at 12.31.52.png","type":"image/png","lastModified":1777721531074.948,"size":720990},{"id":"11c8666b9eb8746e00762a109a9f0e6b896b3868b724bb696939e9e4f866c11ea221c36dc7f7b59268018b834e86fe1a6ed79eef5dddcc64f181ed4ea129ff72","href":"https://static.observableusercontent.com/files/11c8666b9eb8746e00762a109a9f0e6b896b3868b724bb696939e9e4f866c11ea221c36dc7f7b59268018b834e86fe1a6ed79eef5dddcc64f181ed4ea129ff72","name":"id_01_scan.png","type":"image/png","lastModified":1777902047530.628,"size":370454}] 2e:{"title":"gap digitiser","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"// participant selector\nviewof selectedId = Inputs.select(\n participantMap.map((d) => d.id),\n {\n label: \"participant\",\n format: (id) => {\n const p = participantMap.find((d) => d.id === id);\n return `${id} — ${p.name}`;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// current participant\nparticipant = participantMap.find(d => d.id === selectedId)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"// file attachment for the scan\nviewof scanFile = Inputs.file({ \n label: \"load scan\", \n accept: \"image/*\" \n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n if (!digitiser?.axes?.every((a) => a.hand !== null))\n return html`

place all 9 points to export

`;\n\n const json = JSON.stringify(digitiser, null, 2);\n const blob = new Blob([json], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n\n return html`\n EXPORT gap_${digitiser.id}_${digitiser.name}.json\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"Inputs.table(digitiser?.axes ?? [], {\n columns: [\"labelTop\", \"slider\", \"hand\", \"gap\"],\n rows: 10,\n format: {\n slider: (d) => d?.toFixed(3) ?? \"—\",\n hand: (d) => d?.toFixed(3) ?? \"—\",\n gap: (d) => d?.toFixed(3) ?? \"—\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"``` \n_______ _______ ______ _______ \n| || || | | | \n| || _ || _ || ___| \n| || | | || | | || |___ \n| _|| |_| || |_| || ___| \n| |_ | || || |___ \n|_______||_______||______| |_______| \n```","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"participant.id\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"participant.positions.map((p) => ({ axis: p.labelTop, value: p.value }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"svgCoords.axisX.length // should be 9\n\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"// coordinate system — matches original session tool viewBox\nsvgCoords = ({\n viewBox: \"200 180 1200 770\",\n yTop: 255,\n yBottom: 851,\n yCentre: 557,\n axisX: [324, 444, 564, 684, 804, 924, 1044, 1164, 1284]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"----------------------\n\n```\n __ __ _______ ___ ___ ___ _______ ___ _______ _______ \n| | | || || | | | | | | || | | || | \n| | | ||_ _|| | | | | | |_ _|| | | ___|| _____| \n| |_| | | | | | | | | | | | | | | |___ | |_____ \n| | | | | | | |___ | | | | | | | ___||_____ | \n| | | | | | | || | | | | | | |___ _____| | \n|_______| |___| |___| |_______||___| |___| |___| |_______||_______| \n```\n----------------------","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"calibration","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof calibration = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", svgCoords.viewBox)\n .attr(\"width\", 900)\n .attr(\"style\", \"cursor: crosshair\");\n\n const imageFile = scanFile ?? defaultScan;\n const url = URL.createObjectURL(await imageFile.blob());\n\n svg\n .append(\"image\")\n .attr(\"href\", url)\n .attr(\"x\", 200)\n .attr(\"y\", 180)\n .attr(\"width\", 1200)\n .attr(\"height\", 770)\n .attr(\"preserveAspectRatio\", \"none\");\n\n const output = svg.node();\n output.value = [];\n\n svg.on(\"click\", function (event) {\n const [x, y] = d3.pointer(event, this);\n output.value = [...output.value, { x: Math.round(x), y: Math.round(y) }];\n output.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// axes — same order as sessions\naxes = [\n { top: \"making\", bottom: \"reflecting\" },\n { top: \"slow\", bottom: \"fast\" },\n { top: \"alone\", bottom: \"together\" },\n { top: \"hand\", bottom: \"automation\" },\n { top: \"constraint\", bottom: \"freedom\" },\n { top: \"tacit\", bottom: \"explicit\" },\n { top: \"repeat\", bottom: \"vary\" },\n { top: \"analogue\", bottom: \"digital\" },\n { top: \"depth\", bottom: \"breadth\" },\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { participantMap } from \"@eesur/participant-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"defaultScan = FileAttachment(\"id_01_scan.png\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}