Make seamless loop pattern

jeong

I made this code, but it has a time difference. How I fix this problem? It looks so easy, but it's difficult for me.

Thanks for your help :)

let yList = [];
let speed = 3;
var yCount = 4;
var zigwid;
var tab;

function setup() {
  createCanvas(600,600);
  background(0);
  frameRate(30);
  stroke(255);

}

function draw() {
  background(0);
  zigwid = map(mouseX,0,width,0,200);
  tab = map(mouseY,0,height,5,50);
  for(var i = 0; i < yCount; i++){
    var y = i * height/3;
    yList.push(y);
    var y1 = yList[i];
    var y2 = yList[i] + height/3;
    var y3 = yList[i];
    var y4 = yList[i] + height/3;
    // var y5 = yList[i];
    // var y6 = yList[i] + height/4;

    if(i%2 == 0){
      for(var j = -zigwid; j < width; j+=tab){
        line(j,y1,j+zigwid,y2);
      }
    } else{
      for(var k = -zigwid; k < width; k+=tab){
        line(k+zigwid, y3, k, y4);
      }
    }
    yList[i] = yList[i] - speed;

    if(y2 < 0){
      yList[i] = height;
      //yList.splice(0,1);
      console.log(y2);
    }
  }
}

KevinWorkman

What does this code do? What do you mean by "it has a time difference"?