title: How to add text to P5.js visual? (to appear/disappear at specific moments)
body: <p>I am looking to add text (appears in the begging, within the black part of the rectangle and disappears as the white slides in to then reappear as the black overtakes the pink again)
  Centred, 2 lines of text, 3 words in total (as below for example)</p>
  
  <pre><code>                     Project One
                       Diary
  </code></pre>
  
  <p>I have no previous experience of working with text in P5 but looking through tutorials online, I am unable to find an example where it appears at the beginning of the sequence then disappears shortly after.
  Any inclusion of fonts would also be helpful as I will be trying a few out!</p>
  
  <pre><code>var rectWidth = 1000;
  var rectHeight = 600;
  var colourlapse;
  var rx = 60;
  var ry = 60;
  var inc = 0.005;
  
  
  let colors = [[0, 0, 0], [255, 255, 255], [255, 9, 236]]
  let cur_col1 = 1;
  let cur_col2 = 0;
  
  function setup() {
  frameRate(49);
  createCanvas(1100, 1100);
  colourlapse = 0.0;
  }
  
  function draw() {
  var w = colourlapse * rectWidth;
  
  var sx1 = (inc &gt; 0) ? rx : rx + rectWidth - w;
  var sx2 = (inc &gt; 0) ? rx + w : rx;
  
  background(255);
  stroke(255);
  
  fill(0);
  fill(...colors[cur_col1 % colors.length]);
  rect(sx1, ry, w, rectHeight);
  fill(...colors[cur_col2 % colors.length]);
  rect(sx2, ry, rectWidth-w, rectHeight);
  
  colourlapse += inc;
  if (colourlapse &gt;= 1) {
      colourlapse = 1;
      inc *= -1;
      cur_col2 += 2;
  } else if (colourlapse &lt;= 0) {
      colourlapse = 0;
      inc *= -1;
      cur_col1 += 2;
  }
  }
  </code></pre>