为什么这个缓冲区数组比实际信号少 1 个样本

Question

我正在尝试创建一个数组（buffer_array），我在其中一次推送 1 个样本，当它变满时，我首先移除 50%，然后再次填充新样本。

我基本上是使用随机数来生成假信号。我将此信号与 buffer_array 一起绘制，但在第一次迭代后，buffer_array 得到的样本少了一个，信号和缓冲区看起来完全不同。

let  ring_buffer = [] 
let signal = []
let sampleLength = 20
let signalLength  = 0
let spacing = 16
function setup() {
  createCanvas(400, 400);
  signalLength = width/spacing
  
  //init signal
  // for(let i=0;i<signalLength;i++){
  //   signal.push(0)
  // }
  
  //init buffer
  // for(let i=0;i<sampleLength;i++){
  //   ring_buffer.push(0)
  // }
  
  frameRate(1)
}

function draw() {
  background(220);
  
  translate(0,height>>2)
  
  // fake sensor signal sample
  let sample = 0<random(-30,30)?20:-20 
  
  //signal
  stroke(255,0,0)
  updateSignal(sample)
  drawSignal(signal,100)
  
  //ringbuffer
  stroke(0,0,255)
  updateRingbuffer(sample)
  drawSignal(ring_buffer,150)
  
  //draw axis
  drawAxis()
}

function updateSignal(sample){
  if(signal.length<signalLength){
    signal.push(sample)
  }else{
    signal.shift()
  }
}

function updateRingbuffer(sample){
  if(ring_buffer.length<sampleLength){
    ring_buffer.push(sample)
  }else{
    ring_buffer.splice(0,sampleLength/2) 
  }
}


function drawSignal(arr,offset){
  noFill()
  beginShape()
  for(let i=0;i<arr.length;i++){
    vertex(i*spacing,arr[i]+offset)
  }
  endShape()
}

function drawAxis(){
  fill(0)
  noStroke()
  textSize(8)
  textAlign(CENTER)
  for(let i=0;i<width;i+=spacing){ 
    text(i/spacing,i,200)
    push()
    translate(i,200)
    rotate(PI/2)
    stroke(0,10)
    line(-width/2,0,width/2,0)
    pop()
  }
}