Javascriptの関数draw（）私は音楽再生の音量に基づいて楕円とその振幅を描くjsのスクリプトを持っている画像

Question

に形状：

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