Is javascript not fast enough for doing fluid simulation?

Question

I am currently trying to implement a small fluid simulation on P5js. I tried to render 20K squares with a random colour. I got 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 is the problem behind? Is the library not good enough? Or, the poor configuration of my computer? Or, javascript is not suitable for these kinds of implementation?

Answer 1

We can't help debug your code without an MCVE. Specifically, you haven't provided the Sim class, so we can't run your code at all.

But you need to take a step back and ask yourself this: what performance do you expect? You can't really complain about performance if you didn't have any expectations going in.

Also, you might want to figure out how many squares you can display before seeing a performance hit.

From there it's a game of looking for optimizations. You're going to have to do some profiling to understand exactly where your performance hit is. Maybe you display fewer squares, or maybe you lower the framerate, or maybe you do some pre-rendering. Again, what you do depends on exactly what your expectations and goals are.

I will say that you should take that call to console.log() out of your draw() loop. You should only use that for debugging, and it's not going to improve your performance to call that every single frame.