31:T731,generate = function(shader, dims, control) { const { center, size, resolution: N } = dims; const [x0, y0] = center; const [dx, dy] = size; const array = (size, mapper) => [...Array(size)].map((_, i) => mapper(i)); const map = (size, value) => array(size, _ => array(size, _ => value)); const defColor = sand(0.8); const sunVector = [-Math.cos(sunElevation), Math.sin(sunElevation)]; const shading = { shadow: 0.8, ambient: 0.3, sunVector }; const params = { shader, shading, defColor }; const step = 32; const ys = array(N, i => y0 - dy / 2 + i * (dy / N)); return async function*() { const never = new Promise(_ => null); let allow = control.next(); let generation = never; let gdata, rdata, palette; const nextRow = index => new Promise(resolve => { if (index < N) { const x = x0 - dx / 2 + index * (dx / N); const row = generateRow(x, ys, 1, palette, params); gdata.heightmap[index] = row.heightRow; gdata.colormap[index] = row.colorRow; resolve({ value: index + 1 }); } }); while (true) { const res = (await Promise.race([allow, generation])).value; if (typeof res == 'boolean') { allow = control.next(); if (!res) { gdata = rdata = null; generation = never; } else if (!gdata) { palette = Palette(1); const gi = palette.add(defColor); gdata = { heightmap: map(N, 0), colormap: map(N, gi), palette }; rdata = { heightmap: { data: gdata.heightmap, ratio: 1 }, colormap: { data: gdata.colormap, palette: palette.colors() } }; generation = nextRow(0); } } else { if (res % step == 0) yield rdata; generation = nextRow(res); } } }; }32:T4a6,test = (p, s = 1) => { const terrain = (p) => terrain3(p, s / 2, 100); const g4 = G(p, s * 4); const v4 = V(g4, s * 2); const g16 = G(p, s * 16); const v16 = V(g16, s * 2); const h = terrain(g16)[0]; const h4 = terrain(G(p, s * 4))[0]; let hills = terrain(p); // Vegetation / rocks let f = [0]; if (params.rocks) if (h > 30 && Math.abs(hills[0] - terrain(g4)[0]) > 4) f = Max(f, rocks2(p, s * 20)); if (params.grass) if (h > 1) f = Max(f, short_grass(p)); if (params.bushes) if (h > -1 && h < 20 && v16 > 0.4) f = Max(f, bush2(p, s * 16)); if (params.hardwood) if (h4 > 2 && h4 < 80 && sl(N(G(p, 4), 1)) ** 0.3 > 0) { f = Max(f, [ (7 + 7 * V(p, 4) + 3 * N(p, 50) - D2(p, 4) * 25) * sl(N(p, 1)) ** 0.3, green(0.15 + V(p, 4) / 8) ]); } if (params.cypress) if (h > 70 && h < 90 && v4 > 0.8) f = Max(f, cypress2(p, s * 4)); if (params.rocks2) if (h > -2 && h < 5 && V(G(p, s * 10), s * 2) > 0.9) f = Max(f, rocks2(p, s * 10)); Add(hills, f); // Water let w = water(p); if (params.waterlilies) if (h > -5 && h < 0 && v16 > 0.8) w = Add(w, waterlilys(p, s)); return Max(w, hills); }33:[] 2f:{"title":"Voronoi procgen \"shaders\"","cells":[{"id":0,"value":"md`# Voronoi procgen \"shaders\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3360,"value":"md`Loving both mathematics and procedural generation, I'm always looking for algorithms that can create apparent organized complexity, and especially landscapes, out of a few random values. I've already played with [spatial subdivision](https://observablehq.com/@ehouais/heightmap-generation-using-spatial-subdivision-algorith), [the diamond-square algorithm](https://observablehq.com/@ehouais/heightmap-generation-using-diamond-square-algorithm), [inverse distance interpolation](https://observablehq.com/@ehouais/heightmap-generation-using-inverse-distance-weighting-in), and [other](https://observablehq.com/@ehouais/heightmap-generation-by-bell-shaped-functions-accumulati) [algorithms](https://js1k.com/2015-hypetrain/demo/2324).\n\nIn this notebook, I will generate various landscape heightmaps from a single set of 2D points, using 3 intermediary precomputed samples: a Voronoi, the corresponding distance field, and a cheap noise.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5903,"value":"dot`digraph imageLoading {\n rankdir = \"LR\"\n node [\n fontname = \"Arial\"\n fontsize = 10\n shape = \"record\"\n ]\n edge [\n fontname = \"Arial\"\n fontsize = 10\n ]\n\n \"random\\ngenerator\\npoints\" -> \"sampler\"\n \"sampler\" [shape = \"circle\"]\n \"sampler\" -> \"Voronoi sample\" -> \"shader\"\n \"sampler\" -> \"Voronoi distance\\nfield sample\" -> \"shader\"\n \"sampler\" -> \"cheap\\nnoise sample\" -> \"shader\"\n \"shader\" [shape = \"circle\"]\n \"renderer\" [shape = \"circle\"]\n \"shader\" -> \"heightmap\" -> \"renderer\" -> \"explorable\\nview\"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5908,"value":"md`All results can be largely improved by using more complex data structures and more powerful technologies, but the main fun of it (for me at least) is to taylor the most compact algorithms and structures, so that a minimalistic demo of the algorithm could fit in a [JS1K](https://js1k.com)-compliant 1KB entry.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5345,"value":"md`## About heightmaps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5364,"value":"md`I like to use [heightmaps](https://en.wikipedia.org/wiki/Heightmap) rather than full 3D meshes because they are structures both very simple and very versatile.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5405,"value":"md`I've already used them to render and explore remarkable [terrestrial](https://observablehq.com/@ehouais/heightmap-rendering-using-a-floorcasting-algorithm) and [martian](https://observablehq.com/@ehouais/korolev-crater) landmarks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5409,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5370,"value":"md `Of course, a simple ${tex`z = f(x, y)`} function sometimes just isn't the right tool, and that's why the majestic [Pont d'Arc natural bridge](https://en.wikipedia.org/wiki/Pont_d%27Arc) on the Ardèche river in France is [not so gloriously](https://earth.google.com/web/@44.38224348,4.41368216,87.71187402a,361.05807011d,35y,-80.09118877h,88.36509882t,0r) rendered in Google Earth.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5388,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5499,"value":"md `## Generator points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5496,"value":"md`Let's first generate ${\n generators.length\n} random generator points in the ${tex`[0,${size[0]})×[0,${size[0]})`} sampling space. Note that **these coordinates are the only random values in this notebook**, all the other values being deterministically derived from this base set. If you refresh the following cell, all heightmaps will be regenerated accordingly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"generators = [...Array(100)].map(_ => [\n size[0] * Math.random(),\n size[1] * Math.random()\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5376,"value":"md`## Precomputed samples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"size = [512, 512]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3374,"value":"md`We then precompute three ${size[0]}×${size[1]} samples in one pass. The nearest generator is determined so that the sampling cycles seamlessly across its borders.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10641,"value":"sampleAlgo = function(array2D, range) {\n const { x, y } = this.thread;\n const [min, max] = range;\n const h = array2D[y][x];\n return Math.min(max, Math.max(min, h));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof sampling = {\n const [W, H] = size;\n const [W2, H2] = [W / 2, H / 2];\n const nbGens = generators.length;\n const { bar, set, dispatch } = viewofProgressBar(`Generating sampling`, W);\n\n const S = [];\n let [maxD, maxN] = [-Infinity, -Infinity];\n\n for (let i = 0; i < W; i++) {\n S[i] = [];\n\n for (let j = 0; j < H; j++) {\n let [v, d, n] = [0, [0, 0, +Infinity], 0];\n\n for (let g = 0; g < nbGens; g++) {\n const [X, Y] = generators[g];\n let [dx, dy] = [X - i, Y - j];\n dx = dx > W2 ? dx - W : dx < -W2 ? dx + W : dx;\n dy = dy > H2 ? dy - H : dy < -H2 ? dy + H : dy;\n const d2 = dx * dx + dy * dy;\n if (d2 < d[2]) {\n d = [dx, dy, d2];\n v = g;\n }\n n += Math.exp((-d2 * 100) / (W * H));\n }\n\n S[i][j] = [v, d, n];\n maxD = Math.max(maxD, d[2]);\n maxN = Math.max(maxN, n);\n }\n\n if (i % 10 == 0) {\n set(i);\n yield bar;\n }\n }\n\n set(W);\n dispatch({ S, maxD, maxN });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5380,"value":"sideview(\n p => [0, sand(V(p))],\n md`### Voronoi\nVoronoi diagrams are extremely useful in many situations, but they are especially fascinating for the organic-like complexity they produce out of a few generator points. A [Voronoi sampling](https://observablehq.com/@ehouais/discrete-voronoi-diagrams-generation-strategies) (or discrete Voronoi field) is a grid sampling of a voronoi diagram, where each sample stores a value identifying the nearest generator.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6404,"value":"sideview(\n p => [0, sand(D(p))],\n md`### Voronoi distance field\nThe Voronoi distance field is the function ${tex`f(x,y)`} that returns the distance ${tex`(dx,dy)`} from the point ${tex`(x,y)`} to the nearest generator point. It is a cheap derivative from the Voronoi computation. ${tex`(x,y) \\to \\sqrt{{dx_{(x, y)}}^2 + {dy_{(x, y)}}^2}`} is shown on the left.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6250,"value":"sideview(\n (p) => [0, sand(N(p))],\n md`### Cheap noise\nThis [cheap noise](https://observablehq.com/@ehouais/heightmap-generation-by-bell-shaped-functions-accumulati) is the function \n${tex`(x,y) \\to \\displaystyle\\sum_{i}e^{-Kd^2_i}`} (where ${tex`d_i`} is the distance from the point ${tex`(x,y)`} to the generator *i*). \nIt is also a cheap derivative from the Voronoi computation.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6277,"value":"md`## User space to sample space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10245,"value":"md`To generate heightmaps larger than the sample size, we must map user space ${tex`\\mathbf{R}^2`} coordinates to ${tex`\\{0,1,...,${size[0] -\n 1}\\}*\\{0,1,...,${size[1] - 1}\\}`} sample space coordinates.\n\nThe following simple mapper function implements such a mapping, allowing to specify a scaling factor:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10255,"value":"mapper = ([x, y], s) => {\n const mod = (val, size) => {\n const m = (val | 0) % size;\n return m < 0 ? m + size : m;\n };\n return [mod(x * s, size[0]), mod(y * s, size[1])];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6279,"value":"md`Then we can access sample values from anywhere in user space, using the following utility functions that make use of the mapper (sample values are all mapped to the ${tex`[0,1]`} interval):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8299,"value":"md`The ${tex`V(p, s)`} function provides the canonical identifier for the Voronoi zone of point ${tex`p`} at scale ${tex`s`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6004,"value":"V = (p, s = 1) => {\n const [xs, ys] = mapper(p, s);\n return sampling.S[xs][ys][0] / generators.length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8303,"value":"md`The ${tex`N(p, s)`} function provides the noise value for point ${tex`p`} at scale ${tex`s`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6009,"value":"N = (p, s = 1) => {\n const [xs, ys] = mapper(p, s)\n return sampling.S[xs][ys][2]/sampling.maxN\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8117,"value":"md`For the distance field, we provide: \n* ${tex`D_2: (x,y) \\to {dx_{(x, y)}}^2 + {dy_{(x, y)}}^2`}\n* ${tex`D: (x,y) \\to \\sqrt{D_2(x, y)}`}\n* ${tex`D_{xy}: (x,y) \\to (dx_{(x, y)}, dy_{(x, y)})`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6008,"value":"D2 = (p, s = 1) => {\n const [xs, ys] = mapper(p, s)\n return sampling.S[xs][ys][1][2]/sampling.maxD\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8105,"value":"D = (p, s = 1) => Math.sqrt(D2(p, s))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8676,"value":"Dxy = (p, s = 1) => {\n const [xs, ys] = mapper(p, s);\n return sampling.S[xs][ys][1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3568,"value":"md`## Color helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5518,"value":"md`We define some constants and functions that make it easier to manipulate colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5039,"value":"BLUE = [0, 200, 215]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5019,"value":"SAND = [252, 235, 190]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5021,"value":"GREEN = [105, 210, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5044,"value":"GREY = [255, 255, 255]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5525,"value":"md`Then following shading functions compute a RGB shade out of a base color and a [0, 1] float.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5130,"value":"shades = ([r, g, b]) => (s = 1) => [r*s|0, g*s|0, b*s|0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5141,"value":"blue = shades(BLUE)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6506,"value":"colorRamp(50, i => blue(i/50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5145,"value":"sand = shades(SAND)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6509,"value":"colorRamp(50, i => sand(i/50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5150,"value":"green = shades(GREEN)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6512,"value":"colorRamp(50, i => green(i/50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5154,"value":"grey = shades(GREY)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5578,"value":"colorRamp(50, i => grey(i/50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6901,"value":"md`(yes, these are 50 shades of grey)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5542,"value":"md`Finally, the following function cycles through the predefined colors with a period 1.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5038,"value":"color = ((...colors) => s => colors[s%1*colors.length|0])(BLUE, SAND, GREEN, GREY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8310,"value":"colorRamp(50, i => color(i / 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6296,"value":"md`## Heightmap generation and visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6300,"value":"md`What I call a procgen 'shader' is a function ${tex`S(p) \\to (height, color)`} that takes a 2D point ${tex`p(x,y)`} in user space and returns the height and color of the corresponding cell in the result heightmap.\n\nThe generation procedure takes such a function and the desired resolution, and generates the heightmap one row at a time. A first pass generates height and color using the shader function, and the second pass applies simple shading and shadowing according to the following sun elevation angle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6158,"value":"sunElevation = 40 * (τ / 360)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9622,"value":"generateRow = (x, y_, dy, palette, params) => {\n // 1st pass: compute n×[height, color] from shader\n const { shader, defColor } = params;\n const min = ([h, c]) => (h < 0 ? [0, defColor] : [h, c]);\n const vs = y_.map(y => min(shader([x, y])));\n\n // 2nd pass: apply shading+shadowing\n const { shadow, ambient, sunVector } = params.shading;\n const [ys, zs] = sunVector;\n const sp = -zs / ys;\n let max = 0;\n const N = y_.length;\n const K = zs * 2 * dy;\n const heightRow = vs.map(([h]) => h);\n const colorRow = vs.map(([h, c], y) => {\n // shading\n const [y1, y2] = [(y + N - 1) % N, (y + 1) % N];\n const dh = vs[y1][0] - vs[y2][0];\n const sc = ys * dh + K;\n let s = sc > 0 ? 0.7 * (sc / Math.hypot(2 * dy, dh)) : 0;\n\n // shadowing\n /*if (h >= max) max = h;\n else s *= 1 - shadow;\n max -= sp;*/\n [max, s] = h >= max ? [h - sp, s] : [max - sp, s * (1 - shadow)];\n\n return palette.add(shades(c)(s + ambient));\n });\n return { heightRow, colorRow };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5626,"value":"md`The generated heightmap is then rendered using [standard floorcasting](https://observablehq.com/@ehouais/heightmap-rendering-using-a-floorcasting-algorithm) (no webGL). All visualizations can be rotated and zoomed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10314,"value":"md`The following visualization function combines generation, rendering, and [visibility detection](https://observablehq.com/@ehouais/dom-element-visibility-as-an-async-generator): since the generation/rendering process consumes a lot of CPU and memory, heightmaps are only generated/rendered when they become visible. Moreover, the generation/rendering process is stopped and the resources are freed when the corresponding canvas is no longer visible. You see this in action when scrolling the page up or down.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9902,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5644,"value":"md`## Basic examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6540,"value":"sideview(\n p => [0, GREEN],\n md`By always returning the height 0 and the color GREEN, the p => [0, GREEN] shader produces this simple flat green heightmap.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6554,"value":"sideview(\n p => [100 * N(p), SAND],\n md`p => [100×N(p), SAND] \nvisualizes noise as a terrain.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6551,"value":"sideview(\n p => [0, color(3 * N(p))],\n md`p => [0, color(3×N(p))] \ncycles 3 times through the different colors using the noise sample.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6560,"value":"sideview(\n p => [100 * N(p), color(3 * N(p))],\n md`p => [100×N(p), color(3×N(p))] \ncombines the two previous shaders.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6574,"value":"sideview(\n (p) => [50 * D2(p), color(3 * V(p))],\n md`p => [50×D2(p), color(3×V(p))] \nis a more abstract combination of samples.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6579,"value":"sideview(\n p => [15 * N(p, 4), SAND],\n md`p => [15×N(p, 4), SAND] \nuses a ×4 factor to visualize the noise sample at another scale. Note that, since the samples were generated to cycle seamlessly across their borders, no border glitch can be seen when using scale factors greater than 1.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6961,"value":"sideview(\n p => [100 * N(p) + 15 * N(p, 2) + 5 * N(p, 4), SAND],\n md`p => [100×N(p) + 15×N(p, 2) + 5×N(p, 4), SAND] \nsums different octaves to get a richer noise, as is often done with Perlin noise.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6905,"value":"sideview(\n p => [200 * N(p, 0.25), SAND],\n md`p => [200×N(p, 0.25), SAND] \nuses a ×0.25 factor that displays a Moiré due to aliasing and cheap shading procedure. The aliasing comes from the requested absolute precision being greater than that of the actual sampling. This could be mitigated by interpolating the surrounding sample values.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7982,"value":"md`## Detailed zoning using Voronoi \"indirection\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7986,"value":"md`Voronoi precomputation gives a cheap and organic-like zoning capability that is key to realistic procedural biomes generation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7989,"value":"sideview(\n p => [0, color(V(p, 0.5))],\n md`p => [0, color(V(p, 0.5))] \ndisplays zones that could represent woods (green), desert (sand), mountain (white), and water (blue).`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":10324,"value":"md`The zone distribution is satisfying, but the borders are too straight. This is a classic problem when using Voronoi for biome procgen and some solutions have already been documented. You can for instance [subdivide Voronoi boundaries (\"noisy edges\")](https://www.redblobgames.com/maps/noisy-edges), or [add some randomness (\"organic Voronoi\")](https://thingonitsown.blogspot.com/2018/11/organic-voronoi.html) to a [discrete Voronoi \"growing\" computation strategy](https://observablehq.com/@ehouais/discrete-voronoi-diagrams-generation-strategies). \nIn this case I'll use what could be called \"Voronoi indirection\", by using the details of a higher-scale Voronoi.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7994,"value":"sideview(\n p => [0, color(V(p, 4))],\n md`p => [0, color(V(p, 4))] \ngives more details by using the same Voronoi sample at a greater scale.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10340,"value":"md`Let ${tex`G_{s}(p)`} be the function that gives the user space coordinates of Voronoi generator for point ${tex`p`} at scale ${tex`s`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6605,"value":"G = (p, s = 1) => {\n const [ux, uy] = p; // user coordinates\n const [sx, sy] = mapper(p, s); // sample coordinates\n const [dx, dy] = sampling.S[sx][sy][1];\n return [ux + dx / s, uy + dy / s];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8010,"value":"sideview(p => {\n const v1 = V(p, 0.5);\n const v2 = V(G(p, 4), 0.5);\n return [0, v1 != v2 ? sand(0.5) : color(v1)];\n}, md`The brownish zones here show the points where ${tex`G_{0.5}(G_{4}(p)) \\ne G_{0.5}(p)`}.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8007,"value":"sideview(\n p => [0, color(V(G(p, 4), 0.5))],\n md`p => [0, color(V(G(p, 4), 0.5))] \nHere, a point ${tex`p`} belongs to a zone if ${tex`G_{4}(p)`} belongs to this zone, which brings the finer details we want.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10395,"value":"sideview(\n p => [0, color(V(G(p, 1), 0.5))],\n md`You can change the indirection scale to finetune granularity. \nHere the shader p => [0, color(V(G(p, 1), 0.5))] brings less details.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10404,"value":"sideview(\n p => [0, color(V(G(G(p, 5), 2), 0.5))],\n md`You can even use multiple indirections to get a more realistic effect: \np => [0, color(V(G(G(p, 5), 2), 0.5))].`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8078,"value":"md`## Modeling landscape elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8291,"value":"md`We must now find a way to use the available precomputed data to populate zones with vegetation, rocks, etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8083,"value":"sideview(\n p => [80 * D(p), SAND],\n md`p => [80×D(p), SAND] \nuses the Voronoi distance as the height value to display contiguous cones pointing downwards.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8200,"value":"sideview(\n p => [80 * (1 - D(p)), SAND],\n md`p => [80×(1 - D(p)), SAND] \nturns the cones upside down.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8086,"value":"sideview(\n p => [80 * (1 - 5 * D(p)), green(0.3)],\n md`p => [80×(1 - 5×D(p)), green(0.3)] \nmakes the cones more pointy and adds green color. When encountering negative height values, the generation procedure automatically clamps the value to zero and uses a default color.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8137,"value":"sideview(\n p => [(2 * V(p) - 5 * D(p)) * 80, green(0.3)],\n md`p => [80×(2×V(p) - 5×D(p)), green(0.3)] \nfinally uses the V channel to bring a different size to each tree for increased realism. We are now ready to generate fir forests.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10372,"value":"sideview(p => Max(rocks2(p, 2), rocks2(p, 4), rocks2(p, 12)), md`Rocks`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8447,"value":"tree3 = (p, s) => [\n ((1 + V(p, 0.5 * s) / 4 - 30 * D2(p, 0.5 * s) + N(p, 23 * s) / 8) * 50) / s,\n green(0.2 + N(p, 0.5 * s) / 3)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8604,"value":"slice = (a, b) => x => Math.min(b - a, Math.max(0, x - a)) / (b - a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8606,"value":"sl = slice(0.3, 0.4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8576,"value":"sideview(\n p => {\n const n = N(p, 1.4);\n const f = sl(n) ** 0.3;\n let t = [0];\n if (sl(N(G(p, 4), 2)) ** 0.3 > 0) {\n t = [\n 5 + 7 * V(p, 4) + 5 * N(p, 50) - D2(p, 4) * 25,\n green(0.1 + V(p, 4) / 6)\n ];\n }\n const h = f * t[0];\n return [h, h > 0 ? t[1] : SAND]; //[10 * f, color(n)];\n },\n md`p => p => [(5 + 3×V(p) - N(p, 15) - 10×D2(p))×10, green(0.2 + N(p)/3)] \nuses a similar approach for hardwoods, but with the squared distance to get a rounded top, an additional noise to create volumes in the foliage, and slight variations in color.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6952,"value":"md`## Step by step complex shader`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6956,"value":"md`## Combinators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7247,"value":"Max = (...pins) => pins.sort((p1, p2) => p2[0] - p1[0])[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7006,"value":"OneOf = (f, s, t) => p => V(G(p), s) < t ? f(p) : [0, grey(1)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7284,"value":"Add = (p1, p2) => {\n p1[0] += p2[0];\n if (p2[0] > 0) p1[1] = p2[1];\n return p1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6980,"value":"Sea = (f, level) => p => {\n const [h, c] = f(p)\n return level >= h ? [0, BLUE] : [h-level, c]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6993,"value":"Scale = (f, s) => p => {\n const [h, c] = f(p)\n return [h*s, c]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7162,"value":"cypress2 = (p, s = 1) => [\n Math.max(0, ((0.4 + V(p, s) - 60 * D2(p, s)) * 80) / s),\n green(0.2)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7153,"value":"fir2 = (p, s = 1) => [((2 * V(p, s) - 5 * D(p, s)) * 80) / s, green(0.3)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7216,"value":"tree2 = (p, s = 1) => [\n ((5 + 3 * V(p, s) + N(p, s * 15) - 10 * D2(p, s)) * 10) / s,\n green(0.1 + V(p, s) / 7)\n]\n//[(50 + 28 * V(p, s) - 6 * V(p, s * 7) - D2(p, s) * 100) / s, green(0.2 + V(p, s) / 10)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7515,"value":"bush2 = (p, s = 1) => [\n (30 + 28 * V(p, s) - 10 * V(p, s * 7) - D2(p, s) * 120) / s,\n green(0.1 + V(p, s) / 8)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7264,"value":"buildings2 = (p, s = 1) => [(50 * V(p, s)) / s /*-10*V(p, s*2)/s*/, grey(0.6)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7354,"value":"terrain2 = (p, s = 1) => [(7*N(p, s) + N(p, s*4))*10/s + N(p, s*30)*2, sand(0.7)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7838,"value":"waterlilys = (p, s) => (D2(p, 15) < 0.1 ? [0.01, green(0.3)] : [0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":7404,"value":"rocks2 = (p, s = 1) => [\n ((1 + V(p, s) - D2(p, s) * 10) * 15) / s,\n grey((4 + N(p, s) + N(p, s * 4)) / 10)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7023,"value":"buildings = Scale(p => [V(p, 3), SAND], 15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7042,"value":"hills_ = p => [150*N(p, 0.5) + 20*N(p, 2), green(0.5)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7067,"value":"Sea2 = ([h, c], level) => level >= h ? [0, blue(0.8)] : [h-level, c]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7601,"value":"terrain3 = (p, s = 1, w = 0) => {\n const h = (80 * N(p, s) + 10 * N(p, s * 4) + N(p, s * 16)) / s;\n return [h - w * s, sand(0.7)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10075,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":10063,"value":"viewof params = Inputs.form({\n rocks: Inputs.toggle({ label: \"Slope rocks\", value: true }),\n rocks2: Inputs.toggle({ label: \"Rocks\", value: true }),\n grass: Inputs.toggle({ label: \"Grass\", value: true }),\n bushes: Inputs.toggle({ label: \"Bushes\", value: true }),\n hardwood: Inputs.toggle({ label: \"Hardwood\", value: true }),\n cypress: Inputs.toggle({ label: \"Cypresses\", value: true }),\n waterlilies: Inputs.toggle({ label: \"Water lilies\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10077,"value":"largeView(p => test(p, 1), {\n center: [0, 0],\n size: [1024, 1024],\n resolution: 1024\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10209,"value":"exploreNow((p) => test(p, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5731,"value":"maxS = (...shaders) => (i, d, n) => shaders.reduce(([H, C], shader) => {\n const [h, c] = shader(i, d, n)\n return h > H ? [h, c] : [H, C]\n}, [-Infinity])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5801,"value":"quad = t => t < .5 ? 2*t*t : 1-2*(--t)*t","pinned":false,"hidden":false,"mode":"ojs"},{"id":5826,"value":"cubic = t => t < .5 ? 4*t*t*t : 1+4*(--t)*t*t","pinned":false,"hidden":false,"mode":"ojs"},{"id":5806,"value":"quart = t => t < .5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t","pinned":false,"hidden":false,"mode":"ojs"},{"id":5819,"value":"quint = t => t < .5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t","pinned":false,"hidden":false,"mode":"ojs"},{"id":5816,"value":"/*multiview(size, [\n p => [110 * quad(N(p, 0.5)) + 10 * N(p, 3), SAND],\n p => [110 * cubic(N(p, 0.5)) + 10 * N(p, 3), SAND],\n p => [110 * quart(N(p, 0.5)) + 10 * N(p, 3), SAND],\n p => [110 * quint(N(p, 0.5)) + 10 * N(p, 3), SAND]\n])*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":3933,"value":"md`### Land`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3817,"value":"sideview(\n p => [20 * D2(p), SAND],\n md`It's even more interesting if we bind the squared distance with elevation (rather than shade), and call the shader \"dunes\" for some reason.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3934,"value":"md`### Water`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9986,"value":"sideview(water, md`water with color derived from noise`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10657,"value":"sideview((p) => {\n const h = 100 * N(p) + 15 * N(p, 2) + 5 * N(p, 4);\n return Max(\n [0, blue((h / 70) ** 2 * (0.32 + N(p) / 2 + N(p, 4) / 4))],\n [h - 70, SAND]\n );\n}, md`water with color derived from depth and noise`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"water = (p) => [0, blue(0.1 + N(p) / 4 + N(p, 4) / 8)] // [0, 2, Math.exp(h/5)*(1-v(6).I/5)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":9991,"value":"sideview(\n p => [100 * N(p, 0.5) + D2(p) * 15, blue(0.2 + N(p) / 8 + N(p, 4) / 8)],\n md`sea`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3936,"value":"md`### Vegetation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"short_grass = p => [0.1, green(0.3 + N(p) / 8)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5986,"value":"tall_grass = p => [\n 2 * V(p, 5) + V(p, 20) - D2(p, 20),\n green(0.3 + V(p, 3) / 15)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3940,"value":"md`### Snow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3942,"value":"md`### Rocks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"rocks = p => [3+3*V(p, 5)-D2(p, 5)*20, grey(0.3+V(p, 5)/8+V(p, 20)/10)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3335,"value":"rocky = p => L(0, [], sands(p), rocks(p))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3956,"value":"md`## Biomes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3962,"value":"city = p => [100*V(p)**4+20*V(p, 1.2)-10, grey(0.7)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8669,"value":"city2 = p => {\n const [dx, dy] = Dxy(p);\n const l = 0.05;\n const h = V(p);\n return [Math.abs(dx) < l && Math.abs(dy) < l ? 100 * h * h : -1, grey(0.7)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1637,"value":"trees = p => [\n 5 + 7 * V(p, 4) + 4 * N(p, 30) - D2(p, 4) * 25,\n green(0.15 + V(p, 4) / 10)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1616,"value":"fir = p => [\n 15 + 15 * V(p, 4) - Math.sqrt(D2(p, 4)) * 70,\n green(0.1 + V(p, 2) / 10)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2025,"value":"sands = p => [N(p, 2) / 10 + N(p, 10) / 20, sand(1)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2612,"value":"soil = p => [N(p, 2)/4, sand(0.2-V(p, 8)/20)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1913,"value":"snow = p => [N(p), grey(1-V(p, 2)/15)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2158,"value":"terrain = (p, f) => f * (10 * N(p, 0.5) + N(p, 3) / 2 - 3) /*-3.5*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"grassland = p => {\n const h4 = terrain(G(p, 6), 8);\n const s = sands(p);\n return L(\n terrain(p, 8),\n water(p),\n ...(h4 > 15 ? [trees(p)] : h4 > 5 ? [tall_grass(p), s] : [s])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3513,"value":"largeView(grassland, { center: [0, 0], size: [1024, 1024], resolution: 1024 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6140,"value":"exploreNow = (shader, size = 1024) => {\n const array = (size, mapper) => [...Array(size)].map((_, i) => mapper(i));\n const N = 1024;\n const sunVector = [-Math.cos(sunElevation), Math.sin(sunElevation)];\n const shading = { shadow: 0.8, ambient: 0.4, sunVector };\n const palette = Palette(1);\n const [x0, y0] = [0, 0];\n const [dx, dy] = [size / N, size / N];\n const [x_, y_] = [array(N, (i) => x0 + i * dx), array(N, (j) => y0 + j * dy)];\n const clrParams = { shader, shading, defColor: sand(0.8) };\n const rows = x_.map((x) => generateRow(x, y_, 1, palette, clrParams));\n const heights = rows.map((row) => row.heightRow);\n const cdata = rows.map((row) => row.colorRow);\n const background = [225, 240, 255];\n const colors = { data: cdata, palette: palette.colors(), background };\n const dims = [width, (width * 0.6) | 0];\n const start = { x: 0, y: 0, z: 100, θ: τ / 8, φ: 0 };\n const params = { speed: 2, fading: 0.5, cycle: true };\n return explorer(heights, colors, 1, dims, start, params);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"L = (gh, water, ...layers) => {\n const l = layers.sort((l1, l2) => l2[0] - l1[0])[0];\n l[0] = Math.max(l[0] + gh);\n return water && water[0] > l[0] ? water : l;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10527,"value":"largeView = async function*(shader, params) {\n const dims = [width, (width * 0.6) | 0];\n const context = DOM.context2d(...dims, 1);\n const canvas = context.canvas;\n const never = () => new Promise(resolve => {});\n const once = async function*() {\n await asyncVisible(canvas);\n yield true;\n await never();\n };\n const div = html`

`;\n div.append(canvas);\n yield div;\n const data_ = generate(shader, params, once());\n orbitalRenderer(data_(), context);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6407,"value":"sideview = async function* (shader, text) {\n const size = 400;\n const block = html`

`;\n block.style.height = `${size * 0.6}px`;\n const div = html`

`;\n div.style.float = \"left\";\n Object.assign(div.style, { marginRight: \"20px\" });\n block.append(div);\n text.classList.add(\"sidetext\");\n block.append(text);\n yield block;\n\n const dims = [size, (size * 0.6) | 0];\n const context = DOM.context2d(...dims, 1);\n const canvas = context.canvas;\n div.append(canvas);\n\n const params = { center: [0, 0], size: [512, 512], resolution: 512 };\n const data_ = generate(shader, params, asyncVisible(canvas));\n orbitalRenderer(data_(), context);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4958,"value":"Palette = (q = 0) => {\n const palette = new Array()\n const lut = new Map()\n return {\n add: ([r, g, b]) => {\n r ^= q; g ^= q; b ^= q\n const id = '' + (0x1000000 + (b | (g << 8) | (r << 16))).toString(16).slice(1)\n if (lut.has(id)) return lut.get(id)\n const index = palette.length\n lut.set(id, index)\n palette.push([r|0, g|0, b|0])\n return index\n },\n colors: () => palette\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5610,"value":"colorRamp = (nb, color) => html`${ [...Array(nb)].map((_, i) => `

`).join('') }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5716,"value":"max = Math.max","pinned":false,"hidden":false,"mode":"ojs"},{"id":5719,"value":"min = Math.min","pinned":false,"hidden":false,"mode":"ojs"},{"id":6547,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2916,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"τ = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"import { viewofProgressBar } from \"@ehouais/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {\n orbitalRenderer,\n explorer\n} from \"@ehouais/heightmap-rendering-using-a-floorcasting-algorithm\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9120,"value":"import { asyncVisible } from \"@ehouais/dom-element-visibility-as-an-async-generator\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}