javascript - Math.sin() 方法保持返回值 1，而不是 -1~1

Question

我正在尝试根据我启发的图像创建一个 p5.js 草图。 https://twitter.com/dmitricherniak/status/1287101982268948483?s=20他用three.js做到了。

我写了一个绘制圆数组的代码，可以通过 alpha 控制圆的长度。但是当我尝试使用 Math.sin() 函数（方法）来修改颜色变化时，它不起作用。当我增加 this.hs 时，this.Roff = sin(this.hs) keep 返回 1。我希望它们为 -1 到 1 并继续返回并强制。我还尝试了 lerpColor() 函数来改变颜色（也使用 sin()），但仍然返回 1。

我也想知道有人知道如何生成超过 2 种颜色渐变。我希望渐变也保持循环。

我在 Cinema 4D 中制作了以下动画示例。 https://drive.google.com/file/d/1zTrIXJPMbqOsrx6VmLNrYdDCWvfmFSQ0/view?usp=sharing

class Particle {
  constructor(x, y, v) {
    this.x = x;
    this.y = y;
    this.vx = -v;
    this.vy = v;
    this.alp = 50;
    
    // THIS.ROFF KEEPS RETURNING 1
    this.hs = PI / 2;
    this.inc = 0.1;
    this.Roff = sin(this.hs);
    this.Rshift = map(this.Roff, -1, 1, 0, 255);
  }

  finish() {
    return this.alp < 0;
  }
  
  update() {
    this.x += this.vx;
    this.y += this.vy;
    
    this.alp -= 2;  
    this.hs += this.inc;
  }

  display() {
    noStroke();
    fill(this.Rshift, 0, 0, this.alp);
    ellipse(this.x, this.y, 200);
  }

}

标签： javascriptprocessingp5.js