p5. js Добавить исчезающий след эллипса к линии кривой Лиссажу - PullRequest
Новая
       122

p5. js Добавить исчезающий след эллипса к линии кривой Лиссажу

0 голосов
/ 14 июля 2020

У меня есть простой код, который отслеживает круве Лисса с помощью небольшого эллипса. Мне было интересно, как добавить затухающий след к этой форме, чтобы он более четко представлял крув. Я немного знаю о добавлении следов, следующих за мышью, но я не уверен, как это сделать.

Любая помощь приветствуется, вот код: 

var t = 0;

function setup() {
    createCanvas(500, 500);
    fill(255);
    
}
    
function draw() {
    background(0);
 
    for (i = 0; i < 1; i++) {

       y = 160*sin(3*t+PI/2);
       x = 160*sin(1*t);
      
    fill(255);
    
    ellipse(width/2+x, height/2+y, 5, 5);
    t += .01;
    }
}

1 Ответ

0 голосов
/ 14 июля 2020

Попробуйте заменить background(0) на background(0, 0, 0, 4):)

Вот рабочий пример:

https://editor.p5js.org/chen-ni/sketches/I-FbLFDXi

Изменить:

Вот еще одно решение, которое не использует фоновый трюк:

https://editor.p5js.org/chen-ni/sketches/HiT4Ycd5U

По сути, он отслеживает положение каждой точки и исправляет aws их в каждом кадре с обновленным альфа-каналом для создания эффекта «затухания». 

var t = 0;
var particleArray = [];

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

function draw() {
  background(0);
  
  y = width / 2 +  160 * sin(3 * t + PI / 2);
  x = height / 2 + 160 * sin(1 * t);

  particleArray.push(new Particle(x, y, t));
  
  for (i=0; i<particleArray.length; i++) {
    particleArray[i].show(t);
  }
  
  //keep the array short, otherwise it runs very slow
  if (particleArray.length > 800) {
     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);
  }
}
...