agentscript
Version:
AgentScript Model in Model/View architecture
71 lines (53 loc) • 1.97 kB
HTML
<html>
<head>
<title>Model Hello</title>
</head>
<body>
<script type="module">
import * as mltools from './mltools.js'
import Model from '../models/HelloModel.js'
import TwoDraw from '../src/TwoDraw.js'
import Animator from '../src/Animator.js'
const bbox = mltools.santaFeBBox
const worldOptions = { bbox, patchesWidth: 100 }
const model = new Model(worldOptions)
model.setup()
const view = new TwoDraw(model, {
div: mltools.newCanvas(),
patchSize: 20,
drawOptions: {
patchesColor: 'transparent',
turtlesSize: 4,
linksWidth: 0.2,
},
})
// ===== Start of map & layers
const terrain = mltools.terrain('osm')
const map = await mltools.newMap(bbox, 10)
mltools.addRasterLayer(map, 'terrain', terrain)
mltools.addGeojsonLayer(map, 'rectangle', bbox, 'rgba(255, 0, 0, 0.2)', 'red', 3)
mltools.addCanvasLayer(map, 'model', view.canvas, bbox)
mltools.addLayerCursor(map, 'rectangle')
// fcn args: fcn(bbox) where bbox is dragged rectangle in geo coords
// const fcn = bbox => console.log(bbox)
// const fcn = async bbox => {
// await modelView.setWorld({ bbox: bbox, patchesWidth: 100 })
// // modelView.run() // not needed, initial run steps is -1, forever
// mltools.updateGeojson(map, 'rectangle', bbox)
// mltools.updateCanvas(map, 'model', modelView.canvas, bbox)
// map.panTo(mltools.bboxCenter(bbox))
// }
// mltools.addDragRect(map, fcn)
// ===== End of map & layers
new Animator(
() => {
model.step()
view.draw()
},
-1, // run forever
30 // fps
)
</script>
<div id="map"></div>
</body>
</html>