28:null 29:["$","title",null,{"children":"Flow field variations | Claudio Esperança | Observable"}] 2e:Tde3,viewof brushedField = { reset; await visibility(); let field = new GridField(width, height, 15); let cross = crossField(field); let ctx = DOM.context2d(width, height, 1); let canvas = ctx.canvas; let stroke = new Curve(); const refresh = () => { ctx.clearRect(0, 0, width, height); ctx.strokeStyle = "black"; ctx.lineWidth = 0.5; field.draw(ctx); ctx.strokeStyle = "blue"; ctx.lineWidth = 2; drawCurve(ctx, stroke); }; let traceId = null; const traceField = () => { mutable slots[copyBrushedToSlot.value] = field.clone(); mutable slots = mutable slots; // trigger reactivity on slots if (traceId !== null) { clearTimeout(traceId); traceId = null; } ctx.clearRect(0, 0, width, height); ctx.strokeStyle = "black"; let { count, sampling, stepSize, curveLength, curveThick, curveAlpha } = viewof brushedfieldparms.value.line; let sf = sampleFunction(sampling); ctx.strokeStyle = "black"; ctx.lineWidth = curveThick; ctx.globalAlpha = curveAlpha; let batch = 0; const batchSize = 20; let t = Date.now(); let j = 0; let seeds = [...sf(count, width, height)]; const drawBatch = () => { for (;;) { for (let i = 0; i < batchSize; i++) { if (j >= seeds.length) { traceId = null; return; } try { var [x, y] = seeds[j++]; } catch (error) { console.log({ i, j, seeds }); throw error; } const curve = fieldCurve(field, x, y, stepSize, curveLength); drawCurve(ctx, curve); } // Progressive update so we don't hog the CPU if (Date.now() - t > 500) { t = Date.now(); break; } } traceId = setTimeout(drawBatch, 10); }; traceId = setTimeout(drawBatch, 10); }; traceField(); let isDown = false; const getPos = (event) => { var rect = event.target.getBoundingClientRect(); if (event.touches) event = event.touches[0]; var x = event.pageX - rect.left; var y = event.pageY - rect.top; return Vec(x, y); }; const mouseDown = (e) => { e.preventDefault(); stroke = new Curve(getPos(e)); isDown = true; refresh(); }; const mouseMove = (e) => { e.preventDefault(); if (!isDown) return; stroke.push(getPos(e)); refresh(); }; const mouseUp = (e) => { isDown = false; e.preventDefault(); stroke = stroke.resample(stroke.perimeter() / 10); let { brush } = viewof brushedfieldparms.value; let { near, far, hardness } = viewof brushedfieldparms.value.brush; const step = smoothStep(far, near); const weight = (d) => hardness * step(d); brushField(field, stroke, weight); traceField(); canvas.dispatchEvent(new CustomEvent("input")); }; canvas.addEventListener("touchstart", mouseDown, false); canvas.addEventListener("touchmove", mouseMove, false); canvas.addEventListener("touchend", mouseUp, false); viewof brushedfieldparms.addEventListener("input", traceField); canvas.onmousedown = mouseDown; canvas.onmousemove = mouseMove; canvas.onmouseup = mouseUp; invalidation.then(() => { canvas.removeEventListener("touchstart", mouseDown); canvas.removeEventListener("touchmove", mouseMove); canvas.removeEventListener("touchend", mouseUp); viewof brushedfieldparms.removeEventListener("input", traceField); }); canvas.value = field; return canvas; }2f:T570,{ await visibility(); let field = slots[nonIntFieldParms.field]; let trace = new FieldCurveTrace(field); let ctx = DOM.context2d(width, height, 1); let t = Date.now(); let batchSize = 20; let batch = 0; let { count, sampling, stepSize, curveLength, curveThick, curveAlpha } = nonIntFieldParms.line; let { margin, minLengthRatio } = nonIntFieldParms.intAlg; let sf = sampleFunction(sampling); ctx.strokeStyle = "black"; ctx.lineWidth = curveThick; ctx.globalAlpha = curveAlpha; let avoid = nonIntFieldParms.intAlg.enable.length > 0; for (let [x, y] of _.shuffle([...sf(count, width, height)])) { if (avoid) { let curve = trace.sampleCurve( Vec(x, y), stepSize, curveLength, curveThick ); let trim = ~~(margin / stepSize); if (curve.length >= minLengthRatio * curveLength + trim * 2) { trace.markCurve(curve, curveThick + margin); curve = curve.slice(trim, curve.length - trim); drawCurve(ctx, curve); } } else { const curve = fieldCurve(field, x, y, stepSize, curveLength); drawCurve(ctx, curve); } if (batch-- <= 0) { // Progressive update so we don't hog the CPU batch = batchSize; if (Date.now() - t > 100) { t = Date.now(); yield ctx.canvas; } } } yield ctx.canvas; }30:T6c2,{ await visibility(); let field1 = slots[twoFieldParms.field.field1]; let field2 = slots[twoFieldParms.field.field2]; if (twoFieldParms.field.field2Cross.length) field2 = crossField(field2); let color1 = twoFieldParms.field.field1Color; let color2 = twoFieldParms.field.field2Color; let trace = new FieldCurveTrace(field1); let ctx = DOM.context2d(width, height, 1); let t = Date.now(); let batchSize = 20; let batch = 0; let { count, sampling, stepSize, curveLength, curveThick, curveAlpha } = twoFieldParms.line; let { margin, minLengthRatio } = twoFieldParms.intAlg; let sf = sampleFunction(sampling); ctx.lineWidth = curveThick; ctx.globalAlpha = curveAlpha; let avoid = twoFieldParms.intAlg.enable.length > 0; for (let [x, y] of _.shuffle([...sf(count, width, height)])) { const [field, color] = Math.random() > 0.5 ? [field2, color2] : [field1, color1]; ctx.strokeStyle = color; if (avoid) { trace.field = field; let curve = trace.sampleCurve( Vec(x, y), stepSize, curveLength, curveThick ); let trim = ~~(margin / stepSize); if (curve.length >= minLengthRatio * curveLength + trim * 2) { trace.markCurve(curve, curveThick + margin); curve = curve.slice(trim, curve.length - trim); drawCurve(ctx, curve); } } else { const curve = fieldCurve(field, x, y, stepSize, curveLength); drawCurve(ctx, curve); } if (batch-- <= 0) { // Progressive update so we don't hog the CPU batch = batchSize; if (Date.now() - t > 100) { t = Date.now(); yield ctx.canvas; } } } yield ctx.canvas; }31:T67a,{ await visibility(); let field = slots[colorFieldParms.field.field]; let colorField = slots[colorFieldParms.field.colorField]; let trace = new FieldCurveTrace(field); let ctx = DOM.context2d(width, height, 1); let t = Date.now(); let batchSize = 20; let batch = 0; let palette = colorFieldParms.palette; let { count, sampling, stepSize, curveLength, curveThick, curveAlpha } = colorFieldParms.line; let { margin, minLengthRatio } = colorFieldParms.intAlg; let sf = sampleFunction(sampling); ctx.lineWidth = curveThick; ctx.globalAlpha = curveAlpha; let avoid = colorFieldParms.intAlg.enable.length > 0; for (let [x, y] of _.shuffle([...sf(count, width, height)])) { let colorIndex = ~~( (((colorField.getField(x, y) + Math.PI * 2) % (Math.PI * 2)) / (Math.PI * 2)) * palette.length ); ctx.strokeStyle = palette[colorIndex]; if (avoid) { let curve = trace.sampleCurve( Vec(x, y), stepSize, curveLength, curveThick ); let trim = ~~(margin / stepSize); if (curve.length >= minLengthRatio * curveLength + trim * 2) { trace.markCurve(curve, curveThick + margin); curve = curve.slice(trim, curve.length - trim); drawCurve(ctx, curve); } } else { const curve = fieldCurve(field, x, y, stepSize, curveLength); drawCurve(ctx, curve); } if (batch-- <= 0) { // Progressive update so we don't hog the CPU batch = batchSize; if (Date.now() - t > 100) { t = Date.now(); yield ctx.canvas; } } } yield ctx.canvas; }32:T7ad,// // Support for combing fields // function brushField(field, stroke, weight) { let cells = new Map(); let visited = new Set(); let n = stroke.length; const modify = () => { for (let [key, { seed, angle }] of cells) { let [ix, iy] = key.split(",").map((x) => +x); let d = Math.sqrt((seed[0] - ix) ** 2 + (seed[1] - iy) ** 2) * field.cellSize; let alpha = weight(d); //let newAngle = angle * alpha + field.getCell(ix, iy) * (1 - alpha); let newAngle = angleLerp(field.getCell(ix, iy), angle, alpha); field.setCell(ix, iy, newAngle); visited.add([ix, iy].toString()); } }; const propagate = () => { let { nx, ny } = field; let newCells = new Map(); let dist = new Map(); for (let [key, { seed, angle }] of cells) { let [ix, iy] = key.split(",").map((x) => +x); for (let [dx, dy] of [ [-1, -1], [-1, 0], [-1, 1], [1, -1], [1, 0], [1, 1], [0, -1], [0, 1] ]) { let [jx, jy] = [ix + dx, iy + dy]; if (jx >= 0 && jx < nx && jy >= 0 && jy < ny) { let nkey = [jx, jy].toString(); if (visited.has(nkey)) continue; let d = (seed[0] - jx) ** 2 + (seed[1] - jy) ** 2; if (dist.has(nkey) && dist.get(nkey) < d) continue; dist.set(nkey, d); newCells.set(nkey, { seed, angle }); } } } cells = newCells; }; if (n < 2) return; for (let i = 0; i < n; i++) { let p = stroke[i]; let prev = i > 0 ? stroke[i - 1] : p; let next = i + 1 < n ? stroke[i + 1] : p; let v = next.sub(prev).normalize(); let [ix, iy] = field.getCellIndex(p.x, p.y); let key = [ix, iy].toString(); visited.add(key); let angle = Math.atan2(v.y, v.x); cells.set(key, { seed: [ix, iy], angle }); } for (let i = 0; i < width / field.cellSize && cells.size > 0; i++) { modify(); propagate(); } }33:T76f,// // Support for non-intersecting field curves // class FieldCurveTrace { constructor(field) { this.field = field; [this.width, this.height] = [field.width, field.height]; this.collisionCtx = DOM.context2d(field.width, field.height, 1); } empty(p) { let pixel = this.collisionCtx.getImageData(p.x, p.y, 1, 1); let data = pixel.data; return data[3] == 0; } sampleCurve(p, stepLength = 1, numSteps = 2, thick = 1) { let q = p.clone(); let n = numSteps >> 1; let k = thick >> 1; let curve = new Curve(); if (!this.empty(p)) return curve; while (--n > 0) { let angle = this.field.getField(p.x, p.y); let v = Vec(1, 0).rotate(angle).scale(stepLength); p = p.add(v); if (!this.empty(p)) break; let u1 = Vec(1, 0).rotate(angle + Math.PI / 2); let u2 = Vec(1, 0).rotate(angle - Math.PI / 2); let good = true; for (let i = 1; i <= k && good; i++) { good &&= this.empty(p.add(u1.scale(i))) && this.empty(p.add(u2.scale(i))); } if (!good) break; curve.push(p); } curve = curve.reverse(); n = numSteps - (numSteps >> 1); while (--n > 0) { let angle = this.field.getField(q.x, q.y); let v = Vec(-1, 0).rotate(angle).scale(stepLength); q = q.add(v); if (!this.empty(q)) break; let u1 = Vec(-1, 0).rotate(angle + Math.PI / 2); let u2 = Vec(-1, 0).rotate(angle - Math.PI / 2); let good = true; for (let i = 1; i <= k && good; i++) { good &&= this.empty(q.add(u1.scale(i))) && this.empty(q.add(u2.scale(i))); } if (!good) break; curve.push(q); } return curve; } markCurve(curve, thick) { this.collisionCtx.beginPath(); this.collisionCtx.lineWidth = thick; for (let { x, y } of curve) this.collisionCtx.lineTo(x, y); this.collisionCtx.stroke(); } }34:[{"id":"b4965399a4f9e2aa8f6a0d823b36c0e5b6fafb524a97dc29d08b2d5a6619b82da7145a0c723f9981e929d21d35baee8e7f19ff6d2a2c111e41e803572649a09f","href":"https://static.observableusercontent.com/files/b4965399a4f9e2aa8f6a0d823b36c0e5b6fafb524a97dc29d08b2d5a6619b82da7145a0c723f9981e929d21d35baee8e7f19ff6d2a2c111e41e803572649a09f","name":"d.png","type":"image/png","lastModified":1632175679834.777,"size":421055},{"id":"919f8443a13ed2d4d1eaff2131ea5603c9f06455d025d62c74ba8d7d5aa143f17b2c3215c2f03ae8fc77d618d8f668be47a6742b79e6668512cb13f4c7fb935a","href":"https://static.observableusercontent.com/files/919f8443a13ed2d4d1eaff2131ea5603c9f06455d025d62c74ba8d7d5aa143f17b2c3215c2f03ae8fc77d618d8f668be47a6742b79e6668512cb13f4c7fb935a","name":"g.png","type":"image/png","lastModified":1632175679171.668,"size":204616},{"id":"a33a556e7556a9c68914ea30aa70deba11dccf5c9463cd0f6c1921092e7a3f2e11f2d991c9a1902f20af770e45dad65e877d0c84e1404b3e060c356c9963716e","href":"https://static.observableusercontent.com/files/a33a556e7556a9c68914ea30aa70deba11dccf5c9463cd0f6c1921092e7a3f2e11f2d991c9a1902f20af770e45dad65e877d0c84e1404b3e060c356c9963716e","name":"f.png","type":"image/png","lastModified":1632175679109.555,"size":122039},{"id":"b2f59a3c055e4117939e27f58b3a7396a10013252af51f8b53a78f79e873338b8580a9d023a270b6f289a84dc1b584bf777f7686e50d1e565118997b55d59f78","href":"https://static.observableusercontent.com/files/b2f59a3c055e4117939e27f58b3a7396a10013252af51f8b53a78f79e873338b8580a9d023a270b6f289a84dc1b584bf777f7686e50d1e565118997b55d59f78","name":"e.png","type":"image/png","lastModified":1632175678773.2,"size":63293},{"id":"0b3420e991482f8eaa2f2e23a03fbcc1b9196cf909a1a1613a97de0fb70b26b101773290c31d2e2409a0a0ca42ee23820e2cf842aab2e5b0d8b89e2be81e3563","href":"https://static.observableusercontent.com/files/0b3420e991482f8eaa2f2e23a03fbcc1b9196cf909a1a1613a97de0fb70b26b101773290c31d2e2409a0a0ca42ee23820e2cf842aab2e5b0d8b89e2be81e3563","name":"h.png","type":"image/png","lastModified":1632175678932.58,"size":221761},{"id":"8f0da6a9758f411e7d1215aef5ee33dd19453aa05a38ddd3bd9347ae9e172ef7aa4a0a95e16362722bcc6eb90502e11c42f129636fdfed9b94d9be5b06644811","href":"https://static.observableusercontent.com/files/8f0da6a9758f411e7d1215aef5ee33dd19453aa05a38ddd3bd9347ae9e172ef7aa4a0a95e16362722bcc6eb90502e11c42f129636fdfed9b94d9be5b06644811","name":"b.png","type":"image/png","lastModified":1632175679835.43,"size":499091},{"id":"d5b2302da333f0cb22a5b6802af96b7a863418f457e95c1aa94a9ac494d7c6a9860be6990f91e04a3a61a36d76361e83df2c2f40927c676c8a54de375ee57cd0","href":"https://static.observableusercontent.com/files/d5b2302da333f0cb22a5b6802af96b7a863418f457e95c1aa94a9ac494d7c6a9860be6990f91e04a3a61a36d76361e83df2c2f40927c676c8a54de375ee57cd0","name":"c.png","type":"image/png","lastModified":1632175679730.341,"size":408266},{"id":"8c51729dc9c903b6dc141e9281cee7fb2d7512aac8efa11828db0f9cbbdb235c8537bdc5027df6d3cdb6d713a35106b6d2de5bb1374a3333c6a0e8bf21977588","href":"https://static.observableusercontent.com/files/8c51729dc9c903b6dc141e9281cee7fb2d7512aac8efa11828db0f9cbbdb235c8537bdc5027df6d3cdb6d713a35106b6d2de5bb1374a3333c6a0e8bf21977588","name":"a.png","type":"image/png","lastModified":1632175679274.949,"size":232563}] 2c:{"id":"3656a28dff5ef895","slug":"flow-field-variations","title":"Flow field variations","thumbnail":"8a30ac412bd7d717c655c9095331aec0aafdc442d458200c6ddc1976b56f13b3","access_level":"public","create_time":"$D2021-08-22T14:01:41.713Z","update_time":"$D2021-09-25T00:21:00.551Z","view_time":null,"first_public_time":"$D2021-09-20T22:15:11.671Z","has_unpublished_edits":null,"fork":false,"stars":44,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":1034,"publish_version":1034,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":{"id":"cfe04ce599907bfc","slug":"generative-art","title":"Generative Art","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Flow field variations","cells":[{"id":548,"value":"# Flow field variations\n\nHere we exercise a few ideas about rendering flow fields in addition to those already covered in [an earlier notebook](https://observablehq.com/@esperanc/flow-fields).\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"

\n## Brushed fields\n\nWhat if we want to draw the field ourselves? One way to do it is to use the mouse as if it were a comb (or a brush), so that brushstrokes will alter the field within a region of interest. The interface below lets you choose the properties of the brush: *hardness* controls how hard the brush will try to modify the underlying field; *min distance* controls how far from the brush curve the hardness will start to drop, and *max distance* controls how far from the brush curve the hardness becomes zero. Included below is a graph of the shape of the curve so you know what to expect.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof brushedfieldparms = tabbed({\n brush: [\"Brush\", brushInterface()],\n line: [\"Flow line\", flowLineInterface()]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"{\n let { brush } = brushedfieldparms;\n const step = smoothStep(brush.far, brush.near);\n const weight = (d) => brush.hardness * step(d);\n const data = _.range(-width >> 1, width >> 1).map((x) => ({\n distance: x,\n weight: weight(Math.abs(x))\n }));\n return Plot.line(data, { x: \"distance\", y: \"weight\" }).plot({\n y: { domain: [0, 1] },\n height: 150,\n caption: \"Brush profile\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"copyBrushedToSlot = slotInput(1, \"slot\", html`Copy field above to`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"
\n## Simplex noise fields\n\n[Simplex noise](https://en.wikipedia.org/wiki/Simplex_noise) is similar to Perlin noise, but with fewer directional artifacts and, in higher dimensions, a lower computational overhead. The implementation we use here has the added benefit of yielding values within a normalized [-1,1] interval.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"viewof snoiseparms = tabbed({\n noise: [\"Noise \", noiseInterface()],\n line: [\"Flow line\", flowLineInterface()]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof sampleSimplex = {\n await visibility();\n let ctx = DOM.context2d(width, height, 1);\n let {\n count,\n sampling,\n stepSize,\n curveLength,\n curveThick,\n curveAlpha\n } = snoiseparms.line;\n\n let field = (ctx.canvas.value = makeSimplexField(\n width,\n height,\n 10,\n snoiseparms.noise\n ));\n\n mutable slots[copySimplexToSlot.value] = field.clone();\n mutable slots = mutable slots; // trigger reactivity on slots\n\n let sf = sampleFunction(sampling);\n ctx.strokeStyle = \"black\";\n ctx.lineWidth = curveThick;\n ctx.globalAlpha = curveAlpha;\n let batch = 0;\n let batchSize = 20;\n let t = Date.now();\n for (let [x, y] of sf(count, width, height)) {\n const curve = fieldCurve(field, x, y, stepSize, curveLength);\n drawCurve(ctx, curve);\n if (batch-- <= 0) {\n // Progressive update so we don't hog the CPU\n batch = batchSize;\n if (Date.now() - t > 100) {\n t = Date.now();\n yield ctx.canvas;\n }\n }\n }\n\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"copySimplexToSlot = slotInput(2, \"slot\", html`Copy field above to`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"
\n## Field slots\n\nWe may want to experiment with the combination of various fields. That's why you can see the \"Copy the field above to slot\" controls. This means that a copy of the authored field is copied to a separate buffer called \"slot\", so you can use it later. You can use the canvas below to inspect the saved field slots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"viewof slotDisplayControls = tabbed({\n show: [\"Slot\", slotInput(1)],\n line: [\"Line\", flowLineInterface()]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"{\n await visibility();\n let ctx = DOM.context2d(width, height, 1);\n let {\n count,\n sampling,\n stepSize,\n curveLength,\n curveThick,\n curveAlpha\n } = slotDisplayControls.line;\n\n let field = (ctx.canvas.value = slots[slotDisplayControls.show]);\n let sf = sampleFunction(sampling);\n ctx.strokeStyle = \"black\";\n ctx.lineWidth = curveThick;\n ctx.globalAlpha = curveAlpha;\n let batch = 0;\n let batchSize = 20;\n let t = Date.now();\n for (let [x, y] of sf(count, width, height)) {\n const curve = fieldCurve(field, x, y, stepSize, curveLength);\n drawCurve(ctx, curve);\n if (batch-- <= 0) {\n // Progressive update so we don't hog the CPU\n batch = batchSize;\n if (Date.now() - t > 100) {\n t = Date.now();\n yield ctx.canvas;\n }\n }\n }\n\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"
\n## Non-intersecting flow fields\n\nImproved flow fields where flow curves do not intersect each other. The idea is to use a second canvas to keep\ntrack of the parts of the plane not yet occupied. After drawing each line in the primary canvas, stopping whenever an already drawn point is reached, we draw the same line with a thicker line width in the secondary canvas. This way, we can control the margin (separation) between lines. Also, if a line that should be long is trimmed too much for lack of space, we can discard it altogether. You can experiment with these two parameters in the *Intersection* tab below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"viewof nonIntFieldParms = tabbed({\n field: [\"Field\", slotInput(1)],\n intAlg: [\"Intersection\", intersectionInterface()],\n line: [\"Flow line\", flowLineInterface(undefined, { curveThick: 8 })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"
\n## Two fields\n\nHow about plotting two fields at once? You can either use two completely different fields or use the cross-field of the primary field as the second one. Incidentally, a cross-field of a vector field is simply a field where the vectors are turned 90 degrees. For added effect, you can use different colors for each field and turn on the non-intersection feature. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"viewof twoFieldParms = tabbed({\n field: [\n \"Fields\",\n paged({\n field1: slotInput(1, \"First field slot\"),\n field1Color: ColorInput({ value: \"#aabb00\", label: \"First field color\" }),\n field2: slotInput(2, \"Second field slot\"),\n field2Cross: Inputs.checkbox([\"yes\"], { label: \"Cross-field\" }),\n field2Color: ColorInput({ value: \"#2200aa\", label: \"Second field color\" })\n })\n ],\n intAlg: [\n \"Intersection\",\n intersectionInterface(undefined, { margin: 0, minLengthRatio: 0.1 })\n ],\n line: [\n \"Flow line\",\n flowLineInterface(undefined, { sampling: \"random\", curveThick: 4 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"viewof colorFieldParms = tabbed({\n field: [\n \"Fields\",\n paged({\n field: slotInput(1, \"slot of field to draw\"),\n colorField: slotInput(2, \"slot of field to use as color\")\n })\n ],\n palette: [\"Palette\", paletteBuilder()],\n intAlg: [\n \"Intersection\",\n intersectionInterface(undefined, { margin: 0, minLengthRatio: 0.1 })\n ],\n line: [\n \"Flow line\",\n flowLineInterface(undefined, {\n count: 30000,\n sampling: \"poisson\",\n curveThick: 1\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"
\n## Interfaces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"//\n// Interface for noise parameters\n//\nfunction noiseInterface(title, defaults = {}) {\n return paged(\n {\n noiseScale: Inputs.range([0.1, 40], {\n label: \"noise scale\",\n value: defaults.noiseScale || 1,\n step: 0.1\n }),\n noiseOctaves: Inputs.select([1, 2, 3, 4, 5, 6], {\n label: \"octaves\",\n value: defaults.noiseOctaves || 2\n }),\n noiseOffset: Inputs.range([-1, 1], {\n label: \"noise offset\",\n value: defaults.noiseOffset || 0,\n step: 0.01\n }),\n angleScale: Inputs.range([1, 8], {\n label: \"angle scale\",\n value: defaults.angleScale || 1,\n step: 0.1\n })\n },\n title\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"//\n// Interface for flow field line drawing parameters\n//\nfunction flowLineInterface(title, defaults = {}) {\n return paged(\n {\n sampling: Inputs.radio([\"grid\", \"random\", \"poisson\"], {\n label: \"sample function\",\n value: defaults.sampling || \"poisson\"\n }),\n count: Inputs.range([10, 50000], {\n label: \"samples\",\n step: 1,\n value: defaults.count || 5000\n }),\n stepSize: Inputs.range([1, 50], {\n label: \"step size\",\n step: 1,\n value: defaults.stepSize || 4\n }),\n curveLength: Inputs.range([5, 200], {\n label: \"curve length\",\n value: defaults.curveLength || 50,\n step: 1\n }),\n curveThick: Inputs.range([0.1, 40], {\n label: \"curve thickness\",\n value: defaults.curveThick || 1,\n step: 0.1\n }),\n curveAlpha: Inputs.range([0.01, 1], {\n label: \"curve alpha\",\n value: defaults.curveAlpha || 0.8,\n step: 0.01\n })\n },\n title\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"//\n// Interface for selecting brush parameters\n//\nfunction brushInterface(title, defaults = {}) {\n return paged(\n {\n hardness: Inputs.range([0, 1], {\n label: \"hardness\",\n value: defaults.hardness || 1,\n step: 0.01\n }),\n near: Inputs.range([0, width], {\n label: \"min distance\",\n value: defaults.near || 0,\n step: 1\n }),\n far: Inputs.range([0, width], {\n label: \"max distance\",\n value: defaults.far || 100,\n step: 1\n })\n },\n title\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"//\n// Interfaces for parameters that control the intersection avoidance mechanism\n//\nfunction intersectionInterface(title, defaults = {}) {\n return paged({\n enable: Inputs.checkbox([\"yes\"], {\n label: \"Enable intersection avoidance\",\n value: [\"yes\"]\n }),\n margin: Inputs.range([0, 50], {\n label: \"Margin\",\n step: 1,\n value: defaults.margin === undefined ? 2 : defaults.margin\n }),\n minLengthRatio: Inputs.range([0, 1], {\n label: \"Discard line if length ratio less than\",\n value: defaults.minLengthRatio || 0.4,\n step: 0.01\n })\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"//\n// Exhibits a radio button for choosing a field slot\n//\nfunction slotInput(value = 1, label = \"slot\", title) {\n let div = html`
`;\n let input = Inputs.radio([1, 2, 3, 4], {\n label,\n value: value\n });\n div.append(input);\n div.value = input.value;\n input.addEventListener(\"input\", () => {\n div.value = input.value;\n div.dispatchEvent(new CustomEvent(\"input\"));\n });\n if (title) div.prepend(title);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"aspectRatio = window.screen.width / window.screen.height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"//\n// Default height of all canvases\n//\nheight = ~~(width / aspectRatio)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"//\n// Field slots\n//\nmutable slots = {\n let defField = new GridField(width, height, 20);\n return { 1: defField, 2: defField, 3: defField, 4: defField };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"//\n// Smooth Step function from https://en.wikipedia.org/wiki/Smoothstep\n//\nsmoothStep = (edge0, edge1) => {\n return (x) => {\n x = Math.max(Math.min((x - edge0) / (edge1 - edge0), 1.0), 0.0);\n return x * x * (3 - 2 * x);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"//\n// Simplex noise is preferrable to perlin in most cases\n//\nfunction makeSimplexField(width, height, cellSize, options = {}) {\n let {\n noiseScale = 1,\n noiseOctaves = 1,\n noiseOffset = 0,\n seeds = [1, 1],\n angleScale = 4\n } = options;\n let g = new GridField(width, height, cellSize);\n let [seedX, seedY] = seeds;\n let noise = octave(simplex2D, noiseOctaves);\n for (let i of d3.range(g.nx)) {\n for (let j of d3.range(g.ny)) {\n let angle =\n (noiseOffset +\n noise(\n (seedX + i / g.ny) * noiseScale,\n (seedY + j / g.ny) * noiseScale\n )) *\n Math.PI *\n angleScale;\n g.setCell(i, j, angle);\n }\n }\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"//\n// Returns a sampling function given a name\n//\nsampleFunction = function (sampleFunctionName) {\n return sampleFunctionName == \"poisson\"\n ? poissonSampling\n : sampleFunctionName == \"grid\"\n ? gridSampling\n : randomSampling;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"//\n// Makes a copy of field with all angles rotated 90 degrees\n//\nfunction crossField(field) {\n let cross = new GridField(field.width, field.height, field.cellSize);\n for (let i = 0; i < field.nx; i++)\n for (let j = 0; j < field.ny; j++)\n cross.setCell(i, j, field.getCell(i, j) + Math.PI / 2);\n return cross;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"## Experimental code below\n\nComing up on variations II","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"function drawColoredCurve(\n ctx,\n curve,\n segmentColor = (i) => \"black\",\n segmentShape = (i) => 1\n) {\n let up = new Curve();\n let down = new Curve();\n let c = segmentColor(0, curve);\n\n let draw = () => {\n ctx.fillStyle = c;\n ctx.beginPath();\n for (let p of down.concat(up.reverse())) ctx.lineTo(p.x, p.y);\n ctx.closePath();\n ctx.fill();\n };\n let n = curve.length;\n let thick = ctx.lineWidth / 2;\n for (let i = 0; i < curve.length; i++) {\n let prev = curve[Math.max(i - 1, 0)];\n let next = curve[Math.min(i + 1, n - 1)];\n let norm = next\n .sub(prev)\n .normalize()\n .rotate(Math.PI / 2)\n .scale(thick);\n let p = curve[i];\n let nextc = segmentColor(i, curve);\n let [u, d] = [\n p.add(norm.scale(segmentShape(i))),\n p.sub(norm.scale(segmentShape(i)))\n ];\n up.push(u);\n down.push(d);\n if (nextc != c) {\n draw();\n up = new Curve(u);\n down = new Curve(d);\n c = nextc;\n }\n }\n draw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"function colorByArcLen(curve, colors) {\n let q = curve.arcLength();\n let rate = colors.length / q[curve.length - 1];\n return (i) => colors[~~(q[i] * rate)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"function colorByCurvature(curve, colors, exponent = 1, interpolate = false) {\n let curvature = [0];\n let n = curve.length;\n for (let i = 1; i + 1 < n; i++) {\n let u = curve[i].sub(curve[i - 1]).normalize();\n let v = curve[i].sub(curve[i + 1]).normalize();\n curvature[i] = 1 - Math.pow(Math.abs(u.dot(v)), exponent);\n }\n if (n > 1) {\n curvature[0] = curvature[1];\n curvature[n - 1] = curvature[n - 2];\n }\n let ncolors = colors.length;\n if (interpolate) {\n let rate = (1 / (ncolors - 1)) * 1.0000001;\n return (i) => {\n let j = ~~(curvature[i] / rate);\n let t = curvature[i] / rate - j;\n return d3.interpolateHsl(colors[j], colors[j + 1])(t);\n };\n } else {\n let rate = 1 / ncolors;\n return (i) => colors[~~(curvature[i] / rate)];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"function shapeByArcLen(curve, offsets) {\n let q = curve.arcLength();\n let len = q[curve.length - 1];\n let nranges = offsets.length;\n let rate = len / (nranges - 1);\n return (i) => {\n let j = ~~(q[i] / rate);\n let t = q[i] - j * rate;\n return offsets[j] * (1 - t) + offsets[j + 1] * t;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"function shapeByArcLen2(curve, offsets) {\n let q = curve.arcLength();\n let len = q[curve.length - 1];\n let nranges = offsets.length;\n let rate = (len / (nranges - 1)) * 1.00000001;\n return (i) => {\n let j = ~~(q[i] / rate);\n let t = q[i] / rate - j;\n return offsets[j] * (1 - t) + offsets[j + 1] * t;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { Vec, Curve } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"import { color as ColorInput } from \"@esperanc/color-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"import { paletteBuilder } from \"@esperanc/color-palettes-from-one-color\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {\n angleLerp,\n GridField,\n poissonSampling,\n gridSampling,\n randomSampling,\n fieldCurve,\n drawCurve\n} from \"@esperanc/flow-fields\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"import { combo, paged, tabbed } from \"@esperanc/aggregated-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"simplexNoise = require(\"simplex-noise@2.4.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"simplex = new simplexNoise(\"1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"//\n// In case you're wondering, you can't just\n// say simplex2D = simplex.noise2D,\n//\nsimplex2D = (function () {\n function f(x, y) {\n return simplex.noise2D(x, y);\n }\n return f;\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"import { octave } from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"import { harmonicColors, paletteDisplay } from \"@esperanc/color-harmonies\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"