31:T420,32:[{"id":"2a36bc2c4a38e2e7f4a8f5c7f1b8a024503bcf8e52a0ebda1ca8f7251747016274da20f618194b442712c1cd12c40582a8267db983fe1affa0e2fccba08fc1e9","href":"https://static.observableusercontent.com/files/2a36bc2c4a38e2e7f4a8f5c7f1b8a024503bcf8e52a0ebda1ca8f7251747016274da20f618194b442712c1cd12c40582a8267db983fe1affa0e2fccba08fc1e9","name":"qd@2.json","type":"application/json","lastModified":1665179370945.238,"size":2510218}] 2f:{"title":"Morphing Faces","cells":[{"id":0,"value":"# Morphing Faces\n\nDidn't exactly turn out how I envisioned it in my head. Kind of mesmerizing, though.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":3059,"value":"Drag around the face parts:","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"viewof faceMove = faceInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3023,"value":"faceMove","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"qd = FileAttachment(\"qd@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":3052,"value":"faceMoveScale = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"viewof tt = Inputs.range([0, 1], {\n label: \"Morph position\",\n value: 0,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"function makePath(coords, attributes = {}) {\n const pathData = coords.reduce((acc, [x, y], index) => {\n const command = index === 0 ? \"M\" : \"L\";\n return `${acc}${command}${x},${y}`;\n }, \"\");\n\n const attributesString = Object.entries(attributes)\n .map(([key, value]) => `${key}=\"${value}\"`)\n .join(\" \");\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"function coordsToPaths(paths, attributes = {}) {\n return paths.map((d) => makePath(d, attributes));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"function drawIndexes(n, m) {\n return _.range(n).map((d) => _.random(0, m));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2187,"value":"mutable aIndexes = drawIndexes(5, qd.bush.length - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"mutable bIndexes = drawIndexes(5, qd.bush.length - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1346,"value":"t = {\n let t = 0;\n let n = 60;\n let kPrev = 0;\n while (true) {\n t += 1;\n let k = Math.PI * (t / n - 1 / 2);\n if (!((t + n) % (2 * n))) {\n mutable aIndexes = drawIndexes(5, qd.bush.length - 1);\n }\n if (!((t + 0) % (2 * n))) {\n mutable bIndexes = drawIndexes(5, qd.bush.length - 1);\n }\n yield 0.5 + 0.5 * Math.sin(k + Math.cos(k) * Math.sin(k));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"// returns an array of arrays: each one is an array of [x, y] coordinates that makes up one of the lines in the drawing, scaled to fit inside the given bounding box\nfunction getShape(\n names,\n index,\n { xmin = 0, xmax = 1, ymin = 0, ymax = 1 } = {}\n) {\n const shape = _.sample(names);\n const drawing = qd[shape][index];\n const xScale = d3.scaleLinear().domain([0, 255]).range([xmin, xmax]);\n const yScale = d3.scaleLinear().domain([0, 255]).range([ymin, ymax]);\n return _.map(drawing, (coords) =>\n coords.map(([x, y]) => [xScale(x), yScale(y)])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2193,"value":"function makeFaceShapes(indexes) {\n const names = [\"leftEye\", \"rightEye\", \"nose\", \"mouth\", \"head\"];\n const parts = [\n [\"eye\"],\n [\"eye\"],\n [\"nose\"],\n [\"mouth\"],\n [\"square\", \"circle\", \"hexagon\", \"octagon\"]\n ];\n const boxes = [leftEyeBBox, rightEyeBBox, noseBBox, mouthBBox, headBBox];\n const result = {};\n _.zip(names, parts, indexes, boxes).forEach(\n ([name, shapes, i, bbox]) => (result[name] = getShape(shapes, i, bbox))\n );\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2234,"value":"aShapes = makeFaceShapes(aIndexes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2240,"value":"bShapes = makeFaceShapes(bIndexes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2242,"value":"morphers = {\n const result = {};\n for (let key of Object.keys(aShapes)) {\n result[key] = makeMorpher(aShapes[key], bShapes[key]);\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1777,"value":"leftEyeBBox = ({\n xmin: 1,\n xmax: 2,\n ymin: 2,\n ymax: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2196,"value":"rightEyeBBox = ({\n xmin: 2.5,\n xmax: 3.5,\n ymin: 2,\n ymax: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2202,"value":"noseBBox = ({\n xmin: 1.75,\n xmax: 2.75,\n ymin: 2.5,\n ymax: 3.5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2206,"value":"mouthBBox = ({\n xmin: 1.25,\n xmax: 3.25,\n ymin: 3.5,\n ymax: 4.5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2210,"value":"headBBox = ({\n xmin: 0,\n xmax: 5,\n ymin: 0,\n ymax: 5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1875,"value":"
\n\n---\n### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1968,"value":"interp = require(\"d3-interpolate-path@2.3.0/build/d3-interpolate-path.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2083,"value":"function makeMorpher(qdA, qdB) {\n const line = d3.line();\n const dInterpolators = _.zip(qdA, qdB).map(([a, b], i) => {\n return interp.interpolatePath(line(a ? a : \"\"), line(b ? b : \"\"));\n });\n const dInterpolator = (t) => dInterpolators.map((f) => f(t)).join(\" \");\n return {\n d: dInterpolator\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2787,"value":"import { faceInput } from \"@stringertheory/face-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}