Javascript - 从数组中检索随机图像

Question

我正在尝试使用 Javascript 和 p5.js 库编写一个程序，以在检测到音频文件中的峰值时从数组中触发随机图像。 p5 的声音库可以为我检测音频峰值，然后在该音频峰值上触发一个函数。但是，我在 Javascript 方面没有太多经验，所以我不确定从这里去哪里。我创建了一组图像，并计划使用 math.Random 创建一个函数来抓取其中一个图像。然后我可以在 triggerBeat 函数中调用该函数吗？

另外，我已将图像设置为背景，使其不在 p5 的绘制函数中，因此我正在尝试更改 bg 变量。我已经预加载了背景图片，并且在 preload 函数中还有代码允许用户上传音频文件。

对不起，如果这没有多大意义。我对 Javascript 很陌生，我今天大部分时间都在试图解决它。

编辑：更新代码

 var cnv, song, fft, peakDetect, img, bg;
 var imageset = new Array("1.png","2.png","3.png");


function preload(){
  img = loadImage("1.png");
  var loader = document.querySelector(".loader");
  document.getElementById("audiofile").onchange = function(event) {
      if(event.target.files[0]) {
          if(typeof song != "undefined") {
              song.disconnect();
              song.stop();
          }


          song = loadSound(URL.createObjectURL(event.target.files[0]));
          loader.classList.add("loading");
      }
  }
}


function setup() {
  cnv = createCanvas(900,900);
  drawImage(imageset[0]);

  fft = new p5.FFT();
  peakDetect = new p5.PeakDetect();
  setupSound();
  peakDetect.onPeak(drawImage(imageset));

}


function draw() {
  drawImage();
}

function drawImage(arr) {
  var bg = loadImage(random(arr));
  background(bg);
  fill(0);
  text('play', width/2, height/2);

  fft.analyze();
  peakDetect.update(fft);
}


function setupSound() {
  cnv.mouseClicked( function() {
    if (song.isPlaying() ) {
      song.stop();
    } else {
      song.play();
    }
  });
}

Answer 1

p5 有数学函数，其中之一是随机的。

如果给定一个参数并且它是一个数组，则从该数组中返回一个随机元素。

编辑 由于回答了最初的问题后结果比较混乱，我更新了整个代码。

var cnv, song, fft, peakDetect, img, bg;
var imageset = new Array("pic1.png","pic2.png","pic3.png", "pic4.png");
var imagesArr = [];

//next line will make p5 global. Otherwise would the p5 functions be
//accessable from p5 struct functions only.
new p5(); 

/*******************************************************************
* PRELOAD 
* we are using for loading images/audios only
********************************************************************/
function preload(){
    //load all images from 'imageset' into 'imagesArr'
    for(var i=0; i<imageset.length; i++){
        loadImage('../img/'+imageset[i], function(img) {
            imagesArr.push(img);
        });    
    }

    // next lets load soundfile(s).
    //song = loadSound("../snd/test.mp3");
    // I used testfile, didn't touch nor tested your code here,
    // BUT, again:
    // you should only (pre)load you sounds here, setting event should go
    // to the setup()


  var loader = document.querySelector(".loader");     
  document.getElementById("audiofile").onchange = function(event) {
      if(event.target.files[0]) {
          if(typeof song != "undefined") {
              song.disconnect();
              song.stop();
          }
          song = loadSound(URL.createObjectURL(event.target.files[0]));
          loader.classList.add("loading");
      }
  }
}

/*******************************************************************
* SETUP 
* run once, use for initialisation.
********************************************************************/
function setup() {
  //create canvas, draw initial background and text
  cnv = createCanvas(900,900);
  drawBackground();

  text('play', width/2, height/2);
  //initiate fft, peakdetect. Set event (onpeak)
  fft = new p5.FFT();
  peakDetect = new p5.PeakDetect();
  setupSound();
  peakDetect.onPeak(drawBackground);
}

/*******************************************************************
* DRAW
* endless loop. Here happens all the action.
* But you cannot draw your background here, as it is done by event. 
********************************************************************/
function draw(){
    //fft and peakdetecting are in use.
    fft.analyze();
    peakDetect.update(fft);
}

function drawBackground() {
    background(255);
    background(random(imagesArr));
}

function setupSound() {
  cnv.mouseClicked( function() {
    if (song.isPlaying() ) {
      song.stop();
    } else {
      song.play();
    }
  });
}

Answer 2

让yourArray[Math.floor(Math.random() * yourArray.length)] 通过在 triggerBeat 函数中调用它来获取随机图像