javascript - Javascript幅值图像

我使用p5.js构建了此脚本，该脚本可检查音频文件的振幅数据并在图像中再现该振幅数据，您可以在此处查看代码段http://www.vtxfactory.org/p5/empty-example/

这是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);

}

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

另外，当图像放大并再次恢复到正常大小时，它会沿途移动一些帧，有什么方法可以改善它？我认为这可能与背景格式化为透明有关，但我想将此脚本放在图像上。

我在这里有一些我想要实现的代码的参考https://p5js.org/reference/#/p5/image

谢谢。

最佳答案

我没有使用过太多p5.js，但是我敢肯定您可以使用“ translate（x，y）”功能从图像中间进行转换。然后，平移将对应于宽度（x）的一半和高度（y）的一半。稍后我可能会为您编码。让我知道是否自己解决了。