将草图从绘图移动到设置

Question

我正在研究 Dan Shiffman 的素数螺旋代码： https://www.youtube.com/watch?v=a35KWEjRvc0&t=716s&ab_channel=TheCodingTrain

我需要使用此代码作为另一个草图的背景，但由于螺旋线的移动性质，即使使用 p5.layers，螺旋线也不可能不绘制在另一个草图之上。 =12=]

因此，我正在寻找一种方法将此代码重构为可以同时绘制所有图形的代码，因此可以将其用作背景。我的想法是在设置中创建某种 for 循环，但我担心这对我来说太难了。

let x, y;
let step = 1;
let stepSize = 20;
let numSteps = 1;
let state = 0;
let turnCounter = 1;
let totalSteps;
let offset = 0;

function isPrime(value) {
  if (value == 1) return false;
  for (let i = 2; i <= sqrt(value); i++) {
    if (value % i == 0) {
      return false;
    }
  }
  return true;
}

function setup() {
  createCanvas(500, 500);

  const cols = width / stepSize;
  const rows = height / stepSize;
  totalSteps = cols * rows;

  x = width / 2;
  y = height / 2;
  background(0);
}

function draw() {

  primeSpiral(20, 1)
  primeSpiral(30, 200)
  
  incrementStep();
  
  noStroke();
}

function incrementStep()
{
  switch (state) {
    case 0:
      x += stepSize;
      break;
    case 1:
      y -= stepSize;
      break;
    case 2:
      x -= stepSize;
      break;
    case 3:
      y += stepSize;
      break;
  }

  if (step % numSteps == 0) {
    state = (state + 1) % 4;
    turnCounter++;
    if (turnCounter % 2 == 0) {
      numSteps++;
    }
  }
  step++;

  if (step > totalSteps) {
    noLoop();
  }
}

function primeSpiral(offset, color){
  if (!isPrime(step+offset)) {
    //might put something here

  } else {
    let r = stepSize * 0.5;
    fill(color, 99, 164);
    push();
    translate(x, y);
    rotate(-PI / 4);
    triangle(-r, +r, 0, -r, +r, +r);
    pop();
  }


}

Answer 1

您可以将代码从 draw() 移动到 setup() 中的循环，示例如下：

...

function setup() {
  createCanvas(500, 500);

  const cols = width / stepSize;
  const rows = height / stepSize;
  totalSteps = cols * rows;

  x = width / 2;
  y = height / 2;
  background(0);
    
  for (let i = 0; i<100; i++) { // 100 is the number of processed frames, you can change it as you need
    primeSpiral(20, 1)
    primeSpiral(30, 200)
    incrementStep();
    noStroke();
  }
}

function draw() {    // now draw is empty and you can place new code here
}
...

将草图从绘图移动到设置

moving a sketch from draw to setup

p5.js