agentscript/mvc/flock.html at master · backspaces/agentscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
    <head>
        <title>flock</title>
    </head>

    <body>
        <script type="module">
            import * as util from '/src/utils.js'
            import TwoDraw from '/src/TwoDraw.js'
            import Animator from '/src/Animator.js'
            import Model from '/models/FlockModel.js'
            import dat from '/vendor/dat.gui.js'

            // ==============================

            const model = new Model()
            await model.startup()
            model.setup()

            const view = new TwoDraw(model, {
                div: 'modelDiv',
                width: 500,
            }) // default drawOptions!

            const anim = new Animator(
                () => {
                    model.step()
                    view.draw()
                },
                500, // run 500 steps
                30 // 30 fps
            ).startStats()

            // ==============================

            const gui = new dat.GUI()
            gui.add(anim, 'fps', 1, 60, 1).onChange(() => anim.reset())
            gui.add(anim, 'toggle')
            gui.add(anim, 'once')
            gui.add(model, 'population', 100, 1000, 100).onChange(val => {
                model.reset()
                model.setup()
            })
            gui.add(view, 'width', 100, 1000, 25)
            // gui.add(view.drawOptions, 'turtlesShape', ['bug', 'dart', 'person'])
            gui.add(view.drawOptions, 'turtlesSize', 1, 10, 1)
            gui.add(view, 'downloadCanvas')

            // ==============================

            util.toWindow({ util, model, view, anim, gui })
        </script>
        <div id="modelDiv"></div>
    </body>
</html>