29:null 2a:["$","title",null,{"children":"2D Midpoint-Displacement Terrain Generator | Douglas Paul | Observable"}] 2f:T56c,class TerrainGenerator { constructor(initialVertexData, { maxOffsetFactor = 0.75, seed = 0 } = {}) { this.nextVertexId = 0; this.vertices = initialVertexData.map(it => this.createVertex(it)); const alea = new Alea(seed); this.randomOffset = d3.randomUniform.source(alea)( -maxOffsetFactor, maxOffsetFactor ); } subdivide() { const oldVertices = this.vertices; const newVertices = new Array(2 * oldVertices.length - 1); newVertices[0] = oldVertices[0]; for (let i = 1; i < oldVertices.length; i++) { const vA = oldVertices[i - 1]; const vB = oldVertices[i]; const vNew = this.createInterpolatedVertex(vA, vB); newVertices[i * 2 - 1] = vNew; newVertices[i * 2] = vB; } this.vertices = newVertices; } addRandomOffsetToNewVertices() { for (const v of this.vertices) { if (v.new) { const offsetFactor = this.randomOffset(); Object.assign(v, { y: v.y + offsetFactor * v.dx, new: false }); } } } createVertex(vertexData) { return Object.assign({ id: this.nextVertexId++ }, vertexData); } createInterpolatedVertex(vA, vB) { const dx = (vB.x - vA.x) / 2; const dy = (vB.y - vA.y) / 2; return this.createVertex({ x: vA.x + dx, y: vA.y + dy, dx: dx, dy: dy, new: true }); } }30:T107e,class TerrainGenerationAlgorithmRenderer { constructor( svgRoot, terrain, width, height, { borderWidth = 10, subdivisionTransitionDuration = 250, offsetTransitionDuration = 500, finalAppearanceTransitionDuration = 500, vertexRadius = 3, vertexColor = d3.hsl(0, 1.0, 0), newVertexColor = d3.hsl(0, 1.0, 0.5) } = {} ) { this.terrain = terrain; this.width = width; this.height = height; this.borderWidth = borderWidth; this.subdivisionTransitionDuration = subdivisionTransitionDuration; this.finalAppearanceTransitionDuration = finalAppearanceTransitionDuration; this.vertexRadius = vertexRadius; this.vertexColor = vertexColor; this.newVertexColor = newVertexColor; this.svgRoot = svgRoot.attr("width", width).attr("height", height); this.svgRoot .selectAll(".scene-layers") .data([terrain]) .enter() .append("g") .attr("class", "scene-layers") .call(sceneLayers => { sceneLayers .append("g") .attr("class", "background-container") .call(backgroundContainer => { backgroundContainer .append("rect") .attr("class", "sky") .attr("x", 0) .attr("y", 0) .attr("width", this.width) .attr("height", this.height) .attr("fill", "url(#backgroundGradient)") .style("opacity", 0.5); backgroundContainer .append("rect") .attr("class", "water") .attr("x", 0) .attr("y", this.height) .attr("width", this.width) .attr("height", 0); }); sceneLayers .append("g") .attr("class", "terrain-container") .call(terrainContainer => {}); sceneLayers .append("g") .attr("class", "foreground-container") .call(foregroundContainer => { foregroundContainer .append("rect") .attr("class", "border") .attr("x", this.borderWidth / 2) .attr("y", this.borderWidth / 2) .attr("width", this.width - this.borderWidth) .attr("height", this.height - this.borderWidth) .style("stroke", "black") .style("stroke-width", this.borderWidth) .style("fill", "none") .style("opacity", 0); }); }); this.getVertexId = d => d.id; } getRootEl() { return this.svgRoot.node(); } transitionToFinalAppearance() { const vertices = this.terrain.vertices; const transition = this.svgRoot .transition() .duration(this.finalAppearanceTransitionDuration); const backgroundContainer = this.svgRoot.select("g.background-container"); const terrainContainer = this.svgRoot.select("g.terrain-container"); const foregroundContainer = this.svgRoot.select("g.foreground-container"); // Show sky backgroundContainer .select("rect.sky") .transition(transition) .style("opacity", 1); // Add water const yExtent = d3.extent(vertices, d => d.y); const waterLevel = d3.interpolateNumber(yExtent[1], yExtent[0])(0.3); backgroundContainer .select("rect.water") .transition(transition) .attr("y", waterLevel) .attr("height", this.height - waterLevel); // Fill in below terrain const composeDegenerateAreaSvgPathData = d3 .area() .x(d => d.x) .y(this.height); const composeAreaSvgPathData = d3 .area() .x(d => d.x) .y0(this.height) .y1(d => d.y); const terrainPath = terrainContainer .selectAll("path.terrain") .data([vertices]); terrainPath .enter() .append("path") .attr("class", "terrain") .attr("d", d => composeDegenerateAreaSvgPathData(d)) .style("fill", "black") .merge(terrainPath) .transition(transition) .attr("d", d => composeAreaSvgPathData(d)); // Show border foregroundContainer .select("rect.border") .transition(transition) .style("opacity", 1); } }31:T584,class App { constructor({ width = 960, height = 500, margin = 10, maxNumberOfIterations = 2 } = {}) { this.width = width; this.height = height; this.margin = margin; this.maxNumberOfIterations = maxNumberOfIterations; this.svgEl = DOM.svg(width, height); this.svgEl.appendChild(svg` `); this.svgRoot = d3.select(this.svgEl); } run(seed = "") { this.terrainGenerator = new TerrainGenerator( [ { x: this.margin, y: this.height / 2 + 100 }, { x: this.width / 2, y: this.height / 2 - 100 }, { x: this.width - this.margin, y: this.height / 2 } ], { seed } ); this.renderer = new TerrainGenerationAlgorithmRenderer( this.svgRoot, this.terrainGenerator, this.width, this.height, { borderWidth: this.margin } ); for (let i = 0; i < this.maxNumberOfIterations; i++) { this.terrainGenerator.subdivide(); this.terrainGenerator.addRandomOffsetToNewVertices(); } this.renderer.transitionToFinalAppearance(); } }32:[] 2d:{"id":"b2d56487938694da","slug":"2d-midpoint-displacement-terrain-generator","title":"2D Midpoint-Displacement Terrain Generator","thumbnail":"738ea2fed13647454ee5f36468d85444b5bdc120cacda7943e32f05ba891a3e8","access_level":"public","create_time":"$D2019-04-21T04:00:15.365Z","update_time":"$D2021-08-22T02:43:31.222Z","view_time":null,"first_public_time":"$D2019-04-27T13:05:22.379Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d51adc4f8943cb47","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":"starter_2024"},"version":163,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99f7306286aecde4","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":null}],"members":[{"type":"individual","id":"99f7306286aecde4","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2D Midpoint-Displacement Terrain Generator","cells":[{"id":0,"value":"md`# 2D Midpoint-Displacement Terrain Generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\nThis demonstrates a 2D implementation of a simple midpoint displacement algorithm. I wrote this because my kid neighbor asked me about algorithms for generating 3D terrain and I couldn't find an explanation of an algorithm I thought would be accessible to him.\n\nThis particular notebook is meant for showing off the final result of the algorithm. See also the [visual step-by-step walkthrough of the algorithm](https://codepen.io/douglyuckling/full/oONMPG).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof seed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n app.run(seed);\n return app.svgEl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n app.run(seed);\n return app.svgEl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"app = new App({\n maxNumberOfIterations: 7,\n width: 640,\n height: Math.round(640 * (9 / 16))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"Alea = require(\"alea\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"