Javascript-從數組中檢索隨機圖像

Question

我正在嘗試使用Javascript和p5.js庫編寫程序，以在檢測到音頻文件中的峰值時從數組觸發隨機圖像。 p5的聲音庫可以為我檢測音頻峰值，然后在該音頻峰值觸發功能。 但是，我在Javascript方面沒有太多經驗，所以我不確定從這里開始。 我創建了一個圖像數組，並計划使用math.Random創建一個函數來獲取其中一個圖像。 然后可以在我的triggerBeat函數中調用該函數嗎？

另外，我將圖像設置為背景，使其不在p5的draw函數之內，因此我嘗試更改bg變量。 我已經預加載了背景圖片，並且在預加載功能中也添加了代碼，以允許用戶上傳音頻文件。

抱歉，如果這樣做沒有意義。 我對Java語言還很陌生，今天大部分時間都在嘗試着圍繞Java語言。

編輯：更新的代碼

 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

通過在triggerBeat函數中調用yourArray[Math.floor(Math.random() * yourArray.length)]來獲取隨機img

Answer 2

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