libprocessing/crates/processing_wasm/examples/index.html at particles · processing/libprocessing · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Processing</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a1a;
        }
        canvas {
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script type="module">
        import init, * as p from '../../../target/wasm/processing_wasm.js';

        async function main() {
            await init();
            await p.init();
            const surface = p.createSurface('canvas', 600, 600);

            const bgImage = await p.loadImage('images/logo.png');

            let frame = 0;

            function draw() {
                try {
                    p.beginDraw(surface);
                    p.backgroundImage(surface, bgImage);

                    const x = 250 + Math.sin(frame * 0.02) * 200;
                    p.fill(surface, 0.9, 0.1, 0.3, 1.0);
                    p.rect(surface, x, 50, 100, 100, 20, 20, 20, 20);

                    p.endDraw(surface);

                    frame++;
                } catch (e) {
                    console.error('Draw error:', e);
                }

                requestAnimationFrame(draw);
            }

            draw();
        }

        main().catch(console.error);
    </script>
</body>
</html>