2b:null 2c:["$","title",null,{"children":"brushed canvas | Travis Stodter | Observable"}] 31:[] 2f:{"id":"315d34b927eb3826","slug":"brushed-canvas","title":"brushed canvas","thumbnail":"3c1cdfe20d41b913d5c6936a6ef4f0282e71bced6f4d671a07f943b091c20401","access_level":"public","create_time":"$D2021-12-14T16:19:44.458Z","update_time":"$D2021-12-17T19:02:56.462Z","view_time":null,"first_public_time":"$D2022-01-03T20:17:26.244Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"825710bbc181247a","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":"starter_2024"},"version":475,"publish_version":475,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null}],"members":[{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"1d5e1b859ded1ad3","slug":"plotter-tools","title":"Plotter Tools","owner":{"id":"825710bbc181247a","login":"tstodter","name":"Travis Stodter"}},"type":"notebook","body":{"title":"brushed canvas","cells":[{"id":0,"value":"md`# brushed canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"viewof imgFile = Inputs.file({label: \"Image\", accept: \".png,.jpg,.svg\", required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"img = imgFile.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"viewof palette0 = Inputs.color({value: d3.rgb('gold').hex(), submit: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"md`> ${humanName(palette0)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"viewof palette1 = Inputs.color({ value: d3.rgb(\"white\").hex(), submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"md`> ${humanName(palette1)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"viewof palette2 = Inputs.color({ value: d3.rgb(\"black\").hex(), submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"md`> ${humanName(palette2)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"viewof palette3 = Inputs.color({ value: d3.rgb(\"black\").hex(), submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"md`> ${humanName(palette3)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"viewof palette4 = Inputs.color({ value: d3.rgb(\"black\").hex(), submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"md`> ${humanName(palette4)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"viewof palette5 = Inputs.color({ value: d3.rgb(\"black\").hex(), submit: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"md`> ${humanName(palette5)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"palette = [palette0, palette1, palette2, palette3, palette4, palette5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"colorAt = { \n const ctx = DOM.context2d(img.naturalWidth, img.naturalHeight, 1);\n\n ctx.drawImage(img, 0, 0);\n \n return (x, y) => {\n return d3.rgb(...ctx.getImageData(x, y, 1, 1).data);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"viewof widthInInches = Inputs.range([2, 16], {\n label: \"Width in inches\",\n value: 7,\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"heightInInches = Math.round((100 * (widthInInches * img.naturalHeight)) / img.naturalWidth) / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"w = widthInInches * 96","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"h = heightInInches * 96","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"paperXtoImgX = d3.scaleLinear().domain([0, w]).range([0, img.naturalWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"paperYToImgY = d3.scaleLinear().domain([0, h]).range([0, img.naturalHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"md`## Dimensions: ${widthInInches} in. by ${heightInInches} in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"viewof pointToPointDistance = Inputs.range([0.1, 100], {\n label: \"Point to point distance in mm\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"pointRadius = (pointToPointDistance / 2) * 3.78","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"viewof brushStrokeLengthInMM = Inputs.range([0.5, 100], {\n label: \"Brush stroke length in mm\",\n stepSize: 0.5,\n value: pointToPointDistance\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"brushStrokeLength = brushStrokeLengthInMM * 3.78","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof brushStrokeWidthInMM = Inputs.range([0.5, 20], {\n label: \"Brush stroke width in mm\",\n stepSize: 0.5,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"brushStrokeWidth = brushStrokeWidthInMM * 3.78","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"points = [...poissonDiscSampler(0, 0, w, h, pointRadius)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"voronoi = {\n const delaunay = d3.Delaunay.from(points);\n return delaunay.voronoi([0, 0, w, h]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"brushLines = {\n return (\n points\n .map((p, i) => {\n const centroid = d3.polygonCentroid(voronoi.cellPolygon(i));\n\n // const directionToCentroid = vecBetween(p, centroid);\n const directionToCentroid = normalize(vecBetween(p, centroid));\n return {\n id: i,\n from: p,\n to: vecAdd(p, vecMult(brushStrokeLength, directionToCentroid))\n };\n })\n // Check for brush strokes going up-ish -- these won't work well for brushes\n // so reverse them\n .map(({ from, to, ...rest }) =>\n to[1] - from[1] < 0\n ? { from: to, to: from, ...rest }\n : { from, to, ...rest }\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"brushColors = brushLines\n .map(({ from, to, id }) => {\n const midpoint = [\n paperXtoImgX((from[0] + to[0]) / 2),\n paperYToImgY((from[1] + to[1]) / 2)\n ];\n const colorAtPixel = colorAt(...midpoint);\n const color = findClosestColorFrom(\n palette,\n colorAtPixel.opacity === 0 ? d3.color(\"white\") : colorAtPixel\n );\n return [id, color];\n })\n .reduce((acc, [id, color]) => {\n acc[id] = color;\n return acc;\n }, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"brushedCanvas = {\n await visibility();\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"linesByLayer = brushLines.reduce((acc, { from, to, id }, i) => {\n const color = brushColors[id];\n\n if (!acc[color]) {\n acc[color] = [];\n }\n\n acc[color].push({ from, to, id });\n return acc;\n}, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"layers = objectMap(\n (lines) =>\n lines.map(({ from, to, id }, i) => {\n return svg.fragment`\n `;\n }),\n linesByLayer\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"viewof watching = Inputs.checkbox(Object.entries(linesByLayer), {\n label: \"Colors to export\",\n format: ([color, brushLines]) => humanName(color)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"svgToExport = {\n await visibility();\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"// {\n// const name = palette0;\n// return DOM.download(\n// await new Promise(resolve => layers[name].toBlob(resolve)), \n// `${imgFile.name.replace(/\\.\\w+$/, '')}_${name}.png`, \n// `Save ${name}`\n// )\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"vecBetween = (p1, p2) => {\n return [p2[0] - p1[0], p2[1] - p1[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"vecAdd = (p1, p2) => [p1[0] + p2[0], p1[1] + p2[1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"vecMult = (n, vec) => [vec[0] * n, vec[1] * n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"normalize = ([x, y]) => {\n const length = Math.sqrt(x * x + y * y);\n return [x / length, y / length];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"objectMap = R.curry((f, obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, f(v)])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"line = ({ id, color, from: [x1, y1], to: [x2, y2] }) =>\n svg.fragment`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"layer = ({ label }) => ({ contents }) =>\n svg.fragment`\n \n\n ${contents}\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"import {poissonDiscSampler} from '@mbostock/the-delaunays-dual'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"import {findClosestColorFrom} from '@tstodter/cmyk-rgb-separation'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"import {humanName} from '@tstodter/pretty-color-name'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"R = require('ramda')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"