onepagers/mouse.html at master · backspaces/onepagers · 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
<html>
    <head>
        <title>Mouse</title>
    </head>
    <body>
        <script type="module">
            import World from 'https://agentscript.org/src/World.js'
            import Model from 'https://agentscript.org/src/Model.js'
            import util from 'https://agentscript.org/src/util.js'
            import TwoDraw from 'https://agentscript.org/src/TwoDraw.js'
            import ColorMap from 'https://agentscript.org/src/ColorMap.js'
            import Mouse from 'https://agentscript.org/src/Mouse.js'

            class MouseModel extends Model {
                constructor() {
                    super(World.defaultOptions()) // Default "NL" world
                    this.population = 20
                }
                setup() {
                    const { patches, turtles, links } = this
                    // this is sorta slick NL use. Can easily be two liner.
                    patches.nOf(20).ask(p => p.sprout(1))

                    // again, kinda slick, can be broken into a couple of lines.
                    turtles.ask(t => links.create(t, turtles.otherOneOf(t)))
                }
                step() {}
            }

            const model = new MouseModel()
            model.setup()

            const view = new TwoDraw(
                model,
                { patchSize: 15 },
                {
                    patchesColor: 'black',
                    linksColor: l => (l === selectedLink ? 'red' : 'gray'),
                    linksWidth: 2,
                    turtlesShape: 'circle',
                    turtlesColor: 'random',
                }
            )

            const mouse = new Mouse(
                view.canvas,
                model.world,
                handleMouse
            ).start()

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

            let selectedTurtle, selectedLink
            function handleMouse(mouse) {
                const { x, y, action } = mouse
                switch (action) {
                    case 'down':
                        selectedTurtle = model.turtles.closestTurtle(x, y, 2)
                        break
                    case 'drag':
                        if (selectedTurtle) selectedTurtle.setxy(x, y)
                        break
                    case 'move':
                        selectedLink = model.links.minOneOf(l =>
                            l.distanceXY(x, y)
                        )
                        break
                    case 'up':
                        selectedTurtle = null
                        break
                }
                view.draw() // Draw whenever mouse has an event
            }

            view.draw() // Draw once to get started

            // DOES NOTE NEED: Driven by dynamics of the mouse itself!
            // util.timeoutLoop(
            //     () => {
            //         model.step()
            //         view.draw()
            //     },
            //     -1,
            //     33
            // ).then(() => console.log('done'))
        </script>
    </body>
</html>