32:[] 30:{"title":"042 Misregistered","cells":[{"id":0,"value":"# 042 Misregistered","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"output = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"Color palette _${palette.name}_ from [Chromotome](https://kgolid.github.io/chromotome-site/).","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"viewof randomize = Inputs.button(\"🎲 Shuffle\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"viewof distribution = Inputs.radio(paramsRange.distribution, {\n value: params.distribution\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof numOfPts = Inputs.range(paramsRange.samples, {\n label: \"Samples\",\n step: 10,\n value: Math.round(params.samples)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof error = Inputs.range(paramsRange.error, {\n label: \"Registration shift distance\",\n value: params.error,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"viewof errorAngle = Inputs.range(paramsRange.errorAngle, {\n label: \"Registration shift angle\",\n value: params.errorAngle,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof isLandscape = Inputs.toggle({ label: \"Landscape\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof mixBlendMode = Inputs.radio(\n [\"multiply\", \"normal\", \"overlay\", \"screen\"],\n {\n label: \"Mix blend mode\",\n value: palette.mixBlendMode\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"paramsRange = ({\n samples: [100, 5000],\n error: [0, 1],\n errorAngle: [0, 1],\n distribution: [\"Grid\", \"Poisson\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"params = {\n randomize;\n\n return {\n samples: random.range(paramsRange.samples[0], paramsRange.samples[1] / 2),\n error: random.range(...paramsRange.error),\n errorAngle: random.range(...paramsRange.errorAngle),\n distribution: random.pick(paramsRange.distribution)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"pts = {\n randomize;\n const pts = samplingFunction(numOfPts, width, height);\n\n return pts.map(([x, y]) => {\n const d = random.gaussian();\n return [x, y, d > 2 ? 1 : d < -2 ? -1 : 0];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"palette = {\n randomize;\n\n const { name, colors, background, contrasts } = getRandomPalette();\n const bgLum = color.relativeLuminance(background);\n\n let mixBlendMode = contrasts[0] < 1.5 ? \"overlay\" : \"multiply\";\n if (bgLum < 0.1) {\n mixBlendMode = \"screen\";\n }\n\n return {\n name,\n colors,\n background,\n contrasts,\n bgLum,\n mixBlendMode\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"getRandomPalette = () => {\n let attempts = 10;\n const minContrastRatio = 4;\n\n let p = chromotome.getRandom();\n\n while (attempts-- > 0) {\n const { name, colors: c, background = defaultBg } = chromotome.getRandom();\n const colors = random.shuffle(c).slice(0, 2);\n const contrasts = [\n color.contrastRatio(background, colors[0]),\n color.contrastRatio(background, colors[1])\n ];\n if (contrasts[0] > minContrastRatio || contrasts[1] > minContrastRatio) {\n p = { name, colors, background, contrasts };\n attempts == -1;\n }\n }\n\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"generateCircles = (pts, opts) => {\n const { fill, r, xShift, yShift, skipIf, mixBlendMode } = Object.assign(\n {\n fill: \"white\",\n r: 1,\n xShift: 0,\n yShift: 0,\n skipIf: 1\n },\n opts\n );\n const circle = pts.map(([cx, cy, skip]) =>\n skip === skipIf\n ? null\n : svg``\n );\n\n return svg`${circle}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = {\n const ratio = 1.414;\n const h = isLandscape ? Math.round(width / 1.414) : Math.round(width * 1.414);\n\n return Math.round(h);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"d = width / Math.sqrt((numOfPts * height) / width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"minDistance = d * 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"maxDistance = d * 1.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"r = minDistance * 0.45","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"rShift = {\n const rMin = r / 8;\n const rMax = r / 1.5;\n return rMin + (rMax - rMin) * error;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"degShift = Math.PI * 2 * errorAngle","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"xShift = rShift * Math.cos(degShift)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"yShift = rShift * Math.sin(degShift)","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"defaultBg = \"white\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"samplingFunction = distribution === \"Poisson\" ? poissonSampling : gridSampling","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"gridSampling(numOfPts, width, height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"function* gridGenerator(n, width, height) {\n let d = width / Math.sqrt((n * height) / width);\n let [x, y] = [d / 2, d / 2];\n while (n-- > 0) {\n yield [x, y];\n x += d;\n if (x >= width) {\n x = d / 2;\n y += d;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"gridSampling = (n, width, height) => {\n let pts = [];\n for (let p of gridGenerator(n, width, height)) {\n pts.push(p);\n }\n\n return pts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"// Based on https://observablehq.com/@esperanc/flow-fields#poissonSampling\npoissonSampling = function (n, width, height) {\n let pds = new Poisson({\n shape: [width, height],\n minDistance,\n maxDistance,\n tries: 15\n });\n return pds.fill();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"## Styles\n\nThese styles are to align and size the image in the Observable Notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"## Credits\n\nThe Poisson and Grid sampling code is based on [Claudio Esperança’s Flow fields](https://observablehq.com/@esperanc/flow-fields#gridSampling) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"Poisson = {\n return (\n await import(\"https://cdn.skypack.dev/poisson-disk-sampling@2.2.2?min\")\n ).default;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"chromotome = import(\n \"https://unpkg.com/chromotome@1.19.1/dist/index.esm.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"import {\n CSRandom as random,\n CSColor as color,\n CSMath as math\n} from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":464,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}