2d:null 2e:["$","title",null,{"children":"Atomic Agents: Make a town! | Graham McNeill | Observable"}] 33:T6fd,# Atomic Agents: Make a town! Designing urban spaces is difficult. Let's explore some of the challenges by designing a space from scratch using tiles:

To keep it simple, we will assume that one person lives in each house, and that everyone commutes to the same place. Here is what makes people happy: * __House size:__ bigger is better! * __Commute:__ people automatically take the quickest route to work. Walking is allowed on paths and roads; cars and buses only travel on roads, but are faster than walking. Diagonal movement is not allowed. The commuting options are: * _Walk:_ using path and road. * _Walk + Bus:_ walk to a bus stop on a road that reaches work. * _Drive:_ a house's square must share an edge with a road that reaches work — and the house's path must touch the road. * __Air Quality:__ better when fewer road squares and bus stops in the 'neighborhood' — squares close to the house are most important. * __Wellbeing:__ combination of own garden size, and the fraction of the neighborhood that is park (best), wild and water. Note that paths take up space, so they reduce the house size or area of park on a square. Similarly, gardens reduce house size. Each house has a score out of 10 for each of the categories above. We take the mean over houses to get a town score for each category. A town also has a __wildlife__ score and a __waterlife__ score. Wildlife improves with the number of wild (best), park, garden and water squares. Also, a square's wildlife contribution is increased based on the wildlife quality of surrounding squares. The waterlife score is computed in a similar way, but only water (best by a long way) and wild squares contribute.34:T7fb,tiles = { const tiles = html`

`; const highlight = '#444444'; const noHighlight = highlight + '00'; const imgStyle = `style=" width: 50px; height: 50px; padding: 3px; border-radius: 3px; border: 2px solid ${noHighlight}; "`; // top panel let topSelected; const topPanel = html`

`; function topClick() { if (topSelected) topSelected.style.borderColor = noHighlight; topSelected = this; topSelected.style.borderColor = highlight; populateBtmPanel(); } const topImgs = images.map(imageInfo => { const img = html`

`; img.__info = imageInfo; topPanel.appendChild(img); img.addEventListener('mousedown', topClick); return img; }); // bottom panel let btmSelected; let btmImages; const btmPanel = html`

`; // rotated images function btmClick() { if (btmSelected) btmSelected.style.borderColor = noHighlight; btmSelected = this; btmSelected.style.borderColor = highlight; tiles.__value = btmSelected.__info; } function addBtmImg(imageInfo, rotationCode) { const img = html`

`; img.style.transform = `rotate(${rotationCode * 90}deg)`; img.__info = {...imageInfo, rotationCode}; btmPanel.appendChild(img); btmImages.push(img); img.addEventListener('mousedown', btmClick); return img; }; function populateBtmPanel() { btmPanel.innerHTML = ''; btmImages = []; btmSelected = null; const info = topSelected.__info; const rotationCodes = info.rotate ? [0, 1, 2, 3] : [0]; for (let rotationCode of rotationCodes) { addBtmImg(info, rotationCode); } btmClick.call(btmImages[0]); } // combine panels tiles.append(topPanel, btmPanel); topClick.call(topImgs[0]); return tiles; }35:T1b80,drawing = { // initialise snapshot let snapshot; switch(setupParams.resetTo) { case 'demo town': snapshot = demoTowns[setupParams.townSize]; break; case 'loaded town': const town = loadTown ? (await loadTown.json()) : null; snapshot = town && town.nx === setupParams.townSize ? town : null; break; default: snapshot = null; } // simulation const sim = new AA.Simulation({ width: setupParams.townSize * 50, height: Math.round(0.6 * setupParams.townSize) * 50, gridStep: 50, state: { houses: 0, analysis: null, townScoresOld: null }, }); sim.state.minHouses = Math.round(sim.squares.size * 0.85); invalidation.then(() => sim.end()); sim._townData = function() { return JSON.stringify({ nx: sim._grid.nx, painted: [...sim.squares].map(sq => { return sq.label('kind') === 'work' ? 'work' : sq.state.painted }) }); } // work const work = new AA.Zone({indexLimits: [ sim.xMaxIndex - Math.round(sim._grid.nx / 5) + 1, sim.xMaxIndex, sim.yMaxIndex - Math.round(sim._grid.ny / 5) + 1, sim.yMaxIndex, ]}).addTo(sim) work.vis({ tint: 0xd69ed1, text: 'WORK', textTint: 0x0, fontSize: zn => zn.squares.size === 1 ? 13 : 14.5, }) // squares let mousedown = false; for (let sq of sim.squares) { if (work.squares.has(sq)) sq.label('kind', 'work'); let tint = sq.checker ? 0xeeeeee : 0xdddddd; let image = null; sq._paintSquare = function(painted) { if (sq.label('kind') === 'work') return; if (mousedown || painted) { sim.state.houses -= sq.state.painted?.houseCount ?? 0; painted ??= tiles.__value; if (painted.name === 'blank') { tint = sq.checker ? 0xeeeeee : 0xdddddd; image = null; sq.state.painted = null; sim.withLabel('kind', null); } else { tint = 0xffffff; image = painted.url; sq.state.painted = painted; sq.direction = painted.rotationCode; sq.label('kind', painted.houseCount ? 'house' : painted.name); } sim.state.houses += painted?.houseCount ?? 0; updateInfoBar(); clearResults(); if (sim.state.analysis) { sim.state.townScoresOld = sim.state.analysis.townScores; sim.state.analysis = null; } } } sq.state.msg = null; sq.zIndex = -Infinity; sq.vis({ pointerdown: () => { mousedown = true; sq._paintSquare() }, pointerup: () => mousedown = false, pointerover: () => sq._paintSquare(), tint: () => tint, image: () => image, text: sq => sq.state.msg, fontSize: sq => { const n = sq.state.painted.houseCount ?? 1; return n === 1 ? 17 : n === 2 ? 20 : 24; }, }); } // vis const wrapper = html`

`; const visWrapper = wrapper.appendChild(html`

`); visWrapper.addEventListener('mouseleave', () => mousedown = false); AV.vis(sim, { target: visWrapper, cleanup: true, images: [ ...images.map(info => info.url), 'https://cdn.jsdelivr.net/gh/gjmcn/sprites/bitmap-fonts-96/swansea.xml' ], fontName: 'Swansea', fontSize: 16, textTint: 0xffffff, }); const infoBar = wrapper.appendChild(html`

`); function updateInfoBar() { infoBar.innerHTML = `Min houses: ${sim.state.minHouses}, current: ${sim.state.houses}`; } updateInfoBar(); // analyse and snapshot buttons const btnWrapper = wrapper.appendChild(html`

`); const analyseBtn = btnWrapper.appendChild(html``); analyseBtn.addEventListener('click', () => { clearResults(); if (sim.state.analysis) sim.state.townScoresOld = sim.state.analysis.townScores; sim.state.analysis = analyseTown(sim); showResults(); }); const updateSnapshotBtn = btnWrapper.appendChild(html``); updateSnapshotBtn.addEventListener('click', () => { snapshot = JSON.parse(sim._townData()); }); const backToSnapshotBtn = btnWrapper.appendChild(html``); backToSnapshotBtn.addEventListener('click', backToSnapshot); // message div const textMsg = visWrapper.appendChild(html``); // chooose category to show scores for const categoryMap = new Map([["Town scores", "townScores"]]); for (let val of ["commute", "houseSize", "airQuality", "wellbeing"]) { categoryMap.set(nameLookup[val], val); } categoryMap.set('Hide Results', 'hide'); const category = wrapper.appendChild(Inputs.radio(categoryMap, { label: "", value: "townScores", })); category.addEventListener('change', () => { sim.state.analysis ? showResults() : analyseBtn.click(); }); // show current results for currently chosen category function showResults() { clearResults(); const {errorMsg, errorSq, houseScores, townScores } = sim.state.analysis; if (errorMsg) { textMsg.innerHTML = errorMsg; textMsg.style.display = 'block'; if (errorSq) errorSq.state.msg = 'X'; } else if (category.value === 'hide') { return; } else if (category.value === 'townScores') { textMsg.innerHTML = Object.entries(townScores) .map(([name, score]) => { score = Math.round(score); let str = `${nameLookup[name]}: ${score}`; if (sim.state.townScoresOld) { const oldScore = Math.round(sim.state.townScoresOld[name]); str += oldScore > score ? ' ↓' : oldScore < score ? ' ↑' : ' -'; } return str; }) .join('
'); textMsg.style.display = 'block'; } else { for (let [sq, scores] of houseScores) { sq.state.msg = Math.round(scores[category.value]); } } } function clearResults() { if (sim.state.analysis) { textMsg.innerHTML = ''; textMsg.style.display = 'none'; for (let sq of sim.squares) sq.state.msg = null; } } // paint squares if uploaded town function backToSnapshot() { const blankObj = images.find(info => info.name === 'blank'); if (snapshot) { for (let sq of sim.squares) { const painted = snapshot.painted[sq.index]; if (painted !== 'work') { sq._paintSquare(painted ?? {...blankObj}); } } } } backToSnapshot(); wrapper.__sim = sim; return wrapper; } 36:Tbc8,// walk property indicates where can walk on square. The 'codes' are: // 'A': anywhere // 'B': bottom // 'C': corner: bottom and left // 'S': special corner: bottom-left // 'N': nowhere // Notes: // - wellbeing score of a house square only contributes to wellbeing of house owner // - a square's actual water score and wild score depends on surrounding squares images = [ { name: 'h1s', houseCount: 1, house: 10, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'S' }, { name: 'h1', houseCount: 1, house: 9, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'B' }, { name: 'h1c', houseCount: 1, house: 8, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'C' }, { name: 'h2s', houseCount: 2, house: 7, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'S' }, { name: 'h2', houseCount: 2, house: 6, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'B' }, { name: 'h2c', houseCount: 2, house: 5, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'C' }, { name: 'h3', houseCount: 3, house: 4, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'B' }, { name: 'h3c', houseCount: 3, house: 3, water: 0, wild: 0, air: 10, wellbeing: 0, rotate: 1, walkCode: 'C' }, { name: 'h1sg', houseCount: 1, house: 7, water: 0, wild: 2, air: 10, wellbeing: 10, rotate: 1, walkCode: 'S' }, { name: 'h1g' , houseCount: 1, house: 6, water: 0, wild: 2, air: 10, wellbeing: 9, rotate: 1, walkCode: 'B' }, { name: 'h1cg', houseCount: 1, house: 5, water: 0, wild: 2, air: 10, wellbeing: 8, rotate: 1, walkCode: 'C' }, { name: 'h2g', houseCount: 2, house: 2, water: 0, wild: 1, air: 10, wellbeing: 5, rotate: 1, walkCode: 'B' }, { name: 'h2cg', houseCount: 2, house: 1, water: 0, wild: 1, air: 10, wellbeing: 4, rotate: 1, walkCode: 'C' }, { name: 'wild', houseCount: 0, house: 0, water: 1, wild: 10, air: 10, wellbeing: 6, rotate: 0, walkCode: 'N' }, { name: 'water', houseCount: 0, house: 0, water: 10, wild: 2, air: 10, wellbeing: 5, rotate: 0, walkCode: 'N' }, { name: 'park', houseCount: 0, house: 0, water: 0, wild: 5, air: 10, wellbeing: 10, rotate: 0, walkCode: 'N' }, { name: 'pp1', houseCount: 0, house: 0, water: 0, wild: 4, air: 10, wellbeing: 9, rotate: 1, walkCode: 'B' }, { name: 'pp2', houseCount: 0, house: 0, water: 0, wild: 3, air: 10, wellbeing: 8, rotate: 1, walkCode: 'C' }, { name: 'pp4', houseCount: 0, house: 0, water: 0, wild: 2, air: 10, wellbeing: 7, rotate: 0, walkCode: 'A' }, { name: 'road', houseCount: 0, house: 0, water: 0, wild: 0, air: 0, wellbeing: 0, rotate: 0, walkCode: 'A' }, { name: 'bus', houseCount: 0, house: 0, water: 0, wild: 0, air: 0, wellbeing: 0, rotate: 0, walkCode: 'A' }, { name: 'blank' }, ].map(image => { image.url = `https://cdn.jsdelivr.net/gh/gjmcn/sprites/misc/urban-space-tiles/${image.name}.png`; return image; });37:T4e3,// For a corner with a given walk code (A, B, C, S, N - see the images object), // and rotation code, list the corners of the tile covered by path. // // rotation codes: 0: 0, 1: 90, 2: 180, 3: 270 // // corner codes: 0: top-right, 1: bottom-right, 2: bottom-left, 3: top-left // // Example: cornerLists.B[2] gives the corners covered by path for a tile with // walk code 'B' and rotation 2 (i.e. 180 degrees). cornerLists = { // explicitly list corners for each walk code when no rotation const cornerLists = { A: [[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3]], // not dependent on rotation B: [[ 1, 2 ]], C: [[ 1, 2, 3]], S: [[ 2 ]], N: [[ ], [], [], []], // not dependent on rotation }; // generate corner lists for all rotations for (let walkCode of ['B', 'C', 'S']) { for (let i = 0; i < 3; i++) { // 3 rotations of 90 degrees cornerLists[walkCode].push( cornerLists[walkCode].at(-1).map(c => (c + 1) % 4) ); } } // convert inner arrays to sets for (let walkCode of ['A', 'B', 'C', 'S', 'N']) { for (let i = 0; i < 4; i++) { cornerLists[walkCode][i] = new Set(cornerLists[walkCode][i]); } } return cornerLists; }38:T63a,function getWalkAndBusRoutes(sim, driveRoutes) { // prepare bus->work routes as additional edges const work = sim.zones.first(); const busEdges = [...driveRoutes.best(sim.withLabel('kind', 'bus'), work)] .map(([busStopSq, {cost, target}]) => [busStopSq, target, cost, false]) .filter(arr => arr[1]); // walk edge cost function walkEdgeCost(sq1, sq2) { // cannot walk between squares if (!canWalk(sq1, sq2)) { return Infinity; } const p1 = sq1.state.painted ?? {}; // could be work square const p2 = sq2.state.painted ?? {}; // could be work square // special cases where no edge cost if ((p1.walkCode === 'S' && (p2.walkCode === 'S' || p2.walkCode === 'B')) || // corner to corner or 1 edge (p1.walkCode === 'B' && p2.walkCode === 'S') || // 1 edge to corner (p1.walkCode === 'S' && sq2.label('kind') === 'work') || // corner to work (p1.walkCode === 'B' && sq2.label('kind') === 'work' && // 1 edge flat against work ((p1.rotationCode === 0 && sq1.yIndex < work.yMinIndex) || (p1.rotationCode === 3 && sq1.xIndex < work.xMinIndex))) || (p1.walkCode === 'B' && p2.walkCode === 'B' && // 1 edge against to 1 edge Math.abs(p1.rotationCode - p2.rotationCode) === 2)) { return 0; } // standard edge cost return 1; } return sim.routes({ squareCost: 0, edgeCost: walkEdgeCost, edges: 4, extraEdges: busEdges }); }39:T556,neighborhoodScores = { function airQualityLayerScore(layer) { return d3.mean(layer, s => s.state.painted?.air ?? 10); // 10 for work square } function wellbeingLayerScore(layer) { return d3.mean(layer, s => { return s.label('kind') === 'house' ? 0 : s.state.painted?.wellbeing ?? 0; // 0 for work square }); } return function(sq) { let airQuality = 0; let wellbeing = 0; const layer_1 = sq.layer(1); const layer_2 = sq.layer(2); if (layer_2.length === 0) { airQuality += airQualityLayerScore(layer_1); wellbeing += wellbeingLayerScore(layer_1); } else { const layer_3 = sq.layer(3); if (layer_3.length === 0) { airQuality += airQualityLayerScore(layer_1) * 5 / 8; airQuality += airQualityLayerScore(layer_2) * 3 / 8; wellbeing += wellbeingLayerScore(layer_1) * 5 / 8; wellbeing += wellbeingLayerScore(layer_2) * 3 / 8; } else { airQuality += airQualityLayerScore(layer_1) * 0.5; airQuality += airQualityLayerScore(layer_2) * 0.3; airQuality += airQualityLayerScore(layer_3) * 0.2; wellbeing += wellbeingLayerScore(layer_1) * 0.5; wellbeing += wellbeingLayerScore(layer_2) * 0.3; wellbeing += wellbeingLayerScore(layer_3) * 0.2; } } return { airQuality, wellbeing }; } }3a:Td56,function analyseTown(sim) { const work = sim.zones.first(); const houseSquares = sim.withLabel('kind', 'house'); // commute: cost -> score // - 'maxCommuteTime' is taxicab walk cost from top-left square to work; a longer // time is possible, but is given same score const {nx, ny} = sim._grid; const maxCommuteTime = nx + ny - 2 - Math.min(nx - work.xMinIndex, ny - work.yMinIndex); const commuteScale = d3.scaleLinear() .domain([1, maxCommuteTime]) .range([10, 0]) .clamp(true); // require that all squares be painted? if (sim.squares.some(sq => !sq.state.painted && sq.label('kind') !== 'work')) { return { errorMsg: 'Invalid town: blank square' }; } // check sufficient houses if (sim.state.houses < sim.state.minHouses) { return { errorMsg: 'Invalid town: not enough houses' }; } // scores for each house square const houseScores = new Map; const driveRoutes = getDriveRoutes(sim); const driveBest = driveRoutes.best(houseSquares, work); const walkRoutes = getWalkAndBusRoutes(sim, driveRoutes); const walkBest = walkRoutes.best(houseSquares, work); for (let sq of houseSquares) { const res = {}; const { painted } = sq.state; const walkBestSq = walkBest.get(sq); const driveBestSq = driveBest.get(sq); if (walkBestSq.cost === Infinity && driveBestSq.cost === Infinity) { return { errorMsg: `Invalid town: house at ${sq.xIndex},${sq.yIndex} has no route to work`, errorSq: sq } } res.commuteDetails = walkBestSq.cost <= driveBestSq.cost ? { cost: walkBestSq.cost, drive: false, getRoute: () => walkRoutes.route(sq, walkBestSq.target) } : { cost: driveBestSq.cost, drive: true, getRoute: () => driveRoutes.route(sq, driveBestSq.target) } res.commute = commuteScale(res.commuteDetails.cost); res.houseSize = painted.house; const nhoodScores = neighborhoodScores(sq); res.airQuality = (nhoodScores.airQuality / 10) ** 2 * 10; res.wellbeing = Math.min(10, 2 * nhoodScores.wellbeing + 0.7 * painted.wellbeing); houseScores.set(sq, res); } // town scores const townScores = { commute: 0, houseSize: 0, airQuality: 0, wellbeing: 0, wild: 0, water: 0, }; for (let [sq, scores] of houseScores) { const houseCount = sq.state.painted.houseCount; townScores.commute += scores.commute * houseCount; townScores.houseSize += scores.houseSize * houseCount; townScores.airQuality += scores.airQuality * houseCount; townScores.wellbeing += scores.wellbeing * houseCount; } townScores.commute /= sim.state.houses; townScores.houseSize /= sim.state.houses; townScores.airQuality /= sim.state.houses; townScores.wellbeing /= sim.state.houses; for (let sq of sim.squares) { const kind = sq.label('kind'); const { painted } = sq.state; if (painted?.wild || painted?.water) { // could be work square const layer_1 = sq.layer(1); townScores.wild += painted.wild + 0.6 * d3.mean(layer_1, sq => sq.state.painted?.wild ?? 0); townScores.water += painted.water + 0.6 * d3.mean(layer_1, sq => sq.state.painted?.water ?? 0); } }; townScores.wild = Math.min(10, 2 * townScores.wild / sim.squares.size); townScores.water = Math.min(10, 4 * townScores.water / sim.squares.size); return { houseScores, townScores }; }3b:[{"id":"6586937855a40d215bf3f94ab7285ee0e0286967cb371f5e4025fc4987863403a91d21a70f7b4093602c3edadfe60652ce8034efef9451be10b7538e13ee039b","href":"https://static.observableusercontent.com/files/6586937855a40d215bf3f94ab7285ee0e0286967cb371f5e4025fc4987863403a91d21a70f7b4093602c3edadfe60652ce8034efef9451be10b7538e13ee039b","name":"tile-descriptions@1.png","type":"image/png","lastModified":1661088961292.742,"size":26361},{"id":"48235d64525b4980b3bb92d660ad7b1e3c976fa08702fe09fef87ef46817b9d5111df1cce67a9787dc5b436dbc8e850f1712245fa5b48ed29ecaddfa88e79d25","href":"https://static.observableusercontent.com/files/48235d64525b4980b3bb92d660ad7b1e3c976fa08702fe09fef87ef46817b9d5111df1cce67a9787dc5b436dbc8e850f1712245fa5b48ed29ecaddfa88e79d25","name":"demo-towns@3.json","type":"application/json","lastModified":1661106918364.459,"size":100524}] 31:{"id":"7a632b3f80e1cfa3","slug":"atomic-agents-make-a-town","title":"Atomic Agents: Make a town!","thumbnail":"c06cde19048bbacbb7fc9e6820313a5d954ae71629be35bd2fc641aef4d771b2","access_level":"public","create_time":"$D2022-06-28T14:00:17.761Z","update_time":"$D2022-08-23T14:49:15.857Z","view_time":null,"first_public_time":"$D2022-08-22T09:59:18.413Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"e8d01aa1ad67c7da","login":"gjmcn","name":"Graham McNeill","avatar_url":"https://avatars-next.observableusercontent.com/6bc1074cf1405c9f56c21f6117db738ec354ca256eb10a227ae26326b3f90c25","tier":"starter_2024"},"version":2586,"publish_version":2586,"role":null,"authored":false,"authors":[{"type":"individual","id":"b033a0334f495f08","login":"gjmcn","name":"Graham McNeill","avatar_url":"https://avatars-next.observableusercontent.com/6bc1074cf1405c9f56c21f6117db738ec354ca256eb10a227ae26326b3f90c25","tier":null}],"members":[{"type":"individual","id":"b033a0334f495f08","login":"gjmcn","name":"Graham McNeill","avatar_url":"https://avatars-next.observableusercontent.com/6bc1074cf1405c9f56c21f6117db738ec354ca256eb10a227ae26326b3f90c25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"e06bdfdf9d356cb1","slug":"atomic-agents","title":"Atomic Agents","owner":{"id":"e8d01aa1ad67c7da","login":"gjmcn","name":"Graham McNeill"}},"type":"notebook","body":{"title":"Atomic Agents: Make a town!","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2143,"value":"## Instructions\n\nSelect a tile, choose its rotation if appropriate, then paint tiles on the canvas. Use different tiles to paint a town, then click `Analyse Town` to see the scores. You can paint over an existing town to change it and then reanalyse to see how the scores change.\n\nSelect a score category to show the score for each house. Since all houses on the same square have the same score, only one score per square is shown. However, squares with more houses (i.e. more people) are more important to the town scores so are shown in a larger font.\n\nThere is a basic undo option: click `→ Snapshot` to temporarily save a town; click `← Undo` to return to the snapshot. Resetting a town clears the snapshot, so save the town as a file (`Save Town`) if you want to return to it later.\n\n## The Town","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":698,"value":"viewof setupParams = Inputs.form({\n townSize: Inputs.radio(new Map([\n ['tiny', 6],\n ['small', 10],\n ['medium', 15] ,\n ['large', 22]\n ]), {\n label: \"Town size\",\n value: 15,\n }),\n resetTo: Inputs.radio(['clear', 'demo town', 'loaded town'], {label: \"Reset to\", value: 'demo town'}),\n clearTown: Inputs.button(\"Reset Town\", {width: 160})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"DOM.download(\n () => new Blob([drawing.__sim._townData()]),\n 'town.json',\n 'Save Town'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2231,"value":"viewof loadTown = Inputs.file({\n label: \"Load town\",\n accept : \".json\",\n multiple : false,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2288,"value":"__Note:__ to use a loaded town, change the `Reset to` option above the canvas to `loaded town` and ensure that `Town size` is set to the size of the loaded town. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2439,"value":"---\n\n_This prototype will be part of a University of Warwick workshop on exploring hybrid digital-physical prompts for community engagement in urban decision making._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"---\n\n## Helpers and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2372,"value":"demoTowns = FileAttachment(\"demo-towns@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"// For any corner code (0, 1, 2 or 3 - see cornerLists), get the corner that\n// touches it on the neighboring tile in any direction. The direction codes\n// are:\n//\n// 0: up, 1: right, 2: down, 3: left\n//\n// cornerPairs is an array-of-arrays where, e.g. cornerPairs[2][3] means\n// cornerPairs[][] and the value is 1 (i.e. bottom-right).\n// If there is no corresponding corner (e.g. cornerPairs[2][0]) the value is\n// null.\ncornerPairs = [\n [ 1, 3, null, null],\n [null, 2, 0, null],\n [null, null, 3, 1],\n [ 2, null, null, 0],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"// Can walk from square 1 to square 2? - where square 2 is a main neighbor of square 1.\nfunction canWalk(sq1, sq2) {\n\n const p1 = sq1.state.painted;\n const p2 = sq2.state.painted;\n\n // sq1 a work square\n if (sq1.label('kind') === 'work') {\n return false;\n }\n \n // sq2 a work square\n if (sq2.label('kind') === 'work') {\n const corners1 = cornerLists[p1.walkCode][p1.rotationCode]; \n return sq1.yIndex < sq2.yIndex\n ? corners1.has(1) || corners1.has(2)\n : corners1.has(0) || corners1.has(1);\n }\n\n // sq2 not a work square\n const direction = sq1.yIndex === sq2.yIndex \n ? sq1.xIndex < sq2.xIndex ? 1 : 3\n : sq1.yIndex < sq2.yIndex ? 2 : 0;\n const corners1 = cornerLists[p1.walkCode][p1.rotationCode];\n const corners2 = cornerLists[p2.walkCode][p2.rotationCode];\n for (let corner1 of corners1) {\n if (corners2.has(cornerPairs[corner1][direction])) return true; \n }\n return false;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"function getDriveRoutes(sim) {\n return sim.routes({\n squareCost: 0,\n edgeCost: function(sq1, sq2) {\n if (canWalk(sq1, sq2)) {\n const kind_2 = sq2.label('kind');\n if (kind_2 !== 'road' &&\n kind_2 !== 'bus' &&\n kind_2 !== 'work') {\n return Infinity;\n }\n const kind_1 = sq1.label('kind');\n if (kind_1 === 'house' ||\n kind_1 === 'bus' ||\n kind_2 === 'bus' ||\n kind_2 === 'work') {\n return 1;\n }\n return 1 / driveSpeed;\n }\n return Infinity;\n },\n edges: 4,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"count = function(iterable, f) {\n let c = 0;\n for (let val of iterable) {\n if (f(val)) c++;\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"driveSpeed = 4;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"nameLookup = ({\n commute: 'Commute',\n houseSize: 'House size', \n airQuality: 'Air quality',\n wellbeing: 'Wellbeing',\n wild: 'Wildlife',\n water: 'Waterlife',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"AA = import('https://cdn.skypack.dev/@gjmcn/atomic-agents@0.1.9?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"AV = import('https://cdn.skypack.dev/@gjmcn/atomic-agents-vis@0.4.5?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"