30:T909,function generateFacesData(rnd, grid) { return m .linspace(grid.rows, true) .map((u) => m.linspace(grid.cols, true).map((v) => { const color = rnd.weightedSet([ { value: 0, weight: 1 }, { value: 1, weight: 1 }, { value: 2, weight: 1 }, { value: undefined, weight: 7 } ]); let features = []; const formity = m.clamp01(rnd.gaussian(0.0125) * 0.5 + 0.5); // Hair const hairStyle = rnd.weightedSet([ { value: "parted", weight: 1 }, { value: "flat", weight: 1 }, { value: "wavy", weight: 1 }, { value: undefined, weight: 6 } ]); const hairVariation = m.clamp01(rnd.gaussian() * 0.5 + 0.5); if (hairStyle) { features.push("hair"); } // Mouth const hasMouth = rnd.weightedSet([ { value: true, weight: 1 }, { value: false, weight: 3 } ]); const isHappy = rnd.weightedSet([ { value: true, weight: 3 }, { value: false, weight: 1 } ]); const happiness = (isHappy ? 1 : -1) * m.clamp01(rnd.gaussian() * 0.5 + 0.5); if (hasMouth) { features.push("mouth"); } // Eyes const haveEyes = rnd.weightedSet([ { value: true, weight: 1 }, { value: false, weight: 3 } ]); if (haveEyes) { features.push("eyes"); } // Nose const hasNose = rnd.weightedSet([ { value: true, weight: 1 }, { value: false, weight: 3 } ]); const noseWidth = m.clamp01(rnd.gaussian() * 0.5 + 0.5); const noseWobble = m.clamp01(rnd.gaussian() * 0.5 + 0.5); if (hasNose) { features.push("nose"); } return { features, happiness, formity, noseWidth, noseWobble, hairStyle, hairVariation, color }; }) ) .flat(); }31:T1f29,function generateFace({ debug = false, width = 150, height = 200, features = ["mouth", "eyes", "nose", "hair"], fill = "hsl(0,0%,95%)", stroke = "hsl(0,0%,5%)", strokeWidth = 1.5, strokeLinejoin = "round", strokeLinecap = "round", noseWidth = 1, noseWobble = 0.5, formity = 0.5, happiness = 0, hairStyle = "flat", hairVariation = 0.5 } = {}) { const aspectRatio = width / height; const happinessUV = happiness * 0.5 + 0.5; const verticalDivisions = 3; const verticalDivHeight = height / verticalDivisions; const eyelineDivisions = 5; const eyelineY = verticalDivHeight + (verticalDivHeight * 1) / 4; const eyeWidth = width / eyelineDivisions; const earWidth = (eyeWidth * 2) / 5; const earHeight = (verticalDivHeight * 2) / 4; const mouthLine = verticalDivHeight * 2 + verticalDivHeight / 3; const tickSize = 10; const drawSkin = () => { const faceWidth = width - 2 * earWidth; const dCx = (formity * faceWidth) / 5; return htl.svg` `; }; const drawEars = () => { const earDebugStroke = debug ? "red" : "none"; const earDx = m.lerp(0, earWidth / 2, formity); const d = `M${earWidth * 1.5},${eyelineY} Q${earWidth * 1.5},${verticalDivHeight} ${earWidth / 2},${verticalDivHeight} Q${0},${verticalDivHeight} ${0},${eyelineY} Q${earDx},${verticalDivHeight * 2} ${earWidth * 1.75},${eyelineY + verticalDivHeight * 0.25} Z`; return htl.svg` `; }; const drawEyes = () => { if (!features.includes("eyes")) return; const eyeY = eyelineY; const eyeXFromMid = (eyeWidth * 3) / 4; const eyeDx = m.lerp(0, eyeWidth / 5, happinessUV); const eyeStrokeWidth = m.lerp(strokeWidth * 2, strokeWidth, happinessUV); return htl.svg` `; }; const drawNose = () => { if (!features.includes("nose")) return; const noseWidthDX = m.lerp(-eyeWidth, eyeWidth, noseWidth); const noseCx = width / 2; const noseY1 = eyelineY; const noseY2 = 2 * verticalDivHeight; const dy = m.lerp(0, verticalDivHeight / 5, noseWobble); // if (Math.abs(noseWidth * 2 - 1) < 0.25) return; return htl.svg` `; }; const drawMouth = () => { if (!features.includes("mouth")) return; const cx = width / 2; const mouthY = mouthLine; const mouthDy = happiness < 0 ? m.lerp(0, -verticalDivHeight / 3, Math.abs(happiness)) : m.lerp(0, verticalDivHeight / 2, Math.abs(happiness)); const mouthDx = m.lerp(eyeWidth * 0.25, eyeWidth * 0.85, happinessUV); return htl.svg` `; }; const drawHair = () => { if (!features.includes("hair")) return; if (hairStyle === "flat") { const hairY = m.lerp( verticalDivHeight * 0.25, verticalDivHeight * 0.75, hairVariation ); return htl.svg``; } else if (hairStyle === "parted") { const hairYMin = verticalDivHeight * 0.25; const hairPartitionX = m.lerp( earWidth * 3, width - earWidth * 3, hairVariation ); return htl.svg``; } else if (hairStyle === "wavy") { const hairYMin = m.lerp( verticalDivHeight * 0.8, verticalDivHeight * 0.9, hairVariation ); const hairYMax = verticalDivHeight * 1.25 - strokeWidth / 2; const hairPartitionX = m.lerp( earWidth * 1.333, width - earWidth * 1.333, hairVariation ); const partions = 2 * Math.floor(m.lerp(3, 6, hairVariation)); const points = m .linspace(partions + 1, true) .map((u, i) => [ earWidth + u * (width - 2 * earWidth), i % 2 === 0 ? hairYMin : hairYMax ]); const path = d3.path(); points.forEach((p, i) => { if (i === 0) { path.moveTo(...p); } else if (i % 2 !== 0) { } else { const cx = points[i - 1][0]; const cy = points[i - 1][1]; path.quadraticCurveTo(cx, cy, ...p); } }); const d = path.toString(); return htl.svg``; } }; let debugEls; if (debug) { debugEls = htl.svg` ${d3.range(verticalDivisions - 1).map( (i) => htl.svg`` )} ${d3.range(eyelineDivisions + 1).map( (i) => htl.svg`` )} `; } return htl.svg` ${drawSkin()} ${drawEars()} ${drawHair()} ${drawNose()} ${drawEyes()} ${drawMouth()} ${debugEls} `; }32:T82d,function generateIrregularGrid({ baseGrid, baseWidth = 640, baseHeight = 480, cells = 90, random = CSRandom, freq = 15, amp = 0.75, padding = 0.5 } = {}) { const p = m.clamp01(padding); const paddingPx = (p * Math.min(baseWidth, baseHeight)) / 50; const grid = baseGrid ?? squaresInRectangle(baseWidth, baseHeight, cells); const { side, rows, cols } = grid; const gridWidth = side * cols - paddingPx; const gridHeight = side * rows - paddingPx; const maxDu = (side / (side * cols)) * 0.5; let generatedCells = m.linspace(rows, true).map((v, j) => { const heightRatio = random.noise2D(v / 10, 100, freq, amp) * 0.5 + 0.5; return m.linspace(cols, true).map((u, i) => { const widthRatio = random.noise3D(u / 10, v / 10, 0, freq, amp) * 0.5 + 0.5; return { widthRatio, heightRatio }; }); }); const totalHeightRatio = d3.sum(generatedCells, (d) => d[0].heightRatio); const totalWidthRatios = generatedCells.map((row) => { return d3.sum(row, (d) => d.widthRatio); }); generatedCells = generatedCells.map((row, j) => { return row.map((c, i) => { const width = (gridWidth * c.widthRatio) / totalWidthRatios[j]; const height = (gridHeight * c.heightRatio) / totalHeightRatio; return { // ...c, width, height }; }); }); generatedCells = generatedCells.reduce((accRows, row, j) => { const nextRow = row.reduce((acc, curr, i) => { return [ ...acc, { ...curr, x: i === 0 ? 0 : acc[i - 1].x + acc[i - 1].width, y: j === 0 ? 0 : accRows[j - 1][i].y + accRows[j - 1][i].height } ]; }, []); return [...accRows, nextRow]; }, []); generatedCells = generatedCells.flat(); generatedCells = generatedCells.map(({ x, y, width, height }) => ({ x: x + paddingPx, y: y + paddingPx, width: width - paddingPx, height: height - paddingPx })); return { ...grid, width: cols * side, height: rows * side, cells: generatedCells }; }33:[{"id":"025ebc29d48f221d133f5f617a7b1005dac6aed31d65c29f7760474c69f5708e7f3e184e1025ea5cbab309688a4b0f4e2aa706d10d6e0631a6fe27e1c8e17f99","href":"https://static.observableusercontent.com/files/025ebc29d48f221d133f5f617a7b1005dac6aed31d65c29f7760474c69f5708e7f3e184e1025ea5cbab309688a4b0f4e2aa706d10d6e0631a6fe27e1c8e17f99","name":"faces-2.png","type":"image/png","lastModified":1678185522833.765,"size":198265},{"id":"478fdea927aad0bc71a8eb714648d3bfd39f1bcdc56562369834915eb2538615b80e19d893f84af06b1f46d4841dc7a9f3514f8c804d0b248d59c95c85748197","href":"https://static.observableusercontent.com/files/478fdea927aad0bc71a8eb714648d3bfd39f1bcdc56562369834915eb2538615b80e19d893f84af06b1f46d4841dc7a9f3514f8c804d0b248d59c95c85748197","name":"sampleFace.png","type":"image/png","lastModified":1678274545728.886,"size":10041}] 2e:{"title":"062 Mugshots","cells":[{"id":0,"value":"# 062 Mugshots","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"mugshots = {\n const { width, height, cells } = irGrid;\n const { palette, faces } = data;\n\n const size = Math.min(width, height);\n\n const marginPx = (margin * size) / 5;\n const canvasWidth = width + 2 * marginPx;\n const canvasHeight = height + 2 * marginPx;\n\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof randomize = seedButton(\"🎲 Generate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md`[Link to this variation](${versionUrlWithCurrentParams})
You can get back to this particular generated graphic using this link.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"viewof gridPadding = Inputs.range([0, 1], {\n label: \"Grid padding\",\n step: 1 / 16,\n value: params.get(\"gridPadding\") ?? 0.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"viewof margin = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 1 / 16,\n value: params.get(\"margin\") ?? 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"viewof strokeWidth = Inputs.range([1, 4], {\n label: \"Stroke\",\n step: 1 / 16,\n value: params.get(\"strokeWidth\") ?? 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1571,"value":"blurp({ invalidation, href: \"https://art.saneef.com/mugshots\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":992,"value":"## Notes","pinned":false,"hidden":false,"mode":"md"},{"id":1472,"value":"A few weeks, back I came across [art works by Loek Vugs](https://loekvugs.nl/Various-Illustrations).\nI really loved the one with faces.\nThis notebook is a second-rate attempt to replicate that artwork using code.","pinned":false,"hidden":false,"mode":"md"},{"id":1476,"value":"I broke down the problem into two parts: first to generate faces with variations, and the second to generate an irregular grid.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1478,"value":"I’m not good with drawing and facial proportions. So, I searched on the internet and found [a framework](https://www.adobe.com/creativecloud/illustration/discover/how-to-draw-a-face.html) to draw faces in proportions. Using that, I drew a draft face in SVG. Then I added parameters to change various features of the face like shape of the nose, style of hair and length of eyes. Play with [the controls below](#cell-484) to see the possibilities. I spent most amount of time getting the shape of the face and ears right. My first attempt was using a rectangle with rounded radius to drawn. You know, like a web developer, I assumed everything can be drawn using box with border radius. But the output of those attempts, very boxy or robotic faces. \n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1480,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1482,"value":"Then I read up on [Quadratic Bézier curves](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve) using SVG ``. With some iterations, I got the results I want. The function, `generateFace()` will generate SVG elements of a face based on parameters like `width`, `height`, `happiness` and such.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1404,"value":"Now to the less complicated problem, creating an irregular grid. In the past, I have used [a QuadTree based grid](https://observablehq.com/@saneef/037-shapes-on-a-quadtree). But, in this case, I wanted something similar to that of the original art work, but in a landscape layout. I used two sets of noise values: one to decide the height of the rows, and the second set to decide the width of each cell.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":994,"value":"

\"A — An output from my initial attempts

","pinned":false,"hidden":false,"mode":"html"},{"id":1484,"value":"I’m using colours from [the Chromotome](https://kgolid.github.io/chromotome-site/) collections. I filtered the collection, which has a designated `background` colour. Then, I pick the most contrasting colour from the `colors`, as `foreground` colour. In cases where the `background` is of light shade, I swapped `foreground` and `background` colours. Otherwise, the features don’t look right when dark faces are drawn on a light background.","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":800,"value":"baseGrid = squaresInRectangle(960, 600, 75)","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"irGrid = generateIrregularGrid({\n baseGrid,\n random: seededRnd,\n padding: gridPadding\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"data = {\n // The faces data and palette picking are done sequential\n // so that the seedRnd can be used by both generated in sequece.\n // This is the only way to have consistent generation of palette\n // and face parameters from the seeded URL.\n const faces = generateFacesData(seededRnd, baseGrid);\n const palette = getPalette(seededRnd);\n return {\n faces,\n palette\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"aspectRatio = 4 / 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":" baseWidth = 960;","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"baseHeight = Math.floor(baseWidth / aspectRatio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"function getPalette(rnd) {\n // return {\n // background: \"hsl(0,0%,2.5%)\",\n // foreground: \"hsl(0,0%,97.5%)\",\n // colors: [\n // \"hsl(195, 75%, 60%)\", //Blue\n // \"hsl(55, 95%, 69%)\", //Yellow\n // \"hsl(12, 75%, 60%)\" //Red\n // ]\n // };\n const palettes = getAllPalettes();\n const p = rnd.pick(palettes);\n let { foreground, background } = p;\n\n if (\n color.relativeLuminance(background) > color.relativeLuminance(foreground)\n ) {\n return {\n ...p,\n foreground: background,\n background: foreground\n };\n }\n\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"### Face","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"sampleFace = htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof faceAspectRatio = Inputs.range([0.25, 3], {\n label: \"Aspect ratio\",\n step: 0.0125,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof features = Inputs.checkbox([\"mouth\", \"eyes\", \"nose\", \"hair\"], {\n label: \"Features\",\n value: [\"mouth\", \"eyes\", \"nose\", \"hair\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof happiness = Inputs.range([-1, 1], {\n label: \"Happiness\",\n step: 1 / 16,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"viewof formity = Inputs.range([0, 1], {\n label: \"Formity\",\n step: 1 / 16,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof sampleStrokeWidth = Inputs.range([1, 5], {\n label: \"Stroke width\",\n step: 0.125,\n value: 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"viewof noseWidth = Inputs.range([0, 1], {\n label: \"Nose width\",\n value: 1,\n step: 1 / 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof noseWobble = Inputs.range([0, 1], {\n label: \"Nose wobble\",\n value: 1,\n step: 1 / 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof hairVariation = Inputs.range([0, 1], {\n label: \"Hair variation\",\n value: 1,\n step: 1 / 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof hairStyle = Inputs.radio([\"flat\", \"parted\", \"wavy\"], {\n label: \"Hair style\",\n value: \"parted\",\n disabled: !features.includes(\"hair\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"sampleWidth = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"sampleHeight = Math.floor(sampleWidth / faceAspectRatio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"### Grid","pinned":false,"hidden":false,"mode":"md"},{"id":597,"value":"viewof sampleFreq = Inputs.text({\n label: \"Frequency\",\n type: \"number\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"viewof sampleCells = Inputs.range([10, 300], { label: \"Faces\", step: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"viewof sampleGridPadding = Inputs.range([0, 1], {\n label: \"Padding\",\n value: 1 / 2,\n step: 1 / 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"sampleGrid = {\n const aspectRatio = 4 / 3;\n const baseWidth = 960;\n const baseHeight = Math.floor(baseWidth / aspectRatio);\n const grid = generateIrregularGrid({\n baseWidth,\n baseHeight,\n freq: sampleFreq,\n cells: sampleCells,\n padding: sampleGridPadding\n });\n const { width, height, cells } = grid;\n\n return htl.svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"seededRnd = {\n const rnd = CSRandom.createRandom();\n rnd.setSeed(randomize);\n return rnd;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"function getAllPalettes() {\n return chromotome\n .getAll()\n .filter((p) => p.background)\n .map((p) => {\n let { colors } = p;\n const foreground = getForeground(p);\n if (foreground) {\n colors = colors.filter((c) => c !== foreground);\n }\n return { ...p, foreground, colors };\n })\n .filter((p) => p.foreground);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"function getForeground({\n colors,\n background,\n maxAttempts = 10,\n minContrastRatio = 4.5\n} = {}) {\n let attempts = maxAttempts;\n const contrasts = colors\n .map((c) => color.contrastRatio(background, c))\n .map((contrast, index) => ({ contrast, index }));\n\n const sortedContrast = contrasts\n .slice()\n .sort((a, b) => b.contrast - a.contrast);\n\n if (sortedContrast[0].contrast > minContrastRatio) {\n return colors[sortedContrast[0].index];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1513,"value":"versionedUrl = {\n const { url, version } = await getCurrentMetadata();\n return `${url}@${version}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1537,"value":"randomize","pinned":true,"hidden":false,"mode":"ojs"},{"id":1529,"value":"versionUrlWithCurrentParams = addParams(versionedUrl, {\n seed: randomize,\n gridPadding,\n margin,\n strokeWidth\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"import {\n CSMath as m,\n CSRandom,\n CSColor as color\n} from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"import { squaresInRectangle } from \"@saneef/fit-n-number-of-squares-in-a-rectangle\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"import { addParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"chromotome = import(\n \"https://unpkg.com/chromotome@1.20.0/dist/index.esm.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"import { getCurrentMetadata } from \"@mootari/notebook-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1502,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1505,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}