30:T4f6,function generateStream(startPoint, direction, length, depth) { return depth <= 0 || length <= 1 ? [] : (() => { // Calculate end point of the current stream segment const dx = length * Math.cos(direction); const dy = length * Math.sin(direction); const endPoint = [startPoint[0] + dx, startPoint[1] + dy]; // Represent the main stream segment as an array of two points const mainStream = [startPoint, endPoint]; // Probability and number of branches const branchProbability = 0.9; const branches = Math.random() < branchProbability ? [1, 2][Math.floor(Math.random() * 2)] : 0; // Generate child streams recursively const childStreams = Array.from({ length: branches }).flatMap(() => { const angleOffset = randBetween(-Math.PI / 3, Math.PI / 3); // Adjust branching angle const newDirection = direction + angleOffset; const newLength = length * randBetween(0.5, 0.8); // Decrease length for child streams return generateStream(endPoint, newDirection, newLength, depth - 1); }); // Combine main stream and child streams return [mainStream, ...childStreams]; })(); }31:T465,generateHeightmap = (width, height, scale, noise) => { const range = (n) => [...Array(n).keys()]; const maxDistance = Math.hypot(width / 2, height / 2); const peaks = [ { x: width * 0.6, y: height * 0.4, exponent: 1, height: 0.3 }, { x: width * 0.6, y: height * 0.4, exponent: 2, height: 0.8 }, { x: width * 0.4, y: height * 0.7, exponent: 3, height: 0.6 } ]; return range(height).map((y) => range(width).map((x) => { // Calculate radial gradients from multiple peaks const radialGradient = peaks.reduce((sum, peak) => { const dx = x - peak.x; const dy = y - peak.y; const distance = Math.hypot(dx, dy) / maxDistance; const peakValue = peak.height * Math.pow(1 - distance, peak.exponent); return sum + peakValue; }, 0); // Generate noise at two scales const noiseValueLow = (noise(x / (8 * scale), y / (8 * scale)) + 1) / 2; const noiseValueHigh = (noise(x / scale, y / scale) + 1) / 2; // Combine radial gradients and noise return radialGradient + noiseValueLow * 0.5 + noiseValueHigh * 0.01; }) ); }32:T486,reachesEdge = (heightmap, threshold) => { const height = heightmap.length; const width = heightmap[0].length; const visited = Array.from({ length: height }, () => Array(width).fill(false) ); const queue = []; const centerX = Math.floor(width / 2); const centerY = Math.floor(height / 2); if (heightmap[centerY][centerX] < threshold) { return false; // Center point is below threshold } queue.push([centerX, centerY]); visited[centerY][centerX] = true; while (queue.length > 0) { const [x, y] = queue.shift(); // Check if we are at the edge if (x === 0 || x === width - 1 || y === 0 || y === height - 1) { return true; } // Explore neighbors (4-connected grid) const neighbors = [ [x - 1, y], [x + 1, y], [x, y - 1], [x, y + 1] ]; for (const [nx, ny] of neighbors) { if ( nx >= 0 && nx < width && ny >= 0 && ny < height && !visited[ny][nx] && heightmap[ny][nx] >= threshold ) { visited[ny][nx] = true; queue.push([nx, ny]); } } } return false; // Did not reach edge }33:T401,// Function to create a D3-compatible color scale createColorScale = (heightmap) => { const [minHeight, maxHeight] = d3.extent(heightmap.flat()); // Water color scale: from pale blue to dark blue const waterScale = d3 .scaleLinear() .domain([0, minHeight]) .range(["#cfeefb", "#76c7f2"]) // Pale blue to mid blue .interpolate(d3.interpolateLab); // Land color scale: beach to vegetation to hills to mountains const landHeights = [ 0, maxHeight * 0.25, maxHeight * 0.5, maxHeight * 0.75, maxHeight ]; const landColors = [ "#fbe5c0", // Light Sand (beach) "#d9f2d9", // Pale Green (low vegetation) "#a8d5a8", // Soft Green (mid vegetation) "#7bb07b", // Medium Green (higher vegetation) "#bfbfbf" // Light Gray (mountain peaks) ]; const landScale = d3 .scaleLinear() .domain(landHeights) .range(landColors) .interpolate(d3.interpolateLab); // Combined color scale function return (h) => (h < 0 ? waterScale(h) : landScale(h)); }34:T5b3,plot = { const width = 800; // Width of the heightmap const height = 800; // Height of the heightmap const scale = 40; // Scale for noise const dem = sinkIsland(generateHeightmap(width, height, scale, noise)); const islandClrs = createColorScale(dem); const relief = calcRelief(dem.flat(), { nRows: width, nCols: height, cellSize: 0.01 }); return Plot.plot({ width: 1000, height: 1000, axis: null, marks: [ Plot.raster(dem.flat(), { width: width, height: height, fill: islandClrs }), Plot.raster(relief.values, { width: width, height: height, fill: d3.interpolate("#000", "#fee"), mixBlendMode: "luminosity", opacity: 0.6 }), Plot.contour(dem.flat(), { width: width, height: height, stroke: "black", strokeWidth: 0.8, opacity: 0.8 }), Plot.image([{}], { x: 730, y: 700, width: 140, opacity: 0.5, src: northpoint }), Plot.text(["Here be treasure"], { x: 30, y: 750, textAnchor: "start", opacity: 0.9, fontSize: 70, fontFamily: "Pinyon Script", fontWeight: 900 }), Plot.text(["North"], { x: 725, y: 770, opacity: 0.7, fontSize: 28, fontFamily: "Pinyon Script", fontWeight: 900 }) ] }); }35:T4ea,function calcRelief(dem, options = {}) { const { nRows = 800, nCols = 800, cellSize = 1, azim = 315, zen = 75 } = options; const π = Math.PI; const rad = (deg) => (deg * π) / 180; const zenith = rad(zen); const azimuth = rad(-azim); const dx = cellSize; const shade = new Array(dem.length).fill(0.5); const offsets = [ // 3x3 local window [-1, -1], [0, -1], [1, -1], [-1, 0], [0, 0], [1, 0], [-1, 1], [0, 1], [1, 1] ]; const sc = d3.scaleLinear().domain([-1, 1]); for (let y = 1; y < nRows - 1; y++) { for (let x = 1; x < nCols - 1; x++) { const i = y * nCols + x; const w = offsets.map(([dx, dy]) => dem[i + dx + dy * nCols]); const dzdx = (w[2] + 2 * w[5] + w[8] - (w[0] + 2 * w[3] + w[6])) / (8 * dx); const dzdy = (w[0] + 2 * w[1] + w[2] - (w[6] + 2 * w[7] + w[8])) / (8 * dx); const slope = -Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy)); const aspect = Math.atan2(dzdy, -dzdx); shade[i] = sc( Math.cos(zenith) * Math.cos(slope) + Math.sin(zenith) * Math.sin(slope) * Math.cos(azimuth - π / 2 - aspect) ); } } return { ...dem, values: shade }; }36:[{"id":"1f68f117db997cd7ddb480c7d73396ed54db8da56037c780df314268eb76739b580dc1a4ba848371dcd61eee0d20583ef25a9630b87a453ee16b26e41f7d2482","href":"https://static.observableusercontent.com/files/1f68f117db997cd7ddb480c7d73396ed54db8da56037c780df314268eb76739b580dc1a4ba848371dcd61eee0d20583ef25a9630b87a453ee16b26e41f7d2482","name":"northpoint.png","type":"image/png","lastModified":1731184909264.79,"size":857206}] 2e:{"title":"30 Day Map Challenge: 9. AI Only","cells":[{"id":0,"value":"# 30 Day Map Challenge: 9. AI Only","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"_Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime._ \n\nIt may be a bit of a cliche, but it has some relevance to the use of Generative AI. It has been observed that if you provide a Generative AI a noughts and crosses (tic-tac-toe) board and ask it to make the best move, it may often fail. But ask it to write a computer program to play noughts and crosses optimally and it will usually succeed.\n\nFollowing this principle, I will cheat a little for today's challange and ignore the 'only' part of the task. This is in part because I don't see much value in handing over the entire map design and generation process to a machine, but also because I'd rather get it do the things it is good at and leave me to do the things I enjoy.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"## The task\n\nI thought I get the GenAI to build me an landscape simulator which I could use to generate some data to map in Observable Plot. My first prompt to ChatGPT (\"o1-preview\") was:","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"task(\n md`I would like to produce a drainage network simulator written in elegant functional JavaScript.\n\nThe goal is to write a program that will create a realistic network of streams and rivers that form dendritic connected networks. The networks should exhibit realistic topology seen in real river networks. I'd like you to think about known drainage network simulation models and incorporate one in your approach.\n\nThe output of the code should be an array of vectors representing the coordinates of the stream paths.`,\n { title: \"Prompt\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"It responded with a full set of code and an explanation, but the result of running the code was way too simple:","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"randBetween = (min, max) => min + (max - min) * Math.random()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"network = {\n regenerate;\n const startPoint = [0, 0];\n const initialDirection = -Math.PI / 2; // Flowing downwards\n const initialLength = 10000;\n const coords = generateStream(\n startPoint,\n initialDirection,\n initialLength,\n 40\n );\n return new GeoJSON().lines(coords).featureCollection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"Plot.plot({ axis: null, marks: [Plot.geo(network)] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof regenerate = Inputs.button(\"Regenerate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"After a few more attempts using this approach it became clear it wasn't going to produce anything particularly valuable. So I thought I'd try a different way of prompting the GenAI:","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"task(\n md`I need a more sophisticated model than that. Currently the one you provided can contain self crossing lines, and is rather simple. Perhaps there are other approaches that incorporate fractals, or are based on processing a raster array first and then using that to generate the stream vectors?`,\n { title: \"Prompt\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"To which it responded with an interesting approach:","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"designNote(\n md`You're absolutely right. To generate a more sophisticated and realistic drainage network, we can simulate terrain and model water flow over it to create dendritic river patterns without self-crossing lines. This approach involves:\n\n1. Generating a terrain heightmap using Perlin noise or another fractal noise function.\n2. Calculating the flow direction at each point based on the steepest descent.\n3. Computing flow accumulation to identify where streams form.\n4. Extracting stream paths from the flow accumulation data.\n\nBelow is a functional JavaScript program that accomplishes this. I'll include inline comments to explain each part of the code.`,\n { title: \"Response\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"The code it produced generated a terrain surface that was irregular (thanks to the noise function) but the drainage network it calculated was unrealistic suggesting somewhere in the flow accumulation model, it was not making sensible choices. \n\nSo I decided to focus just on the terrain generation, making that a little more realistic. I prompted it as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"task(\n md`I think it would help if we had a more realistic height map to start the process. The simplex noise function is fine as a start point. But to ensure greater continuity of streams, can you modify it so that the height map is built on a dome towards the centre of the terrain, tending to get lower towards the edges. It should still use the noise for variation though.`,\n { title: \"Prompt\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"After a few more iterations to generate multiple scales of structure and noise, we arrived with the following code (almost all generated by ChatGPT with a few steering prompts by me and minor edits to link with the libraries on this page):","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"I wrote the simple Plot code to display the result:","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"{\n const width = 400; // Width of the heightmap\n const height = 400; // Height of the heightmap\n const scale = 20; // Scale for noise\n const dem = generateHeightmap(width, height, scale, noise);\n\n return Plot.plot({\n width: 400,\n height: 400,\n axis: null,\n marks: [\n Plot.raster(dem.flat(), {\n width: width,\n height: height,\n opacity: 0.8\n }),\n Plot.contour(dem.flat(), {\n width: width,\n height: height,\n stroke: \"black\",\n strokeWidth: 0.8,\n opacity: 0.8\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"I thought this would make a good basis for a 'treasure island' map, so I prompted it for a better colour scheme and to find the largest possible 'coastline' contained within the map area:","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"task(\n md`I'd now like you create a function that given a height map as generated above, it creates a d3 compatible colour scheme that gives an island topography feel. That is you identify a 'coastline' height which is about the height of the largest complete contour ring around the dome that doesn't get cut off by the edges. Below that height should be pale blue colours getting a little darker as heights fall away. Above that height should be a series of colours that suggest beach to vegetation to hill to mountain terrain as height increases. `,\n { title: \"Prompt\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"This led to the following functions (with a little iterative prompting):","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"findCoastlineHeight = (heightmap) => {\n let [low, high] = d3.extent(heightmap.flat());\n const epsilon = (high - low) / 1000;\n\n while (high - low > epsilon) {\n const mid = (low + high) / 2;\n const touchesEdge = reachesEdge(heightmap, mid);\n\n if (touchesEdge) {\n low = mid;\n } else {\n high = mid;\n }\n }\n return high;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"sinkIsland = (heightmap, scale = 0.5) => {\n const coastlineHeight = findCoastlineHeight(heightmap);\n return heightmap.map((row) =>\n row.map((h) =>\n h - coastlineHeight < 0\n ? (h - coastlineHeight) * scale\n : h - coastlineHeight\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"

\n ${drawIsland(noise)}\n ${drawIsland(noise2)}\n ${drawIsland(noise3)}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":121,"value":"function drawIsland(noise) {\n const width = 400; // Width of the heightmap\n const height = 400; // Height of the heightmap\n const scale = 20; // Scale for noise\n const dem = sinkIsland(generateHeightmap(width, height, scale, noise));\n const islandClrs = createColorScale(dem);\n\n return Plot.plot({\n width: 400,\n height: 400,\n axis: null,\n marks: [\n Plot.raster(dem.flat(), {\n width: width,\n height: height,\n fill: islandClrs\n }),\n Plot.contour(dem.flat(), {\n width: width,\n height: height,\n stroke: \"black\",\n strokeWidth: 0.4,\n opacity: 0.8\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"I used the generated elevation model as input into a simple [shaded relief calculator](https://eduard.earth) to generate a relief surface which I incorporated into the map, just as [Day 5](https://observablehq.com/@jwolondon/tdmc2024_day05).\n\nGiven the spirit of today's challenge I thought I'd insert a GenAI image of a fancy compass north marker, and gave the map a suitable title. And to reflect the 'generative', reloading this page will generate a new set of artificial islands every time.","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"Is there treasure to be found in a dialogue with a GenAI?\n\nProbably, but it can be frustrating at times. The map above is OK, but I could have probably produced a better one if I didn't rely on it. I think it's important to make the AI do the boring stuff and not displace our own creative input. Keeping prompts constrained to specific parts of a task can help even if there is a temptation to ask it do the whole task in a single step.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"_For prompt and response boxes:_","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"import { designNote, task } from \"@jwolondon/schema-teaching\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"_For conversion of ChatGPT program outout into GeoJSON:_","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"_For simplex noise generation:_","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"SN = import(\n \"https://unpkg.com/simplex-noise@4.0.3/dist/esm/simplex-noise.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"noise = SN.createNoise2D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"noise2 = SN.createNoise2D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"noise3 = SN.createNoise2D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"_For conversion of relief images (adapted from my [topographic mapping document](https://observablehq.com/@jwolondon/topographic-mapping)):_","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"_AI Generated northpoint image:_","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"northpoint = FileAttachment(\"northpoint.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"_For script font:_","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W36","stdlib":"1","titling":"auto"}