Calculating particle size and distance between them in Javascript

Question

I'm trying to display an image with particles. It works, but the amount of particles is dependant on a variable (numberOfParticles) that can range between 0 and 3000. On any value, the image should be rendered in the best way possible with the given amount of particles. There is a nested for loop that goes through the image data (height and width) and creates particles like this.

for (var y = 0; y < data.height; y+=averageDistance) {
    for (var x = 0; x < data.width; x+=averageDistance) {
        if (particles.length < numberOfParticles){
            var particle = {
                x0: x,
                y0: y,
                color: "rgb("+data.data[(y * 4 * data.width)+ (x * 4)]+","+data.data[(y * 4 * data.width)+ (x * 4) +1]+","+data.data[(y * 4 * data.width)+ (x * 4) +2]+")"
            };
            particles.push(particle);
        }
    }
}

Later in the code, the particles get rendered with a given size.

My question is, how do I calculate the size the particles should have and the distance that should be between them?

I've tried calculating the 'average distance', counting the amount of pixels that are not covered by particles and dividing that through the amount of particles, but I can't get it to work correctly. There's always leftover space (so the bottom part doesn't get filled) or leftover particles (so there are only 40 particles shown, instead of 50) on some value of the variable numberOfParticles.

Answer 1

A solution to the mathematical part can be found in this answer.

To find number of points for x (n_x) we can use that formula:

Then number of points for y (n_y):

ny = n / nx

In JavaScript code:

nx = Math.sqrt((w / h) * n + Math.pow(w - h, 2) / (4 * Math.pow(h, 2))) - (w - h) / (2 * h);
ny = n / nx;

Using the numbers nx and ny we can then calculate the deltas for x and y:

dx = w / nx;
dy = h / ny;

Example

var ctx = c.getContext("2d"), n, w, h, nx, ny, dx, dy, x, y;

// define values
n = 1600;
w = c.width - 1;   // make inclusive
h = c.height - 1;

// plug values into formula
nx = Math.sqrt((w / h) * n + Math.pow(w - h, 2) / (4 * Math.pow(h, 2))) - (w - h) / (2 * h);
ny = n / nx;

// calculate deltas
dx = w / nx;
dy = h / ny;

// render proof-of-concept
for(y = 0; y < h; y += dy) {
  for(x = 0; x < w; x += dx) {
    ctx.fillStyle = "hsl(" + (360*Math.random()) + ",50%,50%";
    ctx.fillRect(x, y, dx-1, dy-1);
  }
}

o.innerHTML = "Points to place: " + n + "<br>" + 
  "<strong>n<sub>x</sub></strong>: " + nx.toFixed(2) + "<br>" + 
  "<strong>n<sub>y</sub></strong>: " + ny.toFixed(2) + "<br>" +
  "ΔX: " + dy.toFixed(2) + "<br>" +
  "ΔY: " + dy.toFixed(2) + "<br>" +
  "Total (nx × ny): " + (nx * ny).toFixed(0);

<canvas id=c width=600 height=400></canvas>
<br><output id=o></output>