agentscript
Version:
AgentScript Model in Model/View architecture
89 lines (72 loc) • 2.71 kB
HTML
<html>
<head>
<title>IDE</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="navDiv">
<div class="button-row">
<a class="nav-button" href="./index.html">agentscript</a>
<div class="spacer"></div>
<a class="nav-button" href="./examples.html">Examples</a>
<a class="nav-button" href="https://glitch.com/edit/#!/agentscript-template?path=README.md">Editor</a>
<a class="nav-button" href="https://code.agentscript.org/docs">Docs</a>
<a class="nav-button" href="https://code.agentscript.org/">Code</a>
</div>
</header>
<div id="modelDiv"></div>
<div id="textDiv">
<div class="title">Agentscript</div>
<div class="subtitle">agent based modeling in the browser</div>
<a class="learnmore" href="./Snippets.html">learn more</a>
</div>
<script type="module">
import Animator from "https://code.agentscript.org/src/Animator.js"
import TwoDraw from "https://code.agentscript.org/src/TwoDraw.js"
import AntsOptions from './Ants.js'
import DartsOptions from './Darts.js'
console.log('Ants', AntsOptions)
console.log('Darts', DartsOptions)
let ModelOptions = DartsOptions
// let { Model, patchSize, drawOptions } = ModelOptions
let anim
async function updateSize() {
if (anim) anim.stop()
const { Model, patchSize, drawOptions } = ModelOptions
const options = TwoDraw.fullScreenOptions(patchSize, "white", 0)
const model = new Model(options)
model.setup()
const view = new TwoDraw(
model,
{ div: 'modelDiv', patchSize, drawOptions },
)
anim = new Animator(
() => {
model.step()
view.draw()
if (anim.ticks === 250) switchModel()
},
-1, // run forever
30 // at 30 steps/second
)
}
function switchModel() {
anim.reset()
ModelOptions = ModelOptions === AntsOptions ? DartsOptions : AntsOptions
updateSize()
}
updateSize()
window.addEventListener("resize", updateSize)
document
.getElementById("modelDiv")
.addEventListener("contextmenu", (e) => {
e.preventDefault()
})
document
.getElementById("textDiv")
.addEventListener("contextmenu", (e) => {
e.preventDefault()
})
</script>
</body>
</html>