0
100
VisualizaçõesHow to modulate from A to B using sin(a) and distance in P5 js?
I am calculating each's box distance from the centre of the coordinate system using dist().
I am trying to use all of the above but am unable to get it right.
I am stuck and trying to do this for a few days, please do help.
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 Respostas
Responde à pergunta0
The length of the box depends on the distance of the center to the box. e.g.:
let distance = dist(width/2, height/2, x, z);
let length = (((sin(TWO_PI * distance/600 + frameCount * 0.01) + 1)/2) * 100);
The speed can be changed by changing (0.01) and the wavelength can be changed by changing (600).
The width and height of the box must be 20:
box(20, max(0.01, length), 20);
You must put the code in the draw function:
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
Relatório
Responde à pergunta