agentscript
Version:
AgentScript Model in Model/View architecture
94 lines (82 loc) • 2.75 kB
HTML
<html>
<head>
<title>HelloGui</title>
</head>
<body>
<div id="modelDiv"></div>
<script type="module">
import Animator from '../src/Animator.js'
import GUI from '../src/GUI.js'
import Model from '../models/HelloModel.js'
import TwoDraw from '../src/TwoDraw.js'
import * as util from '../src/utils.js'
const model = new Model()
await model.startup()
model.setup()
const drawOptions = {
turtlesSize: 3,
}
const view = new TwoDraw(model, {
div: 'modelDiv',
patchSize: 20,
drawOptions
})
const anim = new Animator(
() => {
model.step()
view.draw()
gui.update()
},
-1, // run forever
30 // 30 fps
).startStats()
const gui = new GUI({
fps: { // val numeric array: slider
val: [30, [5, 60, 5]],
cmd: val => anim.setFps(val),
},
turtlesShape: { // val string array: chooser
val: ['bug', ['bug', 'dart', 'person']],
cmd: val => view.drawOptions.turtlesShape = val,
},
turtlesColor: { // val color string: color picker
val: '#ff0000',
cmd: val => view.drawOptions.turtlesColor = val,
},
pause: { // val bool: switch/toggle
val: false,
cmd: val => { if (val) { anim.stop() } else { anim.start() } },
},
setTitle: { // val string: input
val: document.title,
cmd: val => document.title = val
},
downloadCanvas: { // no val: button
cmd: () => view.downloadCanvas(),
},
modelTicks: { // monitor
val: [model, 'ticks'],
// cmd: val => val = model.ticks,
// cmd: () => model.ticks,
},
})
util.toWindow({ model, view, anim, GUI, gui })
console.log(gui)
</script>
</body>
</html>
<!--
turtlesColor val behavior:
val: '#ff0000',
val: 'rgb(255, 0, 0)',
val: '#f00', // => #ff0000
val: 'rgba(255, 0, 0, 0.5)', // color picker sticks at 0.5
val: 'red', // becomes a text input for named/#hex/rgb(a) colors
val: 'hsv(360, 90%, 0%)', // doesn't work
val: 'hsl(360, 100%, 50%)', // doesn't work
val: [0, 128, 255, 0.3], // works, but not JS color
val: { h: 350, s: 0.9, v: 0.3 }, // works, but not JS color
gui.values.turtlesColor = { h: 350, s: 0.9, v: 0.3 }
gui.values.turtlesColor // right color controller
-->