wasmfract/index.html at master · mindhells/wasmfract · 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
<!DOCTYPE html>
<html>
  <head>
    <title>wasmfract: proof of concept</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="./a.out.js"></script>
    <script>
      Module.onRuntimeInitialized = async _ => {
        const api = {
          generate_fractal: Module.cwrap('generate_fractal', '', []),
          destroy_fractal: Module.cwrap('destroy_fractal', '', ['number']),
          get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
          get_result_size: Module.cwrap('get_result_size', 'number', []),
        };

        // generate the fractal and get the output data
        api.generate_fractal();
        const p = api.get_result_pointer();
        const size = api.get_result_size();
        const resultView = new Uint8Array(Module.HEAP8.buffer, p, size);
        const result = new Uint8Array(resultView);


        // convert the result data from RGB to RGBA
        const width = 640;
        const height = 480;
        const buffer = new Uint8ClampedArray(width * height * 4);
        for(var y = 0; y < height; y++) {
              for(var x = 0; x < width; x++) {
                  var pos = (y * width + x) * 4;
                  var result_pos = (y * width + x) * 3;
                  buffer[pos] = result[result_pos];
                  buffer[pos+1] = result[result_pos+1];
                  buffer[pos+2] = result[result_pos+2];
                  buffer[pos+3] = 255;
              }
        }

        // draw the resulting image into a canvas
        const canvas = document.getElementById('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        const imageData = ctx.createImageData(640, 480);
        imageData.data.set(buffer);
        ctx.putImageData(imageData, 0, 0);

        // free the fractal allocated memory
        console.log("results", p, size);
        api.destroy_fractal(p);
      };
    </script>
  </body>
</html>