求助：如何在p5.js中实现径向多普勒效应线条扭曲动画

• 目标：开发一个工具，通过径向多普勒效应扭曲垂直/水平线条，实现波纹对网格线条产生的压缩、拉伸扭曲效果
• 核心需求：将已实现的垂直线条框架与波纹生成代码结合，让线条随波纹扩散呈现多普勒效应扭曲

已完成的代码模块 #

垂直线条基础框架 #

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255, 255, 255);
  
  for (let lineX = 10; lineX <= width; lineX += 10) {
    line(0, lineX, width, lineX);
  }
}

波纹生成代码 #

let rings = [];


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);

  noFill();
  

  // Make it look pretty
  strokeWeight(1);

  if (frameCount % 60 === 0) {
    // radius now starts at zero
    rings.push(new Ring(height / 2, width / 2, 0));
  }

  // Limit the amount of rings in the array to nine
  if (rings.length > 9) {
    rings.shift();
  }

  rings.forEach((ring) => {
    // Call the update function each time we draw a circle
    ring.update();
    ring.draw();
  });
}

class Ring {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
  }
  update() {
    // increase the radius of the circle by
    // one each time the update function is called
    this.radius += 1;
  }
  draw() {
    circle(this.x, this.y, this.radius);
  }
}

最终期望 #

将上述两个模块结合，实现波纹与线条的交互：线条在波纹靠近区域被压缩，远离区域被拉伸，呈现出清晰的径向多普勒扭曲效果。

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