Currently, I am tackling the challenge of implementing a small fluid simulation in P5js. My attempt involved rendering 20,000 squares with random colors, but I only achieved a frame rate of 2.xxx.
var sim;
var xdim = 200; var xLength;
var ydim = 100; var yLength;
function setup() {
createCanvas(800,400);
sim = new Sim(xdim, ydim);
}
function draw() {
xLength = width/xdim;
yLength = height/ydim;
for (var i = 0; i < xdim; ++i) for (var j = 0; j < ydim; ++j) {
fill(100);
rect(i*xLength, j*yLength, xLength, yLength);
}
console.log(frameRate());
}
What could be the underlying issue here? Is it a limitation of the P5js library? Perhaps my computer's configuration is lacking, or maybe JavaScript is not the best choice for this kind of implementation?