时间戳

首页 > 解决方案 > 用作音频播放头的动画矩形未正确显示

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

问题描述

我正在按照 Youtube 上的教程构建鼓机，并且尝试使用矩形作为播放头，它与节拍同步。

“Space”键激活鼓循环。定义为数组 [1, 2, 3... 等] 的变量“sPat”（序列模式）显示了应该绘制矩形的位置。beatIndex 表示取自该数组的位置。

它似乎在工作，除了矩形大部分时间不显示，它在闪烁，并且只有大约 5% 的时间随机可见。我尝试使用矩形参数来查看发生了什么，将其设置为固定位置并尝试了 Firefox 和 Chrome。我对p5一点也不熟悉。

我需要帮助的是：

  1. 为什么不显示矩形？
  2. 为什么当我点击 Space 时这些点会变成红色，如何防止这种情况发生？

我试图将代码最小化为更小的工作版本。绘制矩形的“序列”函数在最后。你也可以在这里运行它：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);
}

标签： p5.js

解决方案

不需要单独的函数，只需将以下代码放入绘图函数中：-

  stroke('red');
  fill(255,0,0,50);
  rect((beatIndex-1)*cellWidth, 0, 50, height);

试着告诉它是否成功

推荐阅读