agentscript/views3/avalanche.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
56
57
58
59
60
61
62
63
64
<html>
    <head>
        <title>Avalanche</title>
    </head>

    <body>
        <script type="module">
            import * as util from '/src/utils.js'
            import Animator from '/src/Animator.js'
            import Color from '/src/Color.js'
            import ColorMap from '/src/ColorMap.js'
            import ThreeDraw from '/src/ThreeDraw.js'
            import AvalancheModel from '/models/AvalancheModel.js'

            const pi = Math.PI

            /**
             *
             * View
             *
             * */
            const colormap = ColorMap.gradientColorMap(20, [
                'rgb(98,52,18)',
                'white',
            ])
            const drawOptions = {
                patchesMesh: 'PointsMesh',
                patchesSize: 4,
                patchesColor: p => {
                    const pi2 = 2 * Math.PI
                    const aspect2 = (p.aspect + pi2) % pi2
                    const k = (Math.PI - Math.abs(aspect2 - Math.PI)) / Math.PI
                    const snow = colormap.scaleColor(p.snowDepth, 0, 6)
                    const foo = Color.typedColor(
                        k * snow[0],
                        k * snow[1],
                        k * snow[2]
                    )
                    return foo
                },
            }

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

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

            util.toWindow({ util, model, view, ColorMap, Color })

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

            view.idle()
        </script>
        <div id="modelDiv"></div>
    </body>
</html>