Javascript 为什么使用'color'设置像素颜色会产生如此糟糕的性能

我正在写一个物理模拟，希望使用P5*JS（处理语言的JS实现）对结果进行后处理

我使用以下代码设置每个像素的颜色：

colorMode(RGB,1);
for (var x = 0; x < nX; x++) {
  for (var y = 0; y < nY; y++) {
    var id = getIdx(x,y);
    var v = vArray[id]; //range=[0,1]
    var c = color(v, 0, 1-v);
    set(x, y, c);
  }
}
updatePixels();

---

colorMode（）

不再需要显式设置。

要了解

color（）

函数的作用，最好的方法是转到

以下是

color（）

函数的开头：

p.color = function(aValue1, aValue2, aValue3, aValue4) {

      // 4 arguments: (R, G, B, A) or (H, S, B, A)
      if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef && aValue4 !== undef) {
        return color$4(aValue1, aValue2, aValue3, aValue4);
      }

      // 3 arguments: (R, G, B) or (H, S, B)
      if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef) {
        return color$4(aValue1, aValue2, aValue3, colorModeA);
      }

      // 2 arguments: (Color, A) or (Grayscale, A)
      if (aValue1 !== undef && aValue2 !== undef) {
        return color$2(aValue1, aValue2);
      }

      // 1 argument: (Grayscale) or (Color)
      if (typeof aValue1 === "number") {
        return color$1(aValue1);
      }

      // Default
      return color$4(colorModeX, colorModeY, colorModeZ, colorModeA);
    };

 function color$4(aValue1, aValue2, aValue3, aValue4) {
      var r, g, b, a;

      if (curColorMode === PConstants.HSB) {
        var rgb = p.color.toRGB(aValue1, aValue2, aValue3);
        r = rgb[0];
        g = rgb[1];
        b = rgb[2];
      } else {
        r = Math.round(255 * (aValue1 / colorModeX));
        g = Math.round(255 * (aValue2 / colorModeY));
        b = Math.round(255 * (aValue3 / colorModeZ));
      }

      a = Math.round(255 * (aValue4 / colorModeA));

      // Limit values less than 0 and greater than 255
      r = (r < 0) ? 0 : r;
      g = (g < 0) ? 0 : g;
      b = (b < 0) ? 0 : b;
      a = (a < 0) ? 0 : a;
      r = (r > 255) ? 255 : r;
      g = (g > 255) ? 255 : g;
      b = (b > 255) ? 255 : b;
      a = (a > 255) ? 255 : a;

      // Create color int
      return (a << 24) & PConstants.ALPHA_MASK | (r << 16) & PConstants.RED_MASK | (g << 8) & PConstants.GREEN_MASK | b & PConstants.BLUE_MASK;
    }

然后调用

color$4（）

函数：

p.color = function(aValue1, aValue2, aValue3, aValue4) {

      // 4 arguments: (R, G, B, A) or (H, S, B, A)
      if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef && aValue4 !== undef) {
        return color$4(aValue1, aValue2, aValue3, aValue4);
      }

      // 3 arguments: (R, G, B) or (H, S, B)
      if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef) {
        return color$4(aValue1, aValue2, aValue3, colorModeA);
      }

      // 2 arguments: (Color, A) or (Grayscale, A)
      if (aValue1 !== undef && aValue2 !== undef) {
        return color$2(aValue1, aValue2);
      }

      // 1 argument: (Grayscale) or (Color)
      if (typeof aValue1 === "number") {
        return color$1(aValue1);
      }

      // Default
      return color$4(colorModeX, colorModeY, colorModeZ, colorModeA);
    };

 function color$4(aValue1, aValue2, aValue3, aValue4) {
      var r, g, b, a;

      if (curColorMode === PConstants.HSB) {
        var rgb = p.color.toRGB(aValue1, aValue2, aValue3);
        r = rgb[0];
        g = rgb[1];
        b = rgb[2];
      } else {
        r = Math.round(255 * (aValue1 / colorModeX));
        g = Math.round(255 * (aValue2 / colorModeY));
        b = Math.round(255 * (aValue3 / colorModeZ));
      }

      a = Math.round(255 * (aValue4 / colorModeA));

      // Limit values less than 0 and greater than 255
      r = (r < 0) ? 0 : r;
      g = (g < 0) ? 0 : g;
      b = (b < 0) ? 0 : b;
      a = (a < 0) ? 0 : a;
      r = (r > 255) ? 255 : r;
      g = (g > 255) ? 255 : g;
      b = (b > 255) ? 255 : b;
      a = (a > 255) ? 255 : a;

      // Create color int
      return (a << 24) & PConstants.ALPHA_MASK | (r << 16) & PConstants.RED_MASK | (g << 8) & PConstants.GREEN_MASK | b & PConstants.BLUE_MASK;
    }

函数颜色$4（aValue1、aValue2、aValue3、aValue4）{
风险值r、g、b、a；
if（curColorMode==PConstants.HSB）{
var rgb=p.color.toRGB（aValue1、aValue2、aValue3）；
r=rgb[0]；
g=rgb[1]；
b=rgb[2]；
}否则{
r=数学四舍五入（255*（aValue1/colorModeX））；
g=数学四舍五入（255*（aValue2/colorModeY））；
b=数学四舍五入（255*（aValue3/colorModeZ））；
}
a=数学四舍五入（255*（aValue4/colorModeA））；
//限制值小于0且大于255
r=（r<0）？0:r；
g=（g<0）？0:g；
b=（b<0）？0:b；
a=（a<0）？0:a；
r=（r>255）？255:r；
g=（g>255）？255:g；
b=（b>255）？255:b；
a=（a>255）？255:a；
//创建颜色int
return（在CPU上执行每像素操作对性能的影响是众所周知的，因为它们必须一次执行一个操作。硬件图形卡有GPU，可以同时处理数百或数千个每像素操作。是否有带有“P5*JS”的API提供一个可以更有效地使用的过滤功能？如果没有，最好的办法是对需要使用的颜色进行预处理，以使内环尽可能有效。您尝试过了吗？问题不在于
color（）
的效率很低，甚至需要很长时间。问题是你要为图像中的每一个像素调用它。你到底想对图像做什么？@Douglas-我同意，但我不知道有这样的过滤器。让内部循环尽可能高效是我在这里问的原因。@OrtomalaLokni-你怎么办你的意思是“我试过了吗？”这是我代码的第一行。好吧，我看到
color（）
确实比我想象的做了更多的工作。显然这不是办法。我的观点是我有帧速率问题；不是我用
color（）
以29fps的速度运行，用30fps的速度运行。我用color（）以10fps的速度运行没有
color（）
，不管
collide（）
，都是30 fps。因为你说我关注的是错误的事情（过早优化）你认为应该优化什么。@nluigi嗯，在你说你实际上注意到帧速率有问题之前，我已经说过了。你可以尝试创建自己的
color（）
函数，该函数可以删除舍入和任何其他额外工作，但我怀疑这是否会给您带来巨大的速度提升。直接使用数组设置颜色可以获得更好的性能。请参阅我对问题的编辑。