자바 스크립트 기능 무승부() 나는 음악 재생의 볼륨을 기반으로 타원과 그 진폭을 그리는 JS 스크립트가 이미지

Question

에 모양 : 당신은 그것을 여기 https://p5js.org/examples/sound-measuring-amplitude.html 무엇의 샘플을 볼 수 있습니다

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

을

마지막 코드에서 타원이 생성 된 것을 볼 수 있습니다. 어떻게하면 동일한 작업을 수행 할 수 있습니까? 그러나 타원을 그리는 대신 둥근 .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); 
}