p5：在WEBGL中使用正弦波改变y轴

Question

我有一些球体，我想在 x 轴上直线移动，只有它们的 y 轴根据正弦波变化（你知道上下溜溜球模式）。它在 2d 中非常简单，但由于某种原因，在 WEBGL 中，sin 函数中的角度变化不适用于

this.y

.

let particles = [];
let quantity = 20;

function setup() {
  createCanvas(300, 300, WEBGL);

  for (let i = 0; i < quantity; i++) {
    let particle = new Particle();
    particles.push(particle);
  }
}

function draw() {
  background(15);
  orbitControl();
  directionalLight([255], createVector(0, 0, -1));
  translate(-width / 2, 0);

  particles.forEach(particle => {
    particle.update();
    particle.edges();
    particle.show();
  });
};


// particle.js
function Particle() {
  this.angle = 0;
  this.r = 10;
  this.x = random(width);
  this.y = sin(this.angle) * 200; // I am changing this angle later but it's not working
  this.z = random(-50, 50);
  this.pos = createVector(this.x, 0, 0);
  this.vel = createVector(2, this.y, 0);

  this.update = function() {
    this.pos.add(this.vel);
    this.vel.limit(4);
    this.angle += 3;
    // print(this.pos);
  }

  this.edges = function() {
    if (this.pos.x >= width) {
      this.pos.x = 0;
    }
  }

  this.show = function() {
    noStroke();
    push();
    translate(this.pos.x, this.pos.y, 0);
    sphere(this.r);
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

您只需要在构造函数中调用一次

sin

。您可能打算根据

this.y

或其他一些增量值将它应用于每一帧上的

this.angle

。此外，还有重复的向量；选择

x

/

y

对或使用向量

x

/

y

，但不能同时使用。

let particles = [];
let quantity = 20;

function setup() {
  createCanvas(300, 300, WEBGL);

  for (let i = 0; i < quantity; i++) {
    let particle = new Particle();
    particles.push(particle);
  }
}

function draw() {
  background(15);
  orbitControl();
  directionalLight([255], createVector(0, 0, -1));
  translate(-width / 2, 0);

  particles.forEach(particle => {
    particle.update();
    particle.edges();
    particle.show();
  });
};


// particle.js
function Particle() {
  this.angle = 0;
  this.r = 10;
  this.x = random(width);
  this.y = 0;

  this.update = function() {
    this.angle += 0.05;
    this.y = sin(this.angle) * 100;
  }

  this.edges = function() {
    if (this.x >= width) {
      this.x = 0;
    }
  }

  this.show = function() {
    noStroke();
    push();
    translate(this.x, this.y, 0);
    sphere(this.r);
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>