Javascript - получить случайное изображение из массива - PullRequest
Новая
       29

Javascript - получить случайное изображение из массива

0 голосов
/ 26 ноября 2018

Я пытаюсь написать программу с использованием 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();
    }
  });
}

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

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();
    }
  });
}
0 голосов
/ 26 ноября 2018

Имеется yourArray[Math.floor(Math.random() * yourArray.length)] для получения случайного img, вызвав его в функции triggerBeat

...