JavaScript函数的draw（）形状像

Question

我有一个绘制了一条基于音乐播放的音量上的椭圆形，其幅度JS脚本：

var song, analyzer; 

function preload() { 
    song = loadSound('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); 

    // Draw an ellipse with size based on volume 
    ellipse(width/3, height/3, 10+rms*200, 10+rms*200); 
} 

你可以看到它做什么这里https://p5js.org/examples/sound-measuring-amplitude.html样本

你可以看到它创建椭圆的最后一个代码。我怎么能做同样的事情，但不是绘制椭圆，而是加载一个圆形的.png图像？

Answer 1

您必须首先将preload Image绘制出来。更多关于image()

尝试这样

function preload() { 
    img = loadImage('images/laDefense.jpg'); 
    song = loadSound('sounds/masterflash.mp3'); 
} 
... 

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); 
}