29:null 2a:["$","title",null,{"children":"Procedural Face Exploration | Mike Stringer | Observable"}] 2f:T57a,viewof shape = RangeGroup([ [ Range([0, 4], {label: 'm', value: 1.5, format: x => x.toFixed(2)}), Range([-1, 1], {label: 'p', value: 0.2, format: x => x.toFixed(2)}), Range([-1, 1], {label: 'q', value: 0.4, format: x => x.toFixed(2)}), Range([0, 1], {label: 'r', value: 0.5, format: x => x.toFixed(2)}), Range([0, 1], {label: 's', value: 0.5, format: x => x.toFixed(2)}), Range([-10, 10], {label: 'skew', value: -1, format: x => x.toFixed(2)}), Range([-1, 1], {label: 'rotate', value: 0, format: x => x.toFixed(2)}), Range([-1, 1], {label: 'browAngle', value: 0.1, format: x => x.toFixed(2)}), Range([-50, 50], {label: 'browHeight', value: 25, format: x => x.toFixed(2)}), Range([1, 20], {label: 'eyeballSize', value: 10, format: x => x.toFixed(2)}), Range([1, 80], {label: 'eyeHeight', value: 30, format: x => x.toFixed(2)}), Range([0, 20], {label: 'eyeSpacing', value: 6, format: x => x.toFixed(2)}), Range([0, 100], {label: 'eyePosition', value: 70, format: x => x.toFixed(2)}), Range([0, 50], {label: 'eyelashSize', value: 10, format: x => x.toFixed(2)}), Range([1, 30], {label: 'mouthSize', value: 15, format: x => x.toFixed(2)}), ]], [['m', 'p', 'q', 'r', 's', 'skew', 'rotate', 'browAngle', 'browHeight', 'eyeballSize', 'eyeHeight', 'eyeSpacing', 'eyePosition', 'eyelashSize', 'mouthSize']], )30:T4a2,// From http://www.redblobgames.com/x/1845-face-generator/ // Copyright 2015 Red Blob Games // License: Apache v2.0 function redraw(g, w, h, iHeight) { //console.log(iHeight) g.resetTransform() g.clearRect(0, 0, w, h); g.fillStyle = faceColor; g.arc(w/2, h, w/2, 0, 2 * Math.PI); g.fill() g.save(); g.scale(0.75, 0.75); g.scale(2.0, 2.0); g.translate(-100, 20); drawEyebrows(g, Point(200, shape.browHeight)); drawEyeballs(g, Point(200, shape.eyePosition), 50, null, shape.eyeSpacing, shape.eyeballSize, iHeight); g.save(); g.translate(200, 90); g.scale(1.5, 1.5); g.translate(0, 10); g.rotate(shape.rotate * 0.2 * Math.PI); g.translate(0, -10); g.beginPath(); drawMouth(g, shape.mouthSize); g.clip(); drawTeeth(g, Point(0, shape.mouthSize*(1 + 0.5*shape.m)), shape.mouthSize*shape.m, 7, shape.mouthSize*0.5, shape.mouthSize*1); g.strokeStyle = "black"; g.lineWidth = 1.5; g.beginPath(); drawMouth(g, shape.mouthSize); g.stroke(); g.restore(); //g.resetTransform() return g.canvas; }31:T88d,function drawEyeballs(g, center, width, height, spacing, size, iHeight) { g.fillStyle = "white"; g.strokeStyle = "black"; g.lineWidth = 2; g.save(); g.translate(center.x, center.y); g.beginPath(); // Left eyelashes g.moveTo(-width - spacing/2, 0); g.lineTo(-width - spacing/2 - 0.3 * iHeight, -shape.eyelashSize); g.moveTo(-0.9 * width - spacing/2, -0.4 * iHeight); g.lineTo(-0.9 * width - spacing/2 - 0.2 * iHeight, -0.4 * iHeight - shape.eyelashSize); g.moveTo(-0.8 * width - spacing/2, -0.5 * iHeight); g.lineTo(-0.8 * width - spacing/2 - 0.1 * iHeight, -0.5 * iHeight - shape.eyelashSize); g.moveTo(-0.7 * width - spacing/2, -0.55 * iHeight); g.lineTo(-0.7 * width - spacing/2, -0.55 * iHeight - shape.eyelashSize); // Right eyelashes g.moveTo(width + spacing/2, 0); g.lineTo(width + spacing/2 + 0.3 * iHeight, - shape.eyelashSize); g.moveTo(0.9 * width + spacing/2, -0.4 * iHeight); g.lineTo(0.9 * width + spacing/2 + 0.2 * iHeight, - 0.4 * iHeight - shape.eyelashSize); g.moveTo(0.8 * width + spacing/2, -0.5 * iHeight); g.lineTo(0.8 * width + spacing/2 + 0.1 * iHeight, - 0.5 * iHeight - shape.eyelashSize); g.moveTo(0.7 * width + spacing/2, -0.55 * iHeight); g.lineTo(0.7 * width + spacing/2, - 0.55 * iHeight - shape.eyelashSize); g.stroke(); g.beginPath(); // Left eyeball g.moveTo(- width - spacing/2, 0); g.bezierCurveTo(- width - spacing / 2, iHeight, -spacing / 2, iHeight, - spacing / 2, 0); g.bezierCurveTo(- spacing / 2, -iHeight, -width - spacing / 2, -iHeight, - width - spacing / 2, 0); // Right eyeball g.moveTo(spacing/2, 0); g.bezierCurveTo(spacing / 2, iHeight, width + spacing / 2, iHeight, width + spacing / 2, 0); g.bezierCurveTo(width + spacing / 2, -iHeight, spacing / 2, -iHeight, +spacing / 2, 0); g.fill(); g.stroke(); g.save(); g.clip(); g.fillStyle = "black"; g.beginPath(); g.arc(-width/3 - spacing/2, 0, size, 0, 2*Math.PI); g.arc(width/2 + spacing/2, 0, size, 0, 2*Math.PI); g.fill(); // Restore clip g.restore(); // Restore translate g.restore(); } 32:T7ba,function drawMouth(g, scale) { var horizontal = [Point(1, 0), Point(1, 0)]; var Ap = Point(2, (2+shape.m)*shape.s); var Cp = Point(0, 1-shape.p); var Cv = Point(1, -0); var Bp = Point(Cp.x + shape.r, Cp.y + shape.p*shape.r); var Dp = Point(Cp.x - shape.r, Cp.y + shape.p*shape.r); var Bv = Point(1, shape.r); var Dv = Point(1, -shape.r); var Ep = Point(-2, (2+shape.m)*shape.s); var Gp = Point(0, 1+shape.m+shape.q); var Av1 = Point(0.5 * (1-shape.r) * (Cp.x - Ap.x), Cp.y - Ap.y); var Av2 = Point(0.5 * (1-shape.r) * (Ap.x - Gp.x), Ap.y - Gp.y); var Ev1 = Point(0.5 * (1-shape.r) * (Gp.x - Ep.x), Gp.y - Ep.y); var Ev2 = Point(0.5 * (1-shape.r) * (Ep.x - Cp.x), Ep.y - Cp.y); var AC = Point(Cp.x - Ap.x, Cp.y - Ap.y); Bp = intersection(Ap, Av1, Cp, horizontal[0]); Bp.x = 0.25 * Ap.x + 0.5 * Bp.x + 0.25 * Cp.x - 0 * AC.y; Bp.y = 0.25 * Ap.y + 0.5 * Bp.y + 0.25 * Cp.y + 0 * AC.x; Bv = AC; // Draw a curve using endpoints+slopes instead of endpoints+control point function drawCurve(p1, v1, p2, v2) { // Compute the control point var point = intersection(p1, v1, p2, v2); g.quadraticCurveTo(scale * point.x + shape.skew * point.y, scale * point.y, scale * p2.x + shape.skew * p2.y, scale * p2.y); return point; } var pointnames = ["A", "B", "C", "E", "G"]; var points = [Ap, Bp, Cp, Ep, Gp]; var slopes = [[Av1, Av2], [Bv, Bv], [Cv, Cv], [Ev1, Ev2], horizontal]; var controlnames = ["ab", "bc", "d", "f", "h"]; var controls = []; g.moveTo(scale * points[0].x + shape.skew * points[0].y, scale * points[0].y); for (var i = 0; i < points.length; i++) { controls.push(drawCurve(points[i], slopes[i][0], points[(i+1)%points.length], slopes[(i+1)%points.length][1])); } }33:[] 2d:{"id":"f6756c10054f9c93","slug":"procedural-face-exploration","title":"Procedural Face Exploration","thumbnail":"4ae6906c45d5ed36a1a67ec0223930b10110b1c53c58dc8a8c53cc842f6d801a","access_level":"public","create_time":"$D2021-04-22T03:41:10.044Z","update_time":"$D2021-05-05T20:04:34.549Z","view_time":null,"first_public_time":"$D2021-04-22T05:39:14.139Z","has_unpublished_edits":null,"fork":true,"stars":16,"starred":false,"owner":{"type":"team","id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":"starter_2024"},"version":708,"publish_version":708,"role":null,"authored":false,"authors":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null}],"members":[{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null,"role":"editor"}],"comments":[{"id":"0b90b95227dab3d3","reply_to_id":null,"content":"Why browLift? Shouldn't browHeight be sufficient?","create_time":"$D2021-04-24T09:11:12.359Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"91de7f3c1aef3f7f","reply_to_id":"0b90b95227dab3d3","content":"Good catch, thank you! (And thank you also for the other \"pull request\" and other suggestions. I'm still wrapping my head around the best way to communicate through Observable...)","create_time":"$D2021-05-05T20:06:10.367Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"845474becb001208","login":"stringertheory","name":"Mike Stringer","avatar_url":"https://avatars-next.observableusercontent.com/22750d026c52fd24881cb2eb265d03d5cafee7d9b9c7640bc14c1c591e53852f","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"2bb4c46ad0cb53b1","slug":"faces","title":"Faces","owner":{"id":"03c047a4f7c01c7d","login":"stringertheory","name":"Mike Stringer"}},"type":"notebook","body":{"title":"Procedural Face Exploration","cells":[{"id":0,"value":"md`# Procedural Face Exploration\n\nThis is a copy, with only very slight modifications, of the excellent [Procedural Face Generator](https://www.redblobgames.com/x/1845-face-generator/) written by [Amit Patel](https://twitter.com/redblobgames).\n\nI wanted to play around with some of the facial features so I ported it into Observable, but you should check out the original (especially the cool sliders that help understand how changing the parameters will change the face 😍)!\n\nIt's interesting to explore how the face color, eye shape, and the addition of eyelashes change the way the face looks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"face = {\n blink;\n var w = 300;\n var h = 150;\n var g = DOM.context2d(w, h);\n for (let i=shape.eyeHeight; i>=0; i-=(shape.eyeHeight/6)) {\n yield redraw(g, w, h, i)\n }\n for (let i=0; i<=shape.eyeHeight; i+=(shape.eyeHeight/6)) {\n yield redraw(g, w, h, i)\n }\n yield redraw(g, w, h, shape.eyeHeight)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"viewof blink = Button(\"Blink\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"viewof faceColor = color({value: \"#94cdff\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function drawEyebrows(g, center) {\n g.strokeStyle = \"black\";\n g.lineWidth = 3;\n\n g.beginPath();\n g.moveTo(center.x - 50, center.y + 10 * shape.browAngle);\n g.lineTo(center.x - 10, center.y - 10 * shape.browAngle);\n g.moveTo(center.x + 10, center.y - 10 * shape.browAngle);\n g.lineTo(center.x + 50, center.y + 10 * shape.browAngle);\n g.stroke();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function drawTeeth(g, center, spacing, smileWidth, toothWidth, toothHeight) {\n g.fillStyle = \"black\";\n g.fillRect(center.x - toothWidth*smileWidth, center.y - toothHeight - spacing/2,\n toothWidth*smileWidth*2, toothHeight*2 + spacing);\n g.fill();\n\n g.fillStyle = \"white\";\n g.strokeStyle = \"black\";\n g.lineWidth = 0.5;\n g.beginPath();\n for (var i = 0; i < smileWidth; i++) {\n g.rect(center.x + toothWidth*i, center.y - spacing/2 - toothHeight,\n toothWidth, toothHeight);\n g.rect(center.x + toothWidth*i, center.y + spacing/2,\n toothWidth, toothHeight);\n g.rect(center.x - toothWidth*(i+1), center.y - spacing/2 - toothHeight,\n toothWidth, toothHeight);\n g.rect(center.x - toothWidth*(i+1), center.y + spacing/2,\n toothWidth, toothHeight);\n }\n g.fill();\n g.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function intersection(p, u, q, v) {\n var v_cross_u = v.x*u.y - v.y*u.x;\n if (Math.abs(v_cross_u) <= 1e-4) {\n // Lines are parallel, or close to it, so use the midpoint\n return Point(0.5*(p.x+q.x), 0.5*(p.y+q.y));\n }\n\n // Lines are not parallel, so compute the intersection, using the algorithm on\n // http://geometryalgorithms.com/Archive/algorithm_0104/algorithm_0104B.htm\n var w = Point(p.x - q.x, p.y - q.y);\n var v_cross_w = v.x*w.y - v.y*w.x;\n var s = -v_cross_w / v_cross_u;\n return Point(p.x + u.x * s, p.y + u.y * s);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function Point(x, y) { return {x: x, y: y}; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"import {Range, Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"function RangeGroup(views, names) {\n const form = html`

${views.map(\n row =>\n html`

${row.map(\n input =>\n html`

${input}

`\n )}

`;\n\n form.oninput = () => {\n const values = views.map(row => row.map(input => input.value));\n //form.value = values;\n\n form.value = {};\n if (names) {\n names.forEach((row, i) =>\n row.forEach(\n (c, j) => values[i][j] != null && (form.value[c] = values[i][j])\n )\n );\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"