41:null 42:["$","title",null,{"children":"Halftoning | Dmitry Baranovskiy | Observable"}] 48:T251e,img = { const c = document.createElement("canvas"); const ctx = c.getContext("2d"); const img = new Image(); const type = +pptype; const round = (num) => Math.round(num * 1e4) / 1e4; img.onload = (e) => { const w = img.width; const h = img.height; const m = Math.max(w, h); const div = Math.max(1, m / 1000); const scale = a / 3; const W = Math.round(w / div / scale); const H = Math.round(h / div / scale); const A = a / scale; const C = cross / scale; c.width = W; c.height = H; mutable w = Math.round(w / div); mutable h = Math.round(h / div); ctx.drawImage(img, 0, 0, W, H); const data = ctx.getImageData(0, 0, W, H).data; const buckets = []; const dots = []; const sq3 = Math.sqrt(3); const sq2 = Math.sqrt(2); const π = Math.PI; const push2bucket = (x, y) => { dots.push({ x, y }); let xx = Math.ceil(x / 10); let yy = Math.ceil(y / 10); buckets[xx] = buckets[xx] || []; buckets[xx][yy] = buckets[xx][yy] || []; buckets[xx][yy].push({ x, y, i: dots.length - 1 }); }; let n; const cx = W / 2; const cy = H / 2; let x = cx; let y = cy; let row, col, Y; let odd; const rmax = Math.sqrt(cx ** 2 + cy ** 2); switch (type) { case 0: case 7: x = 0; y = 0; odd = true; while (y < H) { push2bucket(x, y); x += A; if (x > W) { y += (A / 2) * sq3; x = (A / 2) * odd; odd = !odd; } } break; case 1: let r = A; n = 6; push2bucket(cx, cy); while (r < rmax) { const α = (2 * π) / n; for (let i = 0; i < n; i++) { x = cx + r * Math.cos(α * i); y = cy + r * Math.sin(α * i); push2bucket(x, y); } r += (A * sq3) / 2; n += 6; } break; case 2: push2bucket(cx + A / 2, cy); const θ = π * (3 - 5 ** 0.5); n = 0; let R = (A / 2) * n ** 0.5; let α = n * θ; while (R < rmax) { const x = cx + R * Math.cos(α); const y = cy + R * Math.sin(α); push2bucket(x, y); n++; R = (A / 2) * n ** 0.5; α = n * θ; } break; case 3: case 5: case 10: x = 0; y = 0; while (y < H) { push2bucket(x, y); x += A; if (x > W) { y += A; x = 0; } } break; case 4: x = 0; y = 0; row = true; col = true; Y = y; while (y < H) { push2bucket(x, y); x += (A * sq3) / 2; y = y + (A / 2) * (col ? -1 : 1); col = !col; if (x > W) { y = Y + A * (row ? 1 : 2); Y = y; x = 0; row = !row; col = row; } } break; case 12: x = 0; y = 0; col = true; Y = y; while (y < H) { push2bucket(x, y); x += (A * sq3) / 2; y = y + (A / 2) * (col ? -1 : 1); col = !col; if (x > W) { y = Y + A * 1.5; Y = y; x = 0; col = true; } } break; case 6: x = 0; y = 0; odd = true; while (y < H) { push2bucket(x, y); x += A * sq2; if (x > W) { y += A / sq2; x = odd ? A / sq2 : 0; odd = !odd; } } break; case 8: x = 0; y = 0; while (y < H + A) { push2bucket(x, y + Math.sin(x / 4)); x += A; if (x > W) { y += A; x = 0; } } break; case 9: x = 0; y = 0; odd = true; while (y < H) { push2bucket(x, y); x += A; if (x > W) { y += (A / 4) * 3; x = (A / 2) * odd; odd = !odd; } } break; case 11: x = 0; y = 0; odd = true; while (y < H) { push2bucket(x, y); x += A; if (x > W) { y += A; x = (A / 2) * odd; odd = !odd; } } break; } for (let y = 0; y < H; y++) { for (let x = 0; x < W; x++) { const i = y * (W * 4) + x * 4; let closest = Infinity; let theDot; const X = Math.ceil(x / 10); const Y = Math.ceil(y / 10); const theDots = [].concat( buckets[X][Y] || [], buckets[X][Y - 1] || [], buckets[X][Y + 1] || [], buckets[X - 1] ? buckets[X - 1][Y] || [] : [], buckets[X - 1] ? buckets[X - 1][Y - 1] || [] : [], buckets[X - 1] ? buckets[X - 1][Y + 1] || [] : [], buckets[X + 1] ? buckets[X + 1][Y] || [] : [], buckets[X + 1] ? buckets[X + 1][Y - 1] || [] : [], buckets[X + 1] ? buckets[X + 1][Y + 1] || [] : [] ); theDots.forEach((dot) => { const d = (dot.x - x) ** 2 + (dot.y - y) ** 2; if (d < closest) { closest = d; theDot = dots[dot.i]; } }); theDot.v = theDot.v || []; const green = data[i + 1] || 0; theDot.v.push(inv ? green : 255 - green); } } const max = (A * sq3) / 3; const d = (36 * (π - 2 * sq3)) / (A ** 2 * 2 * sq3 * (3 - 2 * sq3) ** 2); const d3 = (π - 4) / (A ** 2 * (3 - 2 * sq2)); const k = (A ** 2 * sq3) / 2 / π; const k2 = (A * sq3) / 3; const path = []; row = -1; col = -1; dots.forEach((dot) => { if (!dot.v) { return; } const wantRate = mean(dot.v) / 255; let r; if (type == 10) { r = (A * Math.sqrt(C ** 2 + A ** 2 * wantRate - 2 * A * C * wantRate) - A * C) / (A - 2 * C); } else if (type == 9) { r = (A * Math.sqrt( C ** 2 + 2.25 * A ** 2 * wantRate - 3 * A * C * wantRate ) - A * C) / (3 * A - 4 * C); } else if (type == 7) { r = A * Math.sqrt(wantRate / 3); } else if (type == 5 || type == 6 || type == 11) { r = A * Math.sqrt(wantRate); } else if (type == 4 || type == 12) { r = (3 / 2) * A * Math.sqrt(wantRate); } else if (type == 3 || type == 8) { r = wantRate < π / 4 ? Math.sqrt((wantRate * A ** 2) / π) : (A * d3 * sq2 + Math.sqrt(4 * d3 * (wantRate - 1))) / (2 * d3); } else { r = wantRate < π / (2 * sq3) ? Math.sqrt(wantRate * k) : (2 * k2 * d + Math.sqrt( 4 * k2 ** 2 * d ** 2 - 4 * d * (d * k2 ** 2 + 1 - wantRate) )) / (2 * d); } const cx = dot.x * scale; const cy = dot.y * scale; r = round(r * scale); if (type == 10) { const a = round(A * scale); const c = round(C * scale); const b = (c + (r * (a - c)) / a - r) / 2; path.push( `M${cx - r / 2},${ cy - b - r / 2 }h${r}v${b}h${b}v${r}h${-b}v${b}h${-r}v${-b}h${-b}v${-r}h${b}z` ); } else if (type == 9) { const a = round(A * scale); const c = round(C * scale); const b = (r * (a - c)) / a + (c - r) / 2; path.push( `M${cx - r / 2},${ cy - b - r / 2 }h${r}v${b}h${b}v${r}h${-b}v${b}h${-r}v${-b}h${-b}v${-r}h${b}z` ); } else if (type == 7) { const r2 = r / 2; const r23 = r2 * sq3; path.push( `M${cx},${ cy - r }l${r23},${r2}v${r}l${-r23},${r2},${-r23},${-r2}v${-r}z` ); } else if (type == 6) { r /= sq2; path.push(`M${cx},${cy - r / 2}l${r},${r},${-r},${r},${-r},${-r}z`); } else if (type == 5 || type == 11) { path.push(`M${cx - r / 2},${cy - r / 2}h${r}v${r}h${-r}z`); } else if (type == 12) { if (!cx) { row++; col = -1; } const aa = (r / 3) * 2; col++; if (col % 2) { path.push( `M${cx},${cy + aa}l${(-aa * sq3) / 2},${(-aa / 2) * 3}h${aa * sq3}z` ); } else { path.push( `M${cx},${cy - aa}l${(-aa * sq3) / 2},${(aa / 2) * 3}h${aa * sq3}z` ); } } else if (type == 4) { if (!cx) { row++; col = -1; } const aa = (r / 3) * 2; col++; if ((col + row) % 2) { path.push( `M${cx},${cy + aa}l${(-aa * sq3) / 2},${(-aa / 2) * 3}h${aa * sq3}z` ); } else { path.push( `M${cx},${cy - aa}l${(-aa * sq3) / 2},${(aa / 2) * 3}h${aa * sq3}z` ); } } else { path.push( `M${round(cx)},${round(cy - r)}a${[r, r, 0, 0, 1, 0, 2 * r]}a${[ r, r, 0, 0, 1, 0, -2 * r ]}z` ); } }); mutable pathstring = path.join(""); }; img.src = src; return "Loaded…"; }49:[{"id":"eab2a74e9b7d160bd4bd51d23423f5196c923e40ae324d5d4135d6475479efa2a2aa32f16f514c89ed4b6a92f264078659d5b6c96907cc28521e1a8438f378cd","href":"https://static.observableusercontent.com/files/eab2a74e9b7d160bd4bd51d23423f5196c923e40ae324d5d4135d6475479efa2a2aa32f16f514c89ed4b6a92f264078659d5b6c96907cc28521e1a8438f378cd","name":"gagarin.jpg","type":"image/jpeg","lastModified":1597646105538.731,"size":253558}] 46:{"id":"e1f94fb6a191a12a","slug":"halftoning","title":"Halftoning","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-08-14T11:09:17.776Z","update_time":"$D2023-09-25T05:53:23.758Z","view_time":null,"first_public_time":"$D2020-08-17T01:39:06.122Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024","bio":"JavaScript Artist","following":false},"version":394,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"bio":"JavaScript Artist","following":false}],"members":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"role":"editor"}],"comments":[{"id":"63fcc4e64d2d3d32","reply_to_id":null,"content":"This is _awesome_","create_time":"$D2020-08-18T11:34:52.965Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a640b97979271cda","login":"danielgolden","name":"Daniel Golden","avatar_url":"https://avatars.githubusercontent.com/u/812989?v=4","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"1ccb87aaae809911","slug":"patterns","title":"Patterns","owner":{"id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy"}},"type":"notebook","body":{"titling":"auto","title":"Halftoning","cells":[{"id":0,"value":"md`# Halftoning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`After a bit of [experimenting with polka dot patterns](https://observablehq.com/@dmitrybaranovskiy/halftone), [circular dot patterns](https://observablehq.com/@dmitrybaranovskiy/circular-dots) and [Vogel Spirals](https://observablehq.com/@dmitrybaranovskiy/sunflower) I updated my dot darkness calculation algorithm to get dot radius by the value of darkness. It was only logical to apply this to an image and get what you can see below.\n\nThis method works best for non cicular patterns. In case of fully black area both circular patterns produce some visible artefacts. Also the code uses simply green channel, so for better results upload black and white photos.\n\nPlay around with your own images and if you want to download result as SVG or PNG, click on “⋮” button at the left from the image and choose your option.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof file2 = {\n const input = html``;\n input.onchange = e => {\n const reader = new FileReader();\n reader.onload = e => {\n mutable src = e.target.result;\n };\n reader.readAsDataURL(input.files[0]);\n };\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof pptype = select({\n title: \"Pattern Type\",\n description: \"Please pick your favourite pattern\",\n options: [\n { label: \"Circles\", value: 0 },\n { label: \"Circles 2\", value: 3 },\n { label: \"Triangles\", value: 4 },\n { label: \"Triangles 2\", value: 12 },\n { label: \"Squares\", value: 5 },\n { label: \"Squares 2\", value: 11 },\n { label: \"Hexagons\", value: 7 },\n { label: \"Crosses\", value: 9 },\n { label: \"Crosses 2\", value: 10 },\n { label: \"Diamonds\", value: 6 },\n { label: \"Waves\", value: 8 },\n { label: \"Circular Dots\", value: 1 },\n { label: \"Sunflower Dots\", value: 2 }\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof inv = checkbox({\n options: [{ value: true, label: \"Inverse\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof a = slider({\n min: 5,\n max: 20,\n precision: 1,\n value: 7,\n title: \"Distance\",\n description: \"Distance between dots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"viewof cross = slider({\n min: 1,\n max: a,\n precision: 1,\n value: a / 2,\n title: \"Crossbar length\",\n description: \"Extra option for “Crosses” and “Crosses 2” pattern types\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`---\n### *Basement*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"mutable src = await FileAttachment(\"gagarin.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mean = array => array.reduce((a, b) => a + b) / array.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"mutable w = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"mutable h = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import { slider, select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"mutable pathstring = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 47:"$46:body"