p5.js/test/bench/set_benchmark.html at f60fccbd85985c6fd0eab8cadc990937ed4e41a1 · processing/p5.js · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.Graphics.set() benchmark</title>
  <script src="../../lib/p5.js"></script>
  <style>
    body { font-family: monospace; padding: 20px; background: #1a1a1a; color: #eee; }
    #output { white-space: pre-wrap; line-height: 1.6; }
    .highlight { color: #7fdbca; }
    .warn { color: #ffcc66; }
  </style>
</head>
<body>
  <h2>p5.Graphics.set() benchmark</h2>
  <div id="output">Starting benchmark...</div>

  <script>
    const output = document.getElementById('output');
    const W = 100, H = 100;
    const ITERATIONS = 50; // frames to average
    const FPS_OVERHEAD_MS = 1; // rough p5 overhead per frame

    let myp5;
    let results = [];

    function log(msg, cls = '') {
      output.innerHTML += (cls ? `<span class="${cls}">${msg}</span>` : msg) + '\n';
    }

    function run() {
      myp5 = new p5(function (p) {
        p.setup = function () {
          p.noCanvas();
          const buf = p.createGraphics(W, H);
          const col = p.color(255, 0, 0);

          log(`Buffer: ${W}x${H}, iterations: ${ITERATIONS}`);
          log('Running set() benchmark...\n');

          for (let i = 0; i < ITERATIONS; i++) {
            const t0 = performance.now();
            for (let y = 0; y < H; y++) {
              for (let x = 0; x < W; x++) {
                buf.set(x, y, col);
              }
            }
            const t1 = performance.now();
            results.push(t1 - t0);
          }

          const avg = results.reduce((a, b) => a + b, 0) / results.length;
          const min = Math.min(...results);
          const max = Math.max(...results);

          log(`Results (${ITERATIONS} iterations):`);
          log(`  Average: ${avg.toFixed(2)} ms`);
          log(`  Min:     ${min.toFixed(2)} ms`);
          log(`  Max:     ${max.toFixed(2)} ms`);
          log(`\np5.js version: ${p5.version || 'unknown'}`);

          myp5.remove();
        };
      });
    }

    // small delay so p5 loads
    setTimeout(run, 100);
  </script>
</body>
</html>