用作音频播放头的动画矩形未正确显示

我根据Youtube上的教程制作了一个鼓机,我试着用一个矩形作为播放头,它随着节拍及时进行动画制作。

“空格”键启动鼓循环。变量“sPat”(序列模式),定义为数组[1,2,3。。。等]显示矩形的绘制位置。beatIndex表示从该数组中获取的位置。

我需要帮助的是:

1. 为什么矩形不显示?
2. 为什么我一碰到空格,圆点就会变成红色,如何防止?

https://editor.p5js.org/dmihaescu/sketches/OFZm52gmF

let dum, dPat, dPhrase, drums;
let beatLength;
let sPat;
var canvas;
var cellWidth;
let beatIndex;

function setup() {
  canvas = createCanvas(600, 100);
  beatLength = 16;
  cellWidth = width/beatLength;
  beatIndex = 0;
  
  dum = loadSound('assets/dum.flac', () => {});             
  dPat = [1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0];
  sPat = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
  
  drums = new p5.Part();
  drums.setBPM('45')
  
  drums.addPhrase('dum', (time) => {dum.play(time)}, dPat);
  drums.addPhrase('seq', sequence, sPat);
}

function keyPressed() { 
  if(key === " ") {
    if(dum.isLoaded()) {
      if(!drums.isPlaying) {
      drums.loop();
      } else {
        drums.stop();
      }
      } else {
        console.log("not yet loaded");
      }
    }
  }

function draw() {
  background(0);
  stroke("gray");
  strokeWeight(2);
  for (let i = 0; i < beatLength+1; i++) {
    line(i*width/beatLength, 0, i*width/beatLength, height);
  }

  for (let i = 0; i < 4; i++) {
    line(0, i*height/3, width, i*height/3);
  }

  noStroke();
  for (let i = 0; i < beatLength; i++) {
    if(dPat[i] === 1) {
    ellipse(i*width/beatLength+0.5*width/beatLength,height/2,10);
    }
  }
}

function sequence (time, beatIndex) {
  stroke('red');
  fill(255,0,0,50);
  rect((beatIndex-1)*cellWidth, 0, 50, height);
}