0
104
Views¿Cómo modular de A a B usando sin(a) y distancia en P5 js?
Estoy calculando la distancia del cuadro de cada uno desde el centro del sistema de coordenadas usando dist().
Estoy tratando de usar todo lo anterior pero no puedo hacerlo bien.
Estoy atascado y tratando de hacer esto durante unos días, por favor ayuda.
function setup(){ createCanvas(600, 600, WEBGL); background(220); camera(-200, -200, -200, // camera position (x, y, z) 0 , -100, 0, // camera target (look at position) (x, y, z) 0 , 1, 0); // camera up axis: Y axis here for (let x=0; x < width; x +=20){ for (let z=0; z < height; z +=20){ push(); // ground plane is XZ, not XY (front plane) normalMaterial(); stroke(0); strokeWeight(1); translate(x, 0, z); let distance = dist(0, 0, x, z); let length = (((sin(frameCount) + 1)/2) * 100); //box(20); box(50, length); pop(); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script> 
·
Juan Pablo Isaza
1 answers
Answer question0
La longitud de la caja depende de la distancia del centro a la caja. p.ej:
let distance = dist(width/2, height/2, x, z); let length = (((sin(TWO_PI * distance/600 + frameCount * 0.01) + 1)/2) * 100);La velocidad se puede cambiar cambiando ( 0.01 ) y la longitud de onda se puede cambiar cambiando ( 600 ).
El ancho y alto de la box debe ser 20:
box(20, max(0.01, length), 20); Debes poner el código en la función draw :
function setup(){ createCanvas(600, 600, WEBGL); camera(-200, -200, -200, // camera position (x, y, z) 0 , -100, 0, // camera target (look at position) (x, y, z) 0 , 1, 0); // camera up axis: Y axis here } function draw() { background(220); for (let x=0; x < width; x +=20){ for (let z=0; z < height; z +=20){ push(); // ground plane is XZ, not XY (front plane) normalMaterial(); stroke(0); strokeWeight(1); translate(x, 0, z); let distance = dist(width/2, height/2, x, z); let length = (((sin(TWO_PI * distance/600 + frameCount * 0.01) + 1)/2) * 100); box(20, max(0.01, length), 20); pop(); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
·
Juan Pablo Isaza
Report
Answer question