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