31:T555,squares = { const { rows, cols } = grid; const [minR, maxR] = radiusExtent; // Using random numbers here doesn't produce // same results with same seed. const rNoiseWindow = 19; const posThetaNoiseWindow = 1000; const posRadiusNoiseWindow = 58999; return d3.range(rows).flatMap((j) => d3.range(cols).map((i) => { const palette = getRandomPalette(); let circles = [ { fill: palette.paper }, { fill: palette.hue1, blend: true }, { fill: palette.hue2, blend: true } ]; circles = circles.map((c, k) => { const rNoiseFreq = math.lerp(1 / 50, 100, rNoiseFactor); const rNoise = 0.5 + 0.5 * rnd.noise4D(k, j, i, rNoiseWindow, rNoiseFreq); const r = minR + rNoise * (maxR - minR); const posAngleNoise = 0.5 + 0.5 * rnd.noise4D(k, j, i, posThetaNoiseWindow, angleNoiseFactor); const theta = posAngleNoise * Math.PI * 2; const posRadiusNoise = 0.5 * rnd.noise4D(k, j, i, posRadiusNoiseWindow, posNoiseFactor); const posRadius = posRadiusNoise; const u = 0.5 + Math.cos(theta) * posRadius; const v = 0.5 + Math.sin(theta) * posRadius; return { ...c, r, u, v }; }); return { col: i, row: j, circles, bg: palette.bg }; }) ); }32:[] 2f:{"title":"060 Overprinted discs","cells":[{"id":0,"value":"# 060 Overprinted discs","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"canvas = {\n const clipId = \"cell-clip-path\";\n\n const adjustedWidth = width + gap;\n const adjustedHeight = height + gap;\n\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof randomize = seedButton(\"🎲 Generate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`[Link to this variation](${getNotebookUrlWithParams({\n seed: randomize,\n gapUV,\n rNoiseFactor,\n posNoiseFactor,\n angleNoiseFactor,\n opacity,\n mixBlend\n})})
You can get back to this particular generated graphic using this link.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof gapUV = Inputs.range([0, 1], {\n label: \"Gap\",\n step: 0.001,\n value: params.get(\"gapUV\") ?? 0.15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof rNoiseFactor = Inputs.range([0, 1], {\n label: \"Noise Factor 1\",\n value: 0.5,\n step: 0.01,\n value: params.get(\"rNoiseFactor\") ?? 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"viewof angleNoiseFactor = Inputs.range([0, 1], {\n label: \"Noise Factor 2\",\n value: 0.5,\n step: 0.01,\n value: params.get(\"angleNoiseFactor\") ?? 0.2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"viewof posNoiseFactor = Inputs.range([0, 1], {\n label: \"Noise Factor 3\",\n value: 0.5,\n step: 0.01,\n value: params.get(\"posNoiseFactor\") ?? 0.4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof opacity = Inputs.range([0, 1], {\n label: \"Opacity\",\n step: 0.01,\n value: params.get(\"opacity\") ?? 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"blurp({ invalidation, href: \"https://art.saneef.com/overprinted-discs\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"## Notes","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"I was fascinated by [the overprinting](https://en.wikipedia.org/wiki/Overprinting) on [Dompé Pharmaceuticals Ads](https://twitter.com/AisleOne/status/1587157521394827264) by [Franco Grignani](https://en.wikipedia.org/wiki/Franco_Grignani).\n\nThis code is an attempt to see if I can emulate overprinting on screen.\n\nFirst, I stole the colours off the posters. ","pinned":false,"hidden":false,"mode":"md"},{"id":525,"value":"palette = {\n const C = [paper, ...colors.map((c) => c.value)];\n\n return htl.html`\n

`\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"Using the first colour, let’s call it _paper_, I’m drawing the background of the canvas. Then, I pick a random colour from the three hues. I use that to draw the square background. Then I draw three random sized circles, at a random positions within the square.\nThe bottom most one is filled with the paper colour. Then next two I fill with colours other the one used on the square.\n\nNow, the magic to emulate overprinting, is to apply CSS `mix-blend-mode: multiply;` on the coloured circles! Try toggling the blend using control below to see the difference","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"viewof mixBlend = Inputs.toggle({\n label: md`Apply \\`mix-blend-mode: multiply;\\``,\n value: params.get(\"mixBlend\") === \"false\" ? false : true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"function drawCells({ squares, gap, cellSize, clipId } = {}) {\n return squares.map(({ col, row, circles, bg }) => {\n const x = col * (cellSize + gap) - gap / 2;\n const y = row * (cellSize + gap) - gap / 2;\n return htl.svg`\n\n \n ${drawCircles({ circles, gap, cellSize })}\n`;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"function drawCircles({ circles, gap, cellSize }) {\n return circles.map(({ r, u, v, fill, blend }) => {\n const cx = gap + math.lerp(0, cellSize, u);\n const cy = gap + math.lerp(0, cellSize, v);\n const R = math.lerp(0, cellSize, r);\n return htl.svg` {\n const bg = rnd.weightedSet(colors);\n const [hue1, hue2] = rnd\n .shuffle(colors)\n .filter((c) => c.value !== bg)\n .map((c) => c.value);\n const palette = { bg, hue1, hue2, paper };\n return palette;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"rnd = {\n CSRandom.setSeed(randomize);\n return CSRandom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"import { CSRandom, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"import {squaresInRectangle} from '@saneef/fit-n-number-of-squares-in-a-rectangle'","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}