<html>

<head>
    <title>helloPatches</title>
</head>

<body>
    <script type="module">
        import * as util from 'https://code.agentscript.org/src/utils.js'
        import Animator from 'https://code.agentscript.org/src/Animator.js'
        import ThreeDraw from 'https://code.agentscript.org/src/ThreeDraw.js'
        import Model from 'https://code.agentscript.org/models/HelloModel.js'

        const model = new Model()
        model.population = 50
        model.linksToo = false
        await model.startup()
        model.setup()

        model.turtles.ask(t => t.z = util.randomCentered(20))

        const drawOptions = {
            turtlesSize: 4,
            patchesColor: 'rgba(255,255,255,0.15)',

            // patchesColor: p => {
            //     const ts = p.turtlesHere
            //     return ts.length === 0 ? 'rgba(255,255,255,0.1)' : view.getColor(ts[0])
            // }
        }

        const view = new ThreeDraw(model, {
            div: 'modelDiv',
            drawOptions,
        })

        const anim = await new Animator(
            () => {
                model.step()
                view.draw()
            },
            500,
            30
        )

        view.idle()

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

</html>