P5.js Visual（语法循环问题）

Question

我一直在玩这段代码，因为它可能是我的大学项目（介绍它）的一部分，但是我无法解决有两个问题：

我对它的开始很满意，但是在（项目：一个，粉红色幻灯片）中大约10秒钟，它变成白色，然后8秒钟后以黑色幻灯片（一个项目：）继续，直到循环结束，然后再次开始。

我也希望摆脱8秒的延迟，并在延迟之后继续播放最后一张幻灯片（一个项目：黑色幻灯片）

我在第38和39行更改了rx和ry变量，并在第31、32、41、42行更改了语法，但无济于事，我仍然无法摆脱延迟以及最后一个延迟幻灯片。

 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;

let textContents = ["Project:","2019","One"];

function setup() {
 frameRate(49);
 createCanvas(1100, 1100);
 colourlapse = 0.0;
 }

function draw() {
 var w = colourlapse * rectWidth;
 var sx1 = (inc > 0) ? rx : rx + rectWidth - w;
 var sx2 = (inc > 0) ? rx + w : rx;

  background(255);
  stroke(255);

  let index1 = cur_col1 % colors.length;
  let index2 = cur_col2 % colors.length;
   fill(colors[index2]);
   rect(sx1, ry, w, rectHeight);

  // text
  textSize(35);
  textStyle(BOLD);
  fill(255, 255, 255);
  text(textContents[index1], 550, 320, sx2, ry);
  text(textContents[index2], 550, 350, sx2, ry);

  fill(colors[cur_col2 % colors.length]);
  rect(sx2, ry, rectWidth-w, rectHeight);

  colourlapse += inc;
    if (colourlapse >= 1) {
     colourlapse = 1;
     inc *= -1;
     cur_col2 += 2;
    } else if (colourlapse <= 0) {
     colourlapse = 0;
     inc *= -1;
     cur_col1 += 2;
     }
    }