使 p5js 项目运行更快

Question

我用 p5js 库 javascript 制作了一个名为“pixel paint”的项目，但是当我运行它时，那个项目运行太慢了。我不知道为什么以及如何让它运行更快。这是我的代码：

let h = 40, w = 64;
let checkbox;
let scl = 10;
let painting = new Array(h);
let brush = [0, 0, 0];
for(let i = 0; i < h; i++) {
  painting[i] = new Array(w);
  for(let j = 0; j < w; j++) {
    painting[i][j] = [255, 255, 255];
  }
}

function setup() {
  createCanvas(w * scl, h * scl);
  checkbox = createCheckbox('Show gird line', true);
  checkbox.changed(onChange);
}

function draw() {
  background(220);

  for(let y = 0; y < h; y++) {
    for(let x = 0; x < w; x++) {
      fill(painting[y][x]);
      rect(x * scl, y * scl, scl, scl);
    }
  }

  if(mouseIsPressed) {
    paint();
  }
}

function onChange() {
  if (checkbox.checked()) {
    stroke(0);
  } else {
    noStroke();
  }
}

function paint() {
  if(mouseX < w * scl && mouseY < h * scl) {
    let x = floor(mouseX / scl);
    let y = floor(mouseY / scl);
    painting[y][x] = brush;
  }
}

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

是否有使我的项目运行更快的解决方案？

Answer 1

您的代码易于阅读。

在这个阶段可能不值得优化，因为它可能会使代码在将来不必要地 complex/harder 阅读和更改。

如果您想了解实现相同目标的不同方法，我可以提供一些想法，不过，对于您的特定用例，性能可能不会产生巨大差异：

您可以使用平面 [w * h] 数组并使用单个 for 循环而不是嵌套 for 循环，而不是将 painting 用作嵌套 [w][h] 数组.这有点类似于使用 pixels[]。（您可以将 x,y 转换为索引 (index = x + (y * width))，反之亦然 (x = index % width, y = floor(index / width))
理论上您可以使用 p5.Image，访问 pixels[] 来绘制它并使用 image() 进行渲染（理想情况下您将获得对 WebGL 渲染器的较低级别访问权限以启用antialiasing if it's supported by the browser). The grid itself could be a texture() for a quad where you'd use vertex() to specify not only x,y geometry positions, but also u, v texture coordinates in tandem with textureWrap(REPEAT). (I posted an older repeat Processing example：逻辑相同，语法几乎相同）
与p5.Image思路类似，可以使用createGraphics(): e.g. only update the p5.Graphics instance when the mouse is dragged, otherwise render the cached drawing. Additionally you can make use of noLoop()/loop() to control when p5's canvas gets updated (e.g. loop() on mousePressed(), updated graphics on mouseMoved(), noLoop() on mouseReleased())

可能还有其他方法。

虽然了解优化代码的技巧是件好事，我强烈建议不要优化，直到你需要；当你这样做时使用分析器（DevTools 有）只关注最慢的位而不是在优化的部分代码上浪费时间和代码可读性不会真正产生影响。

使 p5js 项目 运行 更快

Make p5js project run faster

javascript

paint

p5.js

使 p5js 项目运行更快