agentscript/mvc/tsp.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
    <head>
        <title>tsp</title>
    </head>

    <body>
        <script type="module">
            import Model from '/models/TspModel.js'
            import TwoDraw from '/src/TwoDraw.js'
            import Animator from '/src/Animator.js'

            import Mouse from '/src/Mouse.js'
            import Keyboard from '/src/Keyboard.js'
            import GUI from '/src/GUI.js'
            import Plot from '/src/Plot.js'

            //NOTE: model width doesn't show until a step taken
            // ditto turtle size

            // ==== Define draw options ====

            const breedSize = { nodes: 2, travelers: 0 }
            const drawOptions = {
                patchesColor: 'black',
                turtlesShape: 'circle',
                turtlesSize: t => breedSize[t.breed.name],
                turtlesColor: 'yellow',
                linksColor: 'red',
            }

            // =========== Init Model, View, Animator ===================

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

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

            const anim = new Animator(
                () => {
                    model.step()
                    view.draw()
                    plot.updatePlotFromModel(model)
                    if (model.done) anim.stop()
                },
                -1, // run until done
                30 // 30 fps
            ).startStats()
            anim.setIdle(() => view.draw())

            // ==== Define keyboard commands ====

            const keyCommands = [
                { key: 's', cmd: () => anim.toggle() },
                { key: 'o', cmd: () => anim.once() },
                { key: 'd', cmd: () => view.downloadCanvas() },
            ]
            const keyboard = new Keyboard(keyCommands).start()

            // =========== UI Elements ===================

            let template = {
                fps: {
                    slider: [40, [5, 60, 5]],
                    cmd: val => anim.setFps(val),
                },
                stop: {
                    switch: !anim.isRunning, // bool
                    cmd: val => {
                        if (val) {
                            anim.stop()
                        } else {
                            anim.start()
                        }
                    },
                },
                once: {
                    button: () => anim.once(),
                },
                patchSize: {
                    slider: [4, [0, 15, 1]],
                    cmd: val => view.reset(val),
                },
                turtlesShape: {
                    chooser: [
                        'circle',
                        ['bug', 'dart', 'person', 'circle', 'arrow'],
                    ],
                    cmd: val => (view.drawOptions.turtlesShape = val),
                },
                turtlesSize: {
                    slider: [3, [1, 15, 1]],
                    cmd: val => (view.drawOptions.turtlesSize = val),
                },
                downloadCanvas: {
                    button: () => view.downloadCanvas(),
                },
                bestTourLength: {
                    monitor: [model, 'bestTourLength'],
                },
                modelTicks: {
                    monitor: [model, 'ticks'],
                },
                downloadCanvas: {
                    button: () => view.downloadCanvas(),
                },
            }
            const gui = new GUI(template, 280)

            // ============ Mouse Handling ==================

            let selectedTurtle
            const mouse = new Mouse(model, view, mouse => {
                const { x, y, action } = mouse
                switch (action) {
                    case 'mousedown':
                        selectedTurtle = model.nodes.minOneOf(t =>
                            t.distanceXY(x, y)
                        )
                        break
                    case 'mousedrag':
                        if (selectedTurtle) selectedTurtle.setxy(x, y)
                        break
                    case 'mouseup':
                        selectedTurtle = null
                        break
                }
                view.draw() // Draw whenever mouse has an event
            }).start()

            // ============ Plot new tours  ==================

            const pens = {
                bestTourLength: 'red', // red lines
            }
            const options = {
                title: 'TourLength',
                width: 800,
                height: 200,
                legend: {
                    show: true,
                },
            }
            const plot = new Plot('plotDiv', pens, options)

            // ============ Done w/ controllers!  ==================

            // util.toWindow({ util, model, view, anim, gui, plot })
        </script>

        <div id="modelDiv"></div>
        <div id="plotDiv"></div>
    </body>
</html>