title: How to start a generative portrait in p5.js
body: <p>I need help with a code I'm working on for a project.</p>
  
  <p>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. </p>
  
  <p>This is the code so far</p>
  
  <pre><code>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 &lt; tempi.length; t++) {
        durataTotale += tempi[t];
      }
      var x = 0;
      for (var pos = 0; pos &lt; 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 &lt; 6) {
          tempoInizio = millis();
        } else {
          print(tempi);
          classifica = [];
          for (pos = 0; pos &lt; sfondo.length; pos++) {
            var tempoMax = 0;
            var coloreMax;
            for (var i = 0; i &lt; tempi.length; i++) {
              if (!classifica.includes(i) &amp;&amp; tempi[i] &gt; 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 &lt; 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 &lt; particles.length; k++) {
          particles[k].update();
          particles[k].show();
        } //end grafica
  
        //faseCorrente = 'intro';
      }
    }
  }
  </code></pre>
  
  <p>Thanks to anyone that can help!</p>