Javascript

Question

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

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

抱歉，如果这没有多大意义。我是 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

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

Answer 2

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

If one argument is given and it is an array, returns a random element from that array.

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

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 - 从数组中检索随机图像

Javascript - retrieve random image from array

arrays

random

processing

image