Javascript振幅图像

Question

我有这个脚本是用 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

谢谢。

Answer 1

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