31:T898,viewof gif = { const gif = new GIF(); const height = 700; const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); canvas.style.filter = filter; const curve = d3.curveNatural, xLimit = width * 0.5, pad = 1, // How tall mountains are, 450 = cool heightAmplifier = 450; const { xDelta, yDelta, yDeltaMax, waveChange, showAnimation, backgroundColor } = valuesDelta; const line = d3 .line() .context(ctx) .defined((d) => d[0] > xLimit) .curve(curve), zone = d3 .area() .context(ctx) .y1((d) => d[1] - pad) .y0(height) .curve(curve), area = d3.area().context(ctx).curve(curve), color = d3.scaleSequential(colors).domain([0, height]), color2 = d3.scaleSequential(colors2).domain([0, height]); ctx.save(); canvas.style.filter = filter; ctx.canvas.style.filter = filter; // ctx.strokeStyle = 'black'; // ctx.fill(); let pointsPersist = []; let difference = 0; let colorBool = -1; let colorScale = color; let delta = (yDeltaMax - yDelta) / 2; for (let y = height; y >= 0; y -= delta) { const points = d3.range(0, width, xDelta).map((x) => { difference += 1; return [x, y + heightAt(x, y) * heightAmplifier]; }); if (delta <= yDelta) { colorScale = color; colorBool = waveChange; } else if (delta >= yDeltaMax) { colorScale = color2; colorBool = -waveChange; } ctx.beginPath(); ctx.fillStyle = colorScale(y); // pointsPersist.push(points); zone(points); ctx.fill(); delta = delta + colorBool; // ctx.beginPath(); // line(points); // ctx.stroke(); ctx.beginPath(); area(points); ctx.clip("evenodd"); gif.addFrame(canvas, { copy: true, delay: 1, quality: 1 }); if (showAnimation) yield ctx.canvas; } ctx.save(); ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, width, height); ctx.restore(); // ctx.fillStyle = "white"; // ctx.fillText("Thanks for watching!", 10, height - 15); canvas.value = new Promise((resolve) => gif.on("finished", resolve)); gif.render(); yield canvas; }32:[] 2f:{"title":"Noise mountain generator [WIP]","cells":[{"id":0,"value":"md`# Noise mountain generator [WIP]\n\nFirst, check out Victor Felder’s [original notebook](https://observablehq.com/@vhf/hidden-line-removal). Below we produce a similar output by clipping the context to a [d3.area](https://github.com/d3/d3-shape#areas) representing the region above each line. As the context is never restored, the region authorized for drawing only shrinks, ensuring that all the horizon lines are respected.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"viewof scale = select({\n options: Object.keys(scales),\n value: \"oranges\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"viewof scale2 = select({\n options: Object.keys(scales).reverse(),\n value: \"rdBu\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"viewof valuesDelta = columns({\n xDelta: number({\n min: 0.01,\n max: 100,\n step: 0.05,\n value: 4,\n title: \"xDelta\"\n }),\n yDelta: number({\n min: 0.01,\n max: 100,\n step: 0.05,\n value: 2.05,\n title: \"yDelta Min\"\n }),\n yDeltaMax: number({\n min: 0.01,\n max: 100,\n step: 0.05,\n value: 5,\n title: \"yDelta Max\"\n }),\n waveChange: number({\n value: 1,\n title: \"Wave Change\"\n }),\n showAnimation: checkbox({\n description: \"Animate? (May be slow if many waves are drawn)\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"\"\n }),\n backgroundColor: color({\n value: \"#e9f0fb\",\n title: \"Background Color\",\n description: \"This color picker starts out blue\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof values = columns({\n altitude: slider({\n min: 0.001,\n max: 0.1,\n step: 0.005,\n value: 0.01,\n title: \"Altitude\"\n }),\n octaves: slider({\n min: 1,\n max: 5,\n step: 1,\n value: 2,\n title: \"Octaves\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"seed = 4 // Date.now()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1538,"value":"// html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"// DOM.download(gif)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"filter = {\n const svg = ``;\n\n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n //return url;\n\n const filter = `url('${url}#gooey')`;\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"heightAt = (x, y) => {\n // courtesy of https://cmaher.github.io/posts/working-with-simplex-noise/\n let maxAmp = 0;\n let amp = 1;\n let altitude = values.altitude;\n let noise = 0;\n\n for (let i = 0; i < values.octaves; ++i) {\n noise += noise2D(x * altitude, y * altitude) * amp;\n maxAmp += amp;\n amp *= 0.5;\n altitude *= 2;\n }\n noise /= maxAmp;\n\n return noise * 0.5 + 0.5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"colors = scales[scale]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"colors2 = scales[scale2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"import { scales } from '@makio135/give-me-colors'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"import { slider, select, number, checkbox, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"makeNoise2D = {\n const OSN = await require('https://bundle.run/open-simplex-noise@2.2.0');\n return OSN.makeNoise2D;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"noise2D = makeNoise2D(seed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"GIF = {\n const [gif, workerScript] = await Promise.all([\n require(\"gif.js@0.2\"),\n require\n .resolve(\"gif.js@0.2/dist/gif.worker.js\")\n .then(fetch)\n .then(response => response.blob())\n .then(blob => URL.createObjectURL(blob, { type: \"text/javascript\" }))\n ]);\n return class extends gif {\n constructor(options) {\n super({ workerScript, ...options });\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}