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

【问题标题】：How to modulate from A to B using sin(a) and distance in P5 js?如何在 P5 js 中使用 sin(a) 和距离从 A 调制到 B？
【发布时间】：2021-09-11 06:52:41
【问题描述】：

我正在使用 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(); 
    }
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript processing p5.js

【解决方案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(); 
    }
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"&gt;&lt;/script&gt;

【讨论】：