31:[] 2f:{"title":"Heightmap generation by bell-shaped functions accumulation","cells":[{"id":0,"value":"md`# Heightmap generation by bell-shaped functions accumulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`This is [another](https://beta.observablehq.com/@ehouais/heightmap-generation-using-inverse-distance-weighting-in) simple method to generate decent-looking terrain [heightmaps](https://en.wikipedia.org/wiki/Heightmap). I used it for [my JS1k 2012 entry](https://js1k.com/2012-love/demo/1282).\n\nWhile the algorithm is very straightforward and can be implemented with little code, it has a *mn²* complexity (where *m* is the number of generators and *n²* the number of cells in the heightmap) that may prove CPU-intensive if left unoptimized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"md`We first use a [seedable PRNG](https://en.wikipedia.org/wiki/Linear_congruential_generator#Parameters_in_common_use) of acceptable quality (minstd_rand0) to pick a set of generator points from the *[0,1)²* space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"viewof generators = sliders({\n seed: {title: 'Seed', min: 1, max: 2147483646, step: 1, value: 1},\n nb: {title: 'Nb.', min: 1, max: 200, step: 1, value: 100}\n}, function(val) {\n const G = [];\n const rnd = minstRand0(val.seed);\n\n for (let i = 0; i < val.nb; i++) {\n G.push([rnd(), rnd()]);\n }\n\n return G;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"md`Then we accumulate the value of [\"bell-shaped\"](http://fooplot.com/#W3sidHlwZSI6MCwiZXEiOiJleHAoLXheMikiLCJjb2xvciI6IiMwMDAwMDAifSx7InR5cGUiOjEwMDAsIndpbmRvdyI6WyItMi41IiwiMi41IiwiLTEiLCIyIl19XQ--) ${tex`e^{-d^2}`} functions centered on generator points, the first ones in the list having greater influence.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"viewof shaping = sliders({\n p1: {min: 0.1, max: 5, step: 0.01, value: 0.5},\n p2: {min: 1, max: 100, step: 1, value: 30},\n p3: {min: 1, max: 20, step: 0.01, value: 3}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"viewof resolution = slider({\n min: 1,\n max: 10,\n step: 1,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"accumulate = function(H, generators, shaping) {\n const nb = H.length;\n const delta = 1/nb;\n \n for (let k = 0, g; g = generators[k]; k++) {\n let [xg, yg] = g;\n let z = 1+shaping.p1*k; // decreasing generators influence\n let f1 = shaping.p2*z; // individual influence factor\n let f2 = shaping.p3*z; // global vertical stretching\n\n for (let i = 0, x = -xg; i < nb; i++, x += delta) {\n let x2 = x*x;\n for (let j = 0, y = -yg; j < nb; j++, y += delta) {\n let dist2 = x2+y*y; // squared distance\n H[i][j] += Math.exp(-f1*dist2)/f2;\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof heightmap = {\n const w2 = width/2;\n const nb = Math.floor(w2/resolution); // Adapt heightmap precision to canvas size\n const H = [];\n\n // Prepare heightmap array\n for (let i = 0; i < nb; i++) {\n H[i] = []\n for (let j = 0; j < nb; j++) {\n H[i][j] = 0;\n\t}\n }\n\n // Apply generators accumulator to heightmap\n accumulate(H, generators, shaping);\n\n // Generate colormap\n const C = [];\n for (let i = 0; i < nb; i++) {\n C[i] = [];\n for (let j = 0; j < nb; j++) {\n C[i][j] = Math.floor(Math.min(92, 15+H[i][j]*200));\n\t}\n }\n\n const context = DOM.context2d(width, w2);\n\n // Render\n isoFloorCasting(context, H, C, w2);\n\n context.canvas.value = H;\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"md`Then we apply shading and raise sea level to obtain a decent-looking terrain...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"viewof terrain = {\n const w2 = width/2;\n const nb = heightmap.length; // Adapt heightmap precision to canvas size\n const offset = seaLevel/100;\n\n // Prepare terrain array\n const T = [];\n for (let i = 0; i < nb; i++) {\n T[i] = []\n for (let j = 0; j < nb; j++) {\n T[i][j] = Math.max(0, heightmap[i][j]-offset);\n\t }\n }\n\n // Generate colormap\n const C = [];\n for (let i = 0; i < nb; i++) {\n C[i] = [];\n for (let j = 0; j < nb; j++) {\n let djp = j < nb-1, djm = j > 0;\n let d = nb*(T[i][j+djp]-T[i][j-djm])/(djp+djm)-shading.p2;\n C[i][j] = Math.floor(shading.p3*Math.exp(-d*d*shading.p1));\n\t }\n }\n\n const context = DOM.context2d(width, w2);\n\n // Render\n isoFloorCasting(context, T, C, w2);\n\n context.canvas.value = T;\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"viewof shading = sliders({\n p1: {min: 0.01, max: 0.5, step: 0.01, value: 0.1},\n p2: {min: -7, max: 7, step: 0.1, value: -3},\n p3: {min: 1, max: 99, step: 1, value: 80}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"viewof seaLevel = slider({\n min: 0,\n max: 100,\n step: 0.1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"md`The heightmap is rendered using optimized vanilla-canvas isometric [floorcasting](https://en.wikipedia.org/wiki/Ray_casting#Comanche_series).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"import {minstRand0, sliders} from '@ehouais/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"import {isoFloorCasting} from '@ehouais/heightmap-rendering-techniques'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}