我有一个 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 图像?
最佳答案
你必须 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);
}
关于Javascript 函数 draw() 形状到图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43794133/