Javascript 振幅图像

我有一个用p5.js构建的脚本，它检查音频文件的振幅数据，并在图像中再现，您可以在这里看到片段

以下是js：

var song, analyzer;

function preload() {
  img = loadImage("http://www.vtxfactory.org/images/vtxlogovnl.png");       
  song = loadSound("http://www.vtxfactory.org/sounds/masterflash.mp3");
}

function setup() {
  createCanvas(250, 250);
  song.loop();

  // create a new Amplitude analyzer
  analyzer = new p5.Amplitude();

  // Patch the input to an volume analyzer
  analyzer.setInput(song);
}

function draw() {
  background(0, 0, 0, 0)

  // Get the average (root mean square) amplitude
  var rms = analyzer.getLevel();
  fill(0, 0, 0, 20);
  stroke(255, 255, 255);

  image(img, width/3, height/3, 10+rms*200, 10+rms*200);

}

如何将动画的轴更改为图像的中间

另外，当图像放大并再次变为正常大小时，我们可以在整个过程中使用一些帧，有什么方法可以改进吗？我认为这可能与背景被格式化为透明有关，但我想把这个脚本放在一个图像上

我这里有一些我试图实现的代码的参考资料

---

谢谢。

我没有太多地使用p5.js，但是我非常确定您可以使用“translate（x，y）”函数从图像的中间进行变换。然后，平移将对应于宽度（x）的一半和高度（y）的一半。稍后我可能会尝试为您编写代码。如果您自己解决了，请告诉我。

您好，谢谢您的回复。我尝试过，但结果没有改变，我将translate（x，y）放在函数draw（）上，但没有效果：/