如何使用 P5 js 中的 sin(a) 和距离从 A 调制到 B？

Question

我正在使用 dist() 计算每个框与坐标系中心的距离。

我正在尝试使用以上所有方法，但无法正确使用。

我被卡住了，想做几天，请帮忙。

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>

Answer 1

盒子的长度取决于中心到盒子的距离。例如：

let distance = dist(width/2, height/2, x, z);
let length = (((sin(TWO_PI * distance/600 + frameCount * 0.01) + 1)/2) * 100);

改变(0.01)可以改变速度，改变(600)可以改变波长。

box的宽高必须是20:

box(20, max(0.01, length), 20);

您必须将代码放在 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>

如何使用 P5 js 中的 sin(a) 和距离从 A 调制到 B？

How to modulate from A to B using sin(a) and distance in P5 js?

javascript

processing

p5.js