agentscript
Version:
AgentScript Model in Model/View architecture
99 lines (82 loc) • 3.19 kB
HTML
<html>
<head>
<title>IDE</title>
<link rel="stylesheet" href="style.css" />
<!-- <link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Ubuntu+Mono&display=swap"
/> -->
</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="/editor/examples.html">Examples</a>
<a class="nav-button" href="/docs">Docs</a>
<a
class="nav-button"
href="https://github.com/backspaces/agentscript?tab=readme-ov-file#AgentScript"
>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 '/src/Animator.js'
import TwoDraw from '/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 (model.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>