ista-datavis/test_preload.html at main · StudioProcess/ista-datavis · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ISTA Datavis Sketch</title>
    <script src="./node_modules/p5/lib/p5.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <style>
        main { display: none; }
        pre {
            background: white;
            width: 100dvw;
            height: 100dvh;
            white-space: pre-wrap;
            overflow-y: scroll;
        }
    </style>
    <pre id="console"></pre>

    <script type="module">
        // Testing preload with async/await

        import util from './util.mjs';


        function delay(duration = 3000) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(true);
                }, duration);
            });
        }

        // async function preload() {
        //     self._incrementPreload();
        //     // await delay(1);
        //     // console.log(self);
        //     await delay(3000);
        //     self._decrementPreload();
        //     console.log('first part of preloading');
        //
        //     self._incrementPreload();
        //     // await delay(1);
        //     // console.log(self);
        //     await delay(1000);
        //     self._decrementPreload();
        //
        //     console.log('done preloading');
        // }


        async function preload() {

            util.begin_preload();
            // self._incrementPreload();

            await util.preload(async function() {
                await delay(3000);
            });
            console.log('preload async function done');


            await util.preload(async function() {
                await delay(3000);
            });
            console.log('preload async function 2 done');

            await util.preload( delay(3000) );
            console.log('preload promise done');

            // self._decrementPreload();
            util.end_preload();
        }

        // const loadingPromise = delay(5000);

        async function setup() {
            frameRate(1);
            // noLoop();
            console.log('sync setup finished');
            await delay(3000);
            console.log('setup finished');
        }

        async function draw() {
            console.log(frameCount);
        }

        util.register_global(preload, setup, draw);

        /*
            draw() runs without createCanvas();
            noLoop() in setup causes draw to run one time
            await within setup() does wait
            await within draw() does wait
            await within preload() doew wait
            but draw() doesn't wait on awaited promises in setup

            self._incrementPreload() and self._decrementPreload() work withing preload()
            ONLY if incrementPreload() is run syncronously.
            mutliple increment/decrement pairs will also ONLY work syncronously.

            window._incrementPreload() or this._incrementPreload() do work
            but _incrementPreload() doesn't

            p5.prototype.registerPreloadMethod() seems to simply call increment preload automatically, so only decrement is necessary
        */

    </script>
</body>
</html>