30:Tc5b,# Image to Line SVG This notebook converts images into line-based SVGs for plotter drawing. It deliberately avoids smooth interpolation to explore what happens when continuity must emerge through perception rather than computation. ## How it works The process breaks continuous photographic tone into discrete horizontal lines. You control the translation through manual parameter adjustment, making each decision visible rather than automated. **Key insight:** Interpolation is pushed out of the algorithm and pulled back in by perception. --- ## Controls ### Parameters | Parameter | What it does | Effect | |-----------|--------------|--------| | **Target width** | Rescales input image | Sets resolution and detail level | | **Sample step** | Horizontal sampling interval | Larger = fewer samples, more abstraction | | **Line spacing** | Vertical distance between lines | Controls density through line frequency | | **Darkness threshold** | Binary cutoff: mark or don't mark | Converts continuous tone to structure | | **Min run length** | Minimum consecutive dark samples | Removes noise, merges fragments | | **Invert** | Flips light/dark logic | Swaps figure and ground | | **SVG scale** | Final output size | Scales geometry only | --- ## The Pipeline | Stage | What happens | Interpolation | |-------|--------------|---------------| | Image resize | Resampled to target width | Browser handles continuous interpolation | | Grayscale conversion | RGB → luminance (0–255) | Direct calculation, no interpolation | | Thresholding | Luminance → binary (mark/no mark) | Continuity deliberately collapsed | | Scanline sampling | Pixels read at fixed intervals | Discrete sampling only | | Run-length merging | Adjacent marks become lines | Implicit continuity | | SVG output | Lines as straight segments | No interpolation | --- ## What gets interpolated (and what doesn't) **Interpolated:** - Image rescaling uses browser's continuous interpolation - Perceptual interpolation happens in your vision, not the code **Not interpolated:** - No smoothing between pixels - No curves, splines, or averaging - No tonal blending after threshold The system refuses to interpolate tone computationally. --- ## Relation to d3.interpolate | d3.interpolate | This notebook | |----------------|---------------| | Continuous value blending | Binary decisions | | Smooth transitions | Hard thresholds | | Automated in-betweening | Manual parameter selection | | Computational interpolation | Perceptual interpolation | **d3.interpolate asks:** "What lies between A and B?" **This notebook asks:** "What survives when we remove the in-between?" Both explore continuity, but from opposite directions. --- ## Process Summary Continuous image → discrete decisions → perceptual continuity By withholding computational interpolation, the work of creating continuity shifts from algorithm to perception. You engage with the transformation through parameter adjustment, maintaining contact with decisions that automated conversion would hide. This friction — the manual selection of threshold, spacing, and sampling — is where expertise lives.31:T44f,segments = { if (!gray) return []; const { g, w, h } = gray; const step = settings.sampleStep; const spacing = settings.lineSpacing; const t = settings.darknessThreshold; const invert = settings.invert; const minRun = settings.simplifyMinRun; // helper: is "ink"? const isInk = (lum) => (invert ? lum > t : lum < t); const segs = []; for (let y = 0; y < h; y += spacing) { let runStart = null; let runCount = 0; for (let x = 0; x < w; x += step) { const lum = g[y * w + x]; const ink = isInk(lum); if (ink) { if (runStart === null) { runStart = x; runCount = 1; } else { runCount++; } } else { if (runStart !== null) { if (runCount >= minRun) { segs.push({ x1: runStart, y1: y, x2: x - step, y2: y }); } runStart = null; runCount = 0; } } } // flush end of row if (runStart !== null && runCount >= minRun) { segs.push({ x1: runStart, y1: y, x2: w - step, y2: y }); } } return segs; }32:T509, --- ### Image source The default image used in this notebook is a photographic portrait of **Vera Molnár** (1924–2023), one of the earliest artists to work with algorithmic and plotter-based drawing. Molnár began using computers in the late 1960s, developing what she called *machine imaginaire*: rule-based systems designed to explore variation, constraint, and deviation within strict formal limits. Her long-term commitment to simple geometries and procedural transformation makes her work particularly resilient to reduction into line-based structures. --- ### About the code This notebook combines handwritten code with exploratory code generated through interaction with large language models (LLMs). These models were used as **assistive tools** for scaffolding, debugging, and iterating on ideas. All conceptual decisions, parameter choices, and methodological framing remain author-led. The code is treated as a site of practice rather than a finished product; friction, revision, and misunderstanding are considered integral to the work. --- ### Note on method No tonal interpolation is performed after thresholding. Continuity in the resulting images is structurally derived through line density, omission, and perception rather than numerical smoothing. --- 33:[{"id":"f8804e6878b3149fd3f91381cc7899edfe0fe9e4acd0652f49443c8ec52932f94237f90315ca21850aa15a4d663222442437bed8e83670cf181a5fdc68cc2518","href":"https://static.observableusercontent.com/files/f8804e6878b3149fd3f91381cc7899edfe0fe9e4acd0652f49443c8ec52932f94237f90315ca21850aa15a4d663222442437bed8e83670cf181a5fdc68cc2518","name":"molnar_default.webp","type":"image/webp","lastModified":1769531827497.751,"size":44938}] 2e:{"title":"Image to Line SVG","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"viewof file = Inputs.file({ label: \"Upload image\", accept: \"image/*\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof settings = Inputs.form({\n targetWidth: Inputs.range([200, 2000], {\n value: 500,\n step: 10,\n label: \"Target width (px)\"\n }),\n sampleStep: Inputs.range([1, 10], {\n value: 2,\n step: 1,\n label: \"Sample step (px)\"\n }),\n lineSpacing: Inputs.range([2, 20], {\n value: 5,\n step: 1,\n label: \"Line spacing (px)\"\n }),\n darknessThreshold: Inputs.range([0, 255], {\n value: 130,\n step: 1,\n label: \"Darkness threshold (0-255)\"\n }),\n simplifyMinRun: Inputs.range([1, 50], {\n value: 5,\n step: 1,\n label: \"Min run length (samples)\"\n }),\n invert: Inputs.toggle({\n value: false,\n label: \"Invert (treat light as dark)\"\n }),\n svgScale: Inputs.range([0.1, 5], { value: 1, step: 0.1, label: \"SVG scale\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"Line-derived image (structural, not tonal): \n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"svgPreview = {\n if (!svgString) return html`

Upload an image to see SVG.

`;\n return html`

\n ${\n new DOMParser().parseFromString(svgString, \"image/svg+xml\")\n .documentElement\n }\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"svgString = {\n if (!canvas) return \"\";\n\n const w = canvas.width;\n const h = canvas.height;\n const s = settings.svgScale;\n\n // You can map to real-world units later (mm), but start simple: px->px*s\n const x = d3.scaleLinear().domain([0, w]).range([0, w * s]);\n const y = d3.scaleLinear().domain([0, h]).range([0, h * s]);\n\n const pathLines = segments.map(d =>\n `M ${x(d.x1).toFixed(2)} ${y(d.y1).toFixed(2)} L ${x(d.x2).toFixed(2)} ${y(d.y2).toFixed(2)}`\n );\n\n const svg =\n``;\n\n return svg;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"------\nLoad image → draw to canvas","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"img = {\n let source;\n\n // Case 1: user uploaded a file\n if (file instanceof File) {\n source = URL.createObjectURL(file);\n }\n\n // Case 2: Inputs.file returned an array\n else if (file?.[0] instanceof File) {\n source = URL.createObjectURL(file[0]);\n }\n\n // Case 3: fallback to default attachment FileAttachment(\"molnar_default.webp\").image()\n else {\n source = await FileAttachment(\"molnar_default.webp\").url();\n }\n\n const image = await new Promise((resolve, reject) => {\n const im = new Image();\n im.crossOrigin = \"anonymous\";\n im.onload = () => resolve(im);\n im.onerror = reject;\n im.src = source;\n });\n\n // Clean up object URLs\n if (source.startsWith(\"blob:\")) {\n URL.revokeObjectURL(source);\n }\n\n return image;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"canvas = {\n if (!img) return null;\n\n const w = settings.targetWidth;\n const h = Math.round(img.height * (w / img.width));\n\n const c = document.createElement(\"canvas\");\n c.width = w;\n c.height = h;\n\n const ctx = c.getContext(\"2d\", { willReadFrequently: true });\n ctx.drawImage(img, 0, 0, w, h);\n\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"gray = {\n if (!canvas) return null;\n const { width: w, height: h } = canvas;\n const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n const { data } = ctx.getImageData(0, 0, w, h);\n\n // grayscale array, length w*h\n const g = new Uint8Array(w * h);\n for (let i = 0, p = 0; i < data.length; i += 4, p++) {\n const r = data[i],\n gg = data[i + 1],\n b = data[i + 2];\n // perceptual luminance\n g[p] = Math.round(0.2126 * r + 0.7152 * gg + 0.0722 * b);\n }\n return { g, w, h };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"$32","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}