如何加快 p5.js 中的 Get 功能？答案

【问题标题】：How to speed up Get func in p5.js?如何加快 p5.js 中的 Get 功能？
【发布时间】：2022-10-06 08:30:58
【问题描述】：

有什么方法可以加快这段代码的速度（简化）？在我的戴尔 m4700 笔记本电脑上，它可以工作 1 分 10 秒（画布大小为 1000x1400 像素）。

pg = createGraphics(1000,1400);
pg.pixelDensity(1);

***
for(j=0;j<pg.height;j++){
  for(i=0;i<pg.width;i++){
    pg.stroke(cc=pg.get(i,j));
    pg.point(i,j+4);
  }
  }

没有这条线，

pg.stroke(cc=pg.get(i,j));

代码以毫秒为单位执行。

我制作了另一个可以在 20 秒内运行的版本，但由于某种原因，结果在视觉上略有不同：

  pg.loadPixels();
  for(j=0;j<pg.height;j++){
  for(i=0;i<pg.width;i++){
    let pi = i + (j * pg.width);
    let ri = pi * 4;
    let cr = pg.pixels[ri];
    let cg = pg.pixels[ri + 1];
    let cb = pg.pixels[ri + 2];
    let ca = pg.pixels[ri + 3];
    pg.stroke(color(cr,cg,cb,ca)); 
    pg.point(i,floor(j+sh/z));
  }
  }

也许我错过了您想要实现的目标，但如果您只需要渲染 pg 为什么不使用类似 image(pg, 0, 0); （或 image(pg,0,0,theWidth,theHeight);）的东西？
@george-profenza 我知道，这正是我下一步要做的。我需要实现在保持颜色的同时移动每个像素的效果。这就是我使用 pg.stroke(pg.get(i,j)) 的原因。我的代码效果很好，但速度很慢。
我明白了，我的错，我错过了i,j+4 部分。渲染这么多点会很慢。一个小的改进可能是使用pg.vertex() 而不是pg.point()（在循环之前使用pg.beginShape(POINTS);，在循环之后使用endShape()）。分配更大的p5.Image（以确保您有包含 y 位移的像素索引）可能会更快，您可以手动清除它，然后使用pixels[] 而不是pg.point()。最快的可能是通过p5.Shader

标签： p5.js

【解决方案1】：

我认为这：

pg.pixels[j*pg.width+i] = pg.pixels[(j+4)*pg.width+i];

会快很多。由于代码不可运行，我自己做了一个测试，结果有很大的不同：

with get:
1555.0 milliseconds to complete


direct pixel access:
31.0 milliseconds to complete

参考 sas 这更快。

您将需要处理array.length 和j+4。

【讨论】：