P5.js 在网格上创建渐变曲线

Question

我在 canvas 的顶部制作了一个方形网格，还有一个曲线（意味着有一条渐变轨迹）。我分别制作它们并尝试将它们组合起来，这样曲线就会出现在网格的顶部。但是，它没有显示曲线。我已经注释掉了网格，因此更容易看到曲线。我如何让它工作？

var cols = 10;
var rows = 10;
var t = 0;
var particleArray = [];

function setup() {
  createCanvas(600, 600);
  background(0);
  fill(100);
  rect(0, 0, 550, 550, 25);

}


// blue grid
function draw() {
  /*for (var c = 0; c < cols; c++) {
    for (var r = 0; r < rows; r++) {
        var XO = 25 + c * 50;
        var YO = 25 + r * 50;
        stroke(0);
        fill(100,149,237);
        rect(XO, YO, 50, 50);
        noLoop();
        // :(
    }
  }
*/
    //curve

    y = width / 2 +  270 * sin(3 * t + PI / 2) - 25;
    x = height / 2 + 270 * sin(1 * t) - 25;
  
    particleArray.push(new Particle(x, y, t));
    for (i=0; i<particleArray.length; i++) {
    particleArray[i].show(t);
  }
  if (particleArray.length > 700) {
    particleArray.shift();
 }
 t += .01;
}

function Particle(x, y, t) {
  this.x = x;
  this.y = y;
  this.t = t;
  
  this.show = function(currentT) {
    var _ratio = t / currentT;
    _alpha = map(_ratio, 0, 1, 0, 255); //points will fade out as time elaps
    fill(255, 255, 255, _alpha);
    ellipse(x, y, 5, 5);
  }
}

Answer 1

我不知道这是否是故意的，但您在绘制网格的地方调用了 noLoop() 函数。如果您评论说它有效。

P5.js 在网格上创建渐变曲线

P5.js Creating a fading curve on a grid

curve

p5.js