31:T46d,genBlobPoints = (key) => { let polySides = Math.floor(rng(`${key}-polySides`, [5, 8])); let angleStep = (Math.PI * 2) / polySides; let controlLengthScale = rng(`${key}-controlLengthScale`, [0.2, 0.3]); let controlLength = circleRadius * controlLengthScale; let fr = (a) => rng(`${key}-pointRadius-${a}`, [ circleRadius * 0.8, circleRadius ]); let fx = (a) => Math.cos(a) * fr(a) + circleRadius; let fy = (a) => Math.sin(a) * fr(a) + circleRadius; let points = []; let prevPoint = { x: fx(0), y: fy(0), a: 0 }; let angles = []; for (let a = 0; a <= Math.PI * 2; a += angleStep) { angles.push(a); } angles.pop(); angles.push(angles[0]); for (let a of angles) { let x = fx(a); let y = fy(a); let x1 = prevPoint.x + Math.cos(prevPoint.a + Math.PI / 2) * controlLength; let y1 = prevPoint.y + Math.sin(prevPoint.a + Math.PI / 2) * controlLength; let x2 = x - Math.cos(a + Math.PI / 2) * controlLength; let y2 = y - Math.sin(a + Math.PI / 2) * controlLength; prevPoint = { x, y, a }; points.push({ x, y, a, x1, y1, x2, y2 }); } return points; }32:[] 2f:{"title":"Avatar Blobs","cells":[{"id":0,"value":"# Avatar Blobs","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Some sketches for potential automatically generated avatars.\n\nChange the seed to get more colors! ","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"viewof inputSeed = Inputs.text({ label: \"Random Seed\", value: \"Observable\" })\n// viewof inputSeed = Inputs.number({ label: \"Random Seed\", value: 1 })\n\n// inputSeed = {\n// while (true) {\n// yield new Date();\n// await Promises.delay(5000);\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof circleRadius = Inputs.range([10, 200], {label: \"Circle Radius\", value: 100, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof gradientScale = Inputs.range([0.1, 3], {\n label: \"Gradient Scale\",\n value: 1,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof gradientOffset = Inputs.range([0, 2.0], {\n label: \"Gradient offset\",\n step: 0.1,\n value: 0.9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html`

\n ${genBlob('1')}\n ${genCircle('1')}\n ${genTeardrop('1')}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Inspiration\n\n- https://gradient-avatar.glitch.me/\n- https://observablehq.com/@daformat/drawing-blobs-with-svg\n- https://bottosson.github.io/posts/colorpicker/\n- https://observablehq.com/@mjbo/perceptually-uniform-color-models","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"genSvgGradient = (key) => {\n let [c1, c2] = genColorPair(`${key}-colors`);\n\n let angle = rng(`${key}-center`, [-Math.PI, Math.PI]);\n let cx = (Math.cos(angle) * gradientOffset * gradientScale) / 2 + 0.5;\n let cy = (Math.sin(angle) * gradientOffset * gradientScale) / 2 + 0.5;\n\n let gradientData = okhslGradient(c1, c2);\n let swatchClass1 = c1.l < 0.45 ? \"swatch swatch-dark-bg\" : \"swatch\";\n let swatchClass2 = c2.l < 0.45 ? \"swatch swatch-dark-bg\" : \"swatch\";\n\n let gradientSize = gradientScale * circleRadius;\n let gradientId = `gradient-${key}`;\n let gradient = svg`\n ${gradientData.map(\n ({ color, offset }) =>\n svg``\n )}\n `;\n\n return {gradientId, gradient, gradientData, colors: [c1, c2]};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"genBlobPath = (key) => {\n let points = genBlobPoints(key);\n let pathData = `M${points[0].x},${points[0].y} `;\n for (let p of points) {\n pathData += `C${p.x1},${p.y1} ${p.x2},${p.y2} ${p.x},${p.y} `;\n }\n pathData += \"Z\";\n return pathData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"genCircle = (key) => {\n let {colors, gradient, gradientData, gradientId} = genSvgGradient(key);\n\n return html`

${key}

\n \n ${makeSwatches({ gradientData, colors })}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"genTeardrop = (key) => {\n let {colors, gradient, gradientData, gradientId} = genSvgGradient(key);\n let smallRadius = circleRadius * 0.25;\n let pathData = `\n M 0,${circleRadius}\n a ${circleRadius} ${circleRadius} 90 0 1 ${circleRadius},${-circleRadius}\n a ${circleRadius} ${circleRadius} 90 0 1 ${circleRadius},${circleRadius}\n a ${circleRadius} ${circleRadius} 90 0 1 ${-circleRadius},${circleRadius}\n l ${smallRadius - circleRadius},0\n a ${smallRadius} ${smallRadius} 90 0 1 ${-smallRadius},${-smallRadius}\n Z\n `;\n\n return html`

${key}

\n \n ${makeSwatches({ gradientData, colors })}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"makeSwatches = ({ gradientData, colors }) => {\n let swatchClass1 = colors[0].l < 0.45 ? \"swatch swatch-dark-bg\" : \"swatch\";\n let swatchClass2 = colors[1].l < 0.45 ? \"swatch swatch-dark-bg\" : \"swatch\";\n \n return html`\n

${circleRadius > 80 ? displayOkhsl(colors[0]) : \"\"}

${circleRadius > 80 ? displayOkhsl(colors[1]) : \"\"}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"genBlob = (key) => {\n let {colors, gradient, gradientData, gradientId} = genSvgGradient(key);\n let pathData = genBlobPath(key);\n\n return html`

${key}

\n \n ${makeSwatches({ gradientData, colors })}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"okhslGradient = (c1, c2, { steps = 11, exp = 1 } = {}) => {\n let c1Mod = {...c1};\n let c2Mod = {...c2};\n\n if (Math.abs(c1Mod.h - c2Mod.h) > 180) {\n if (c1Mod.h > c2Mod.h) {\n c1Mod.h -= 360;\n } else {\n c2Mod.h -= 360;\n }\n }\n \n return Array.from({ length: steps })\n .map((_, idx) => d3.interpolate(c1Mod, c2Mod)(Math.pow(idx / (steps - 1), exp)))\n .map((color) => ({...color, h: (color.h < 0 ? color.h + 360 : color.h) % 360}))\n .map((color, idx) => ({ color, offset: idx / (steps - 1) }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"cssGradientSteps = (gradient) =>\n gradient\n .map(({ color, offset }) => `${toCss(color)} ${(offset * 100).toFixed(2)}%`)\n .join(\", \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"displayOkhsl = (c) =>\n html`

okhsl({\\n  h: ${c.h.toFixed(0)},\\n  s: ${c.s.toFixed(\n    2\n  )},\\n  l: ${c.l.toFixed(2)}\\n})

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"genColorPair = (key) => {\n let c1 = culori.okhsl({\n h: rng(`${key}-0`, [0, 360]),\n s: rng(`${key}-1`, [0.6, 1.0]),\n l: rng(`${key}-2`, [0.5, 0.8])\n });\n let c2 = culori.okhsl({\n h: (c1.h + (rng(`${key}-3`, [45, 120]))) % 360,\n s: clamp(c1.s + rng(`${key}-4`, [-0.2, 0.2])),\n l: clamp(c1.l + rng(`${key}-5`, [-0.2, 0.2]), [0.3, 0.9])\n });\n return [c1, c2];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"clamp = (v, [min, max] = [0, 1]) => \n v < min ? min : v > max ? max : v","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"toCss = (c) => culori.formatRgb(culori.rgb(c)).replace(/ /g, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"rng = (key, [min, max] = [0, 1]) => {\n let hashed = sha3(`${inputSeed}::${JSON.stringify(key)}`);\n let val = parseInt(hashed.slice(0, 12), 16);\n let div = Math.pow(2, 48);\n let r = val / div;\n return r * (max - min) + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"culori = require(\"culori@2.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"sha3 = (await require('js-sha3')).sha3_256","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}