How to start a generative portrait in p5.js

Question

I need help with a code I'm working on for a project.

What I need it to do is show the users the picture one by one and memorize the time spent on each. At the end it should open the webcam and start drawing a portrait of the user with particles whose colors correspond to those of the pictures. I'm having some troubles with the last part of the code: I can't get the webcam to open and I don't know how to start the portrait.

This is the code so far

var faseCorrente = "intro"; // altri valori: "test" e "risultato"
var c = 0;
var sfondo = new Array(6);
var intro;

var classifica = [];

var tempi = [];
var tempoInizio;


//VAR WEBCAM
var video;
var vScale = 16;
var particles = [];
var slider;
//end var webcam 


function preload() {

  sfondo[0] = loadImage('colore0.jpg');
  sfondo[1] = loadImage('colore1.jpg');
  sfondo[2] = loadImage('colore2.jpg');
  sfondo[3] = loadImage('colore3.jpg');
  sfondo[4] = loadImage('colore4.jpg');
  sfondo[5] = loadImage('colore5.jpg');

  intro = loadImage('Introduzione.jpg');

} //close preload


function setup() {
  createCanvas(700, 550);

  noStroke();
  cursor(HAND);


} //close setup 


function draw() {
  if (faseCorrente == 'intro') {
    background(intro);
  } else if (faseCorrente == 'test') {
    background(sfondo[c]);
  } else if (faseCorrente == 'risultato') {
    //background(255);
    var durataTotale = 0;
    for (t = 0; t < tempi.length; t++) {
      durataTotale += tempi[t];
    }
    var x = 0;
    for (var pos = 0; pos < classifica.length; pos++) {
      var col = classifica[pos];
      fill(col);
      var perc = tempi[col] / durataTotale;
      var larghezza = round(perc * width);
      rect(x, 0, larghezza, height);
      x += larghezza;
    }
  }
}

//calcolo del tempo 
function keyPressed() {

  if (key == ' ') {

    if (faseCorrente == 'intro') {
      tempoInizio = millis();
      coloreCorrente = 0;
      faseCorrente = 'test';
    } else if (faseCorrente == 'test') {
      c++
      //end if
      var tempoFine = millis();
      tempi[coloreCorrente] = tempoFine - tempoInizio;
      coloreCorrente++;
      if (coloreCorrente < 6) {
        tempoInizio = millis();
      } else {
        print(tempi);
        classifica = [];
        for (pos = 0; pos < sfondo.length; pos++) {
          var tempoMax = 0;
          var coloreMax;
          for (var i = 0; i < tempi.length; i++) {
            if (!classifica.includes(i) && tempi[i] > tempoMax) {
              tempoMax = tempi[i];
              coloreMax = i;
            }
          }
          classifica[pos] = coloreMax;
        }
        print(classifica);
        faseCorrente = "risultato";
      }
    } else if (faseCorrente == 'risultato') {

     //WEBCAM
      createCanvas(640, 480);
      pixelDensity(1);
      video = createCapture(VIDEO);
      video.size(width / vScale, height / vScale);
      for (var w = 0; w < 200; w++) {
        particles[w] = new Particle(random(width), random(height));
      }
      slider = createSlider(0, 255, 127);
      background(51);
      //end webcam 

      //GRAFICA WEBCAM
      faseCorrente = video.loadPixels();
      for (var k = 0; k < particles.length; k++) {
        particles[k].update();
        particles[k].show();
      } //end grafica

      //faseCorrente = 'intro';
    }
  }
}

Thanks to anyone that can help!