cl-api-doc/CL-04. Example Visualiser.mjs at main · Cortical-Labs/cl-api-doc · 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
function createVisualiser(uniqueId, div)
{
    const canvas          = div.querySelector('canvas');
    const drawingContext  = canvas.getContext('2d', { alpha: true });

    const uiSpikeChannel  = div.querySelector('#latest-spike-channel');
    const uiBouncesLeft   = div.querySelector('#bounces-left');
    const uiBouncesRight  = div.querySelector('#bounces-right');
    const uiBouncesTop    = div.querySelector('#bounces-top');
    const uiBouncesBottom = div.querySelector('#bounces-bottom');
    const uiBouncesCorner = div.querySelector('#bounces-corner');

    let latestData;
    let attributes;
    let latestSpike;

    function reset()
    {
        //
        // Reset the visualisation to its initial state.
        //
        // This function is called when the visualisation system is reset, and is also called
        // when the visualisation is first created.
        //

        latestData = null;
        attributes = null;
    }

    function updateBouncesUi()
    {
        uiBouncesLeft.textContent   = attributes.bounces_left;
        uiBouncesRight.textContent  = attributes.bounces_right;
        uiBouncesTop.textContent    = attributes.bounces_top;
        uiBouncesBottom.textContent = attributes.bounces_bottom;
        uiBouncesCorner.textContent = attributes.bounces_corner;
    }

    function attributesReset(dataStreamName, initialAttributes)
    {
        if (dataStreamName == 'gameplay')
        {
            attributes = initialAttributes;
            updateBouncesUi();
        }
    }

    function attributesUpdated(dataStreamName, updatedAttributes)
    {
        if (dataStreamName == 'gameplay')
        {
            attributes = { ...attributes, ...updatedAttributes };
            updateBouncesUi();
        }
    }

    function process(dataStreamName, timestamp, data)
    {
        //
        // Called for EVERY (timestamp, data) pair in the data stream.
        //
        // Use this to modify any global state needed by draw().
        //

        if (dataStreamName == 'gameplay')
        {
            latestData = data;
            return;
        }

        if (dataStreamName == 'cl_spikes')
        {
            latestSpike = data;
            uiSpikeChannel.innerText = data.channel;
        }
    }

    function draw()
    {
        //
        // Render the latest data.
        //
        // This function is NOT necessarily called for every
        // (timestamp, data) pair in the data stream - it is called
        // only when the visualisation system needs a new image to
        // display, and is always passed the most recent
        // (timestamp, data) pair.
        //

        if (attributes)
            if (canvas.width != attributes.game_width || canvas.height != attributes.game_height)
            {
                canvas.width  = attributes.game_width;
                canvas.height = attributes.game_height;
            }

        drawingContext.clearRect(0, 0, canvas.width, canvas.height);

        if (latestSpike)
        {
            //
            // Draw the most recent spike
            //

            drawingContext.strokeStyle = 'lightblue';
            const halfY = canvas.height / 2;

            drawingContext.beginPath();

            for (let sample = 0; sample < 75; sample++)
            {
                const x = (canvas.width - 1) * sample / 74;
                const y = halfY + (latestSpike.samples[sample] / 4);

                if (sample == 0)
                    drawingContext.moveTo(x, y);
                else
                    drawingContext.lineTo(x, y);
            }

            drawingContext.stroke();
        }

        if (latestData && attributes)
        {
            //
            // Draw the ball
            //

            drawingContext.fillStyle = 'white';
            drawingContext.fillRect(
                latestData.x - attributes.ball_width  / 2,
                latestData.y - attributes.ball_height / 2,
                attributes.ball_width,
                attributes.ball_height);
        }
    }

    return  {
                // Settings
                bufferMs: 1000 / 60 * 1,

                // Functions
                reset,
                attributesReset,    // Optional
                attributesUpdated,  // Optional
                process,
                draw
            };
}