Javascriptの振幅画像

私は、オーディオファイルの振幅データをチェックした画像に、あなたはここでここhttp://www.vtxfactory.org/p5/empty-example/Javascriptの振幅画像

をスニペットを見ることができることを再現するp5.jsで構築された、このスクリプトは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

感謝を達成しようとしているコードのいくつかの参照を持っています。

出典

2017-05-09 Rui Farinha