I was trying to add a p5.js sketch to my website, so as first try, I grabbed a sketch from Daniel Shiffman's 3D terrain generation with Perlin Noise video (link 1, link 2) to my Svelte project, when I noticed that the sketch seemed to be running much slower than it was in the p5.js web editor.
To test my suspicions, I timed the execution of the draw call with performance.now(). Results in the p5.js web editor yielded an average execution time of ~10ms. In my svelte project, execution time took about 80ms. To confirm whether this was just a one-off problem, I threw together a codepen, and saw the execution times remained poor compared to the web editor.
To clear any doubts that this was Svelte or Codepen related, I created a new directy, threw in a boilerplate html file and imported p5.min.js from the CDN, and finally linked the sketch.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"></script>
</head>
<body>
<script src="./sketch.js"></script>
</body>
</html>
Then, I ran my project using (npm) serve, and observed that the execution times were still the same. It's not frameRate related, (that should only dictate how often the draw call is called, but I tried experimenting with setting different framerates anyway, and the time it took for the draw call to execute stayed consistent throughout).
This is the sketch I was experimenting with. My suspicion (although it is kind of a stab in the dark) is that it has to do with the WebGL mode used in that sketch (createCanvas(600, 600, WEBGL);), and that the web editor version is hardware accelerated, but my local project version is not. That's kind of a weird idea though, as to my understanding hardware acceleration should be enbaled browser-wide?
If anyone could elaborate as to why there is such a massive discrepancy between performance, and how I can make the sketch on my website run as smooth as the web editor one, it'd be hugely appreciated.
The contents of the particular sketch.js I was testing, originally written by Daniel Shiffman:
// Daniel Shiffman
// http://codingtra.in
// https://youtu.be/IKB1hWWedMk
// https://thecodingtrain.com/CodingChallenges/011-perlinnoiseterrain.html
// Edited by SacrificeProductions
var cols, rows;
var scl = 20;
var w = 1400;
var h = 1000;
var flying = 0;
var terrain = [];
function setup() {
createCanvas(600, 600, WEBGL);
cols = w / scl;
rows = h / scl;
for (var x = 0; x < cols; x++) {
terrain[x] = [];
for (var y = 0; y < rows; y++) {
terrain[x][y] = 0; //specify a default value for now
}
}
}
function draw() {
flying -= 0.1;
var yoff = flying;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
xoff += 0.2;
}
yoff += 0.2;
}
background(0);
translate(0, 50);
rotateX(PI / 3);
fill(200, 200, 200, 150);
translate(-w / 2, -h / 2);
for (var y = 0; y < rows - 1; y++) {
beginShape(TRIANGLE_STRIP);
for (var x = 0; x < cols; x++) {
vertex(x * scl, y * scl, terrain[x][y]);
vertex(x * scl, (y + 1) * scl, terrain[x][y + 1]);
}
endShape();
}
}