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

具有yourArray[Math.floor(Math.random() * yourArray.length)]可以通过在triggerBeat函数中调用它来获取随机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();
    }
  });
}

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

2 个答案: