30:T4e4,// // Returns a subdivided curve using Hobbs' algorithm. The pertubartion // parameters are noise functions that return a value between 0 and 1 // * noiseSplit controls the edge subdivision point // * noiseAngle controls the displacement angle with respect to the edge normal // * noiseAmplitude controls the displacement vector size. 1 yields a displacement with the same size // as the edge // function hobbsPerturb( curve, noiseSplit, noiseAngle, noiseAmplitude, moveVertices = false ) { let result = new Curve(); let n = curve.length; let q = curve[curve.length - 1]; for (let i = 0; i < n; i++) { let p = curve[i]; let q = curve[(i + n - 1) % n]; let e = p.sub(q); let mid = q.add(e.scale(noiseSplit())); let displaced = mid.add( e .rotate(-Math.PI / 2 + Math.PI * (noiseAngle() - 0.5)) .scale(noiseAmplitude()) ); result.push(q, displaced); if (moveVertices) { let r = curve[(i + n - 2) % n]; let qdisplaced = q .add(p.sub(r)) .rotate(-Math.PI / 2 + Math.PI * (noiseAngle() - 0.5)) .scale(noiseAmplitude() / 2); result.push(qdisplaced, displaced); } else { result.push(q, displaced); } } return result; }31:[] 2e:{"title":"Splotchify","cells":[{"id":0,"value":"# Splotchify\n\nHere is my take on Tyler Hobbs' method for generating watercolor-like splotches, which you can (and should!) watch in [this video](https://www.youtube.com/watch?v=5R9eywArFTE). \n\nThe main idea is to introduce a noise perturbation on a given polygon many times and alpha blend these. The talk has many more details.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Demo\nLet us see the result of perturbing an octagon. Hobbs' approach is to subdivide each edge randomly pushing the new point outward. The split position, the angle w.r.t. the edge normal and the amplitude of the displacement are all determined by a random function that returns a value between 0 and 1. A splotch is created by a composite of 3 such polygons recursively subdivided 3 times, superimposed with alpha blending. I added an option to resample the polygon after each step in order to obtain edges of uniform length.\n\nIn this notebook, all noise functions are created with a Bates distribution (see explanation in [this nice notebook by @Fil](https://observablehq.com/@d3/d3-random), i.e., the mean of *n* numbers drawn independently from a uniform distribution. Its only parameter is *n* and its value is close to 1/2 as n increases. In particular, *n*=1 is equivalent to a uniform distribution.","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"

\n ${viewof splitDraws}\n ${viewof angleDraws}\n ${viewof amplitudeDraws}\n ${viewof amplitudeScale}\n ${viewof layers}\n ${viewof corePerturb}\n ${viewof layerPerturb}\n ${viewof useResample}\n ${viewof alpha}\n ${viewof color}\n

\n ","pinned":false,"hidden":false,"mode":"html"},{"id":237,"value":"viewof refresh = Inputs.button(\"resplotchify\", { label: \"new splotch\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"{\n let sz = 500;\n let ctx = DOM.context2d(sz, sz);\n ctx.fillStyle = color;\n ctx.globalAlpha = alpha;\n ctx.save();\n let orig = poly.resample(perturbed[0].length, true);\n let anchor = perturbed[0][0];\n let k = 0,\n mind = Number.MAX_VALUE;\n for (let i = 0; i < orig.length; i++) {\n let d = orig[i].dist(anchor);\n if (d < mind) [k, mind] = [i, d];\n }\n orig = orig.slice(k).concat(orig.slice(0, k));\n let n = 10;\n for (let i = 0; i < n; i++) {\n ctx.restore();\n ctx.clearRect(0, 0, sz, sz);\n ctx.save();\n ctx.scale(sz / 6, sz / 6);\n ctx.translate(3, 3);\n for (let pert of perturbed) {\n ctx.beginPath();\n pert.forEach((p, j) => {\n let { x, y } = orig[j].mix(p, i / (n - 1));\n ctx.lineTo(x, y);\n });\n ctx.closePath();\n ctx.fill();\n }\n yield ctx.canvas;\n }\n ctx.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"poly = {\n let poly = new Curve();\n for (let i = 0; i < 8; i++) {\n poly.push(Vec(1, 0).rotate((i / 8) * Math.PI * 2));\n }\n return poly;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"perturbed = {\n refresh;\n let list = [];\n let base = poly;\n let initialChaikin = useResample.includes(\"initial\");\n for (let i = 0; i < corePerturb; i++) {\n base = hobbsPerturb(base, noiseSplit, noiseAngle, noiseAmplitude);\n if (initialChaikin) base = base.resample(base.length, true); //base.chaikin(true);\n }\n let layerChaikin = useResample.includes(\"layers\");\n for (let j = 0; j < layers; j++) {\n let result = base;\n for (let i = 0; i < layerPerturb; i++) {\n result = hobbsPerturb(result, noiseSplit, noiseAngle, noiseAmplitude);\n if (layerChaikin) result = result.resample(result.length); //result.chaikin(true);\n }\n list.push(result);\n }\n return list;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"## Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"viewof splitDraws = Inputs.range([1, 10], {\n label: \"Edge split noise n\",\n step: 1,\n value: 2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof angleDraws = Inputs.range([1, 10], {\n label: \"Angle noise n\", step:1,\n value: 2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof amplitudeDraws = Inputs.range([1, 10], {\n label: \"Amplitude noise n\", step:1,\n value: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof amplitudeScale = Inputs.range([0.01, 2], {\n label: \"Amplitude scale\",\n value: 1,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof layerPerturb = Inputs.range([0, 10], {\n label: \"Additional perturbation steps per layer\",\n step: 1,\n value: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof layers = Inputs.range([1, 100], { label: \"layers\", value: 20, step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof corePerturb = Inputs.range([1, 10], {\n label: \"Initial perturbation steps\",\n step: 1,\n value: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof useResample = Inputs.checkbox([\"initial\", \"layers\"], {\n label: \"Perturbations followed by arc length resampling?\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof alpha = Inputs.range([0.01, 1], {\n label: \"Transparency\",\n value: 0.02,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof color = ColorInput({ value: \"#ff0000\", label: \"color\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"## The noise functions","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"noiseSplit = d3.randomBates(splitDraws)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"noiseAngle = d3.randomBates(angleDraws)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"noiseAmplitude = {\n const noise = d3.randomBates(amplitudeDraws);\n return () => 2 * amplitudeScale * Math.abs(noise() - 0.5);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"import { Curve, Vec } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"import { color as ColorInput } from \"@esperanc/color-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}