Tengo algunas esferas que quiero mover directamente en el eje x con solo cambiar su eje y en función de la onda sinusoidal (ya conoce el patrón de yo-yo hacia arriba y hacia abajo). Es bastante simple en 2d pero por alguna razón, en WEBGL, los cambios de ángulo en la función sin no funcionan para 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>Solo llamas sin una vez en el constructor. Probablemente quisiste aplicarlo a this.y en cada cuadro basado en this.angle , o algún otro valor incremental. Además, hay vectores duplicados; elija un par x / y o use un vector x / y , pero no ambos.
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.4.1/p5.js"></script>