Can an expression be unpacked (spread) as a parameter in javascript?

Question

I'm trying to calculate certain rectangle positions and sizes in the grid, and I'd like to randomize them per each tile.

Can something like this be done:

for (let x = 0; x < p.width; x += tiles) {
  for (let y = 0; y < p.height; y += tiles) {
    let subItemPerTile = p.random(itemsPerTile);
    
    // This should contain random X/Y options using -i, +i, *i in a list
    let coordinatesPerTile = [['x', 'y'], ['x-i', 'y-i'], ['x+i', 'y-i']];

    for (let i = tilesInGrid; i > 0; i--) {
      p.fill(p.color(p.random(255)));
      let s = (tiles * i) / subItemPerTile;

      // This is working method where I'd like to substitute randomly, x,y,s from the list above
      // p.square(x, y, (tiles * i) / subItemPerTile);

      //This was desired way, and I had 's' as the part of the list, but removed it until I figure out if this can be done this way
      //p.square.apply(null, p.random(coordinatesPerTile);
      //p.square(...coordinatesPerTile);


      // This is me debugging on second item in the list
      let coords = coordinatesPerTile[1];
      x = eval(coords[0]);
      y = eval(coords[1]);
      console.log(coords[0]);
      // let s = eval(coords[2]);
      // console.log(s);
      
      // Below works for coordinatesPerTile[0], but not for coordinatesPerTile[1], I don't understand why
      p.square(x, y, s);
    }

Thanks @Bergi ... I shall not do that at 1AM either. I tried putting them as variable names, but had no i declared, so it was throwing errors and ... Thanks! — Balkyto

Paul Wheeler Paul Wheeler · Accepted Answer · 2021-09-16T04:27:12

There is no implicit conversion from a string that includes javascript to the result of evaluating that javascript in the local scope, and any mechanism to do that would be an extremely bad idea. This is probably what you want:

function sketch(p) {
  const tileSize = 20;
  const itemsPerTile = [1, 2, 3, 4];
  
  p.setup = function() {
    p.createCanvas(300, 300);
    p.frameRate(1);
  };

  p.draw = function() {
    for (let x = 0; x < p.width; x += tileSize) {
      for (let y = 0; y < p.height; y += tileSize) {
        let subItemPerTile = p.random(itemsPerTile);

        for (let i = subItemPerTile; i > 0; i--) {
          // By simply declaring this inside the for loop that 
          // defines i, the code is quite simple
          let coordinatesPerTile = [
            [x, y],
            [x - i, y - i],
            [x + i, y - i]
          ];

          p.fill(p.color(p.random(255)));
          let s = (tileSize * i) / subItemPerTile;

          p.square(...p.random(coordinatesPerTile), s);
        }
      }
    }
  };
}

new p5(sketch);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Because your code was incomplete there is a lot of guesswork that went into making the above sketch do something useful.

Can an expression be unpacked (spread) as a parameter in javascript?

1 Answers