如何在P5.js中使用sin(a)和距离实现参数从A到B的过渡调制

修复后可实现距离调制波纹效果的代码 #

引入p5依赖

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

主逻辑代码

function setup(){
  createCanvas(600, 600, WEBGL);
  frameRate(30);
}

function draw(){
  background(220);
  camera(-200, -200, -200,
         0, -100, 0,
         0, 1, 0);
  
  for (let x=0; x < width; x +=20){
    for (let z=0; z < height; z +=20){
      push();
      normalMaterial();
      stroke(0);
      strokeWeight(1);
      // 坐标偏移至以画布中心为原点
      let offsetX = x - width/2;
      let offsetZ = z - height/2;
      // 计算立方体到中心的距离
      let distance = dist(0, 0, offsetX, offsetZ);
      // 结合距离和帧计数计算高度，系数可按需调整
      let length = ((sin(frameCount * 0.05 + distance * 0.02) + 1) / 2) * 100;
      // 沿Y轴偏移让立方体底部贴合XZ平面
      translate(offsetX, length/2, offsetZ);
      box(18, length, 18);
      pop(); 
    }
  }
}

主要修改点 #

• 将渲染逻辑从setup()移入draw()函数，draw()会自动每帧执行，才能让frameCount更新触发动态效果
• 对立方体坐标做了中心偏移，匹配WEBGL默认的原点规则，让网格铺满整个画布
• 把距离参数加入了sin()的入参，不同距离的立方体高度变化会产生相位差，自然形成波纹状的过渡调制效果
• 调整了立方体的Y轴偏移，避免立方体一半埋入地面

参数调整说明 #

• 调整frameCount的系数：数值越大，波纹动画速度越快
• 调整distance的系数：数值越大，波纹的密度越高
• 调整最后乘的高度系数（示例中为100）：数值越大，立方体的最大高度越高

内容的提问来源于stack exchange，提问作者Juggernaut