P5. js Создание кривой затухания на сетке - PullRequest
Новая
       89

P5. js Создание кривой затухания на сетке

0 голосов
/ 05 августа 2020

Я сделал квадратную сетку поверх холста, а также решётку (которая должна иметь исчезающий след). Я сделал их по отдельности и попытался скомбинировать, чтобы кривая появилась поверх сетки. Однако это не показывает кривую. Я закомментировал сетку, чтобы было легче увидеть кривую. Как мне заставить это работать? 

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);
  }
}

1 Ответ

0 голосов
/ 05 августа 2020

Я не знаю, было ли это намеренно, но вы вызвали функцию noLoop(), в которой вы рисуете сетку. Если вы прокомментируете это, это работает.

...