P5js。圆的滑动矩阵，无法在2D数组中生成或填充新的圆行

Question

嗨，我正在创建一个二维的圆形数组，该数组每秒滑动一次。

现在，如果圆的高度大于草图的高度，则会将圆的高度重置为顶部。

因此，我会一次生成一个网格，然后周期性地滑动它。

现在，我希望它不只是一个重复出现的网格。我希望它在每次开始时都会产生新的一行，这样它就不会重复出现……

但是我无法使它正常工作，我尝试了很多事情，但是没有任何效果。

关于如何获得这种行为的任何想法？

代码以这种方式工作：

有圆形工厂功能，线工厂功能和i网格工厂功能。

网格工厂称为线工厂，而这个工厂称为圆工厂。

然后在设置中，我有一个 setInterval 函数，该函数每秒钟调用一次圆形对象上的slide方法。如果它的高度大于高度，则会将其重置为顶部。

这是codepen： https://codepen.io/giorgiomartini/pen/MzGmwW

 let canvasHeight = 500
let row
let grid
let amtOfHorizontalCircles = 15
let linesAmt = 50
let ySpacing = 10
let lineSpacing = canvasHeight/linesAmt 

const createCircle = (fillColor, x, y, maxRadius) => {
let xpos = x
let ypos = y
 return {
   xpos,
   ypos,
   display() {
     noStroke()
     fill(fillColor)
     ellipse(xpos, ypos, maxRadius, maxRadius)
   },
   slide(amt) {
     if( ypos >  linesAmt * lineSpacing ) {
       ypos = lineSpacing
     }
     ypos += amt
   },
 }
}

const createLine = (arr, amt,x, y) => {
  if( arr.length < amt) {
     arr.push(createCircle(`rgba(205, 64, 24, ${Math.random().toFixed(1)})`, x,  y, Math.random()*9))
     createLine(arr, amt, x+=width/amtOfHorizontalCircles, y)
  }
  return arr
}


const createGrid = (arr, linesAmt, y) => {
  if( arr.length < linesAmt) {
    arr.push(createLine([], amtOfHorizontalCircles, 0, y))
    createGrid(arr, linesAmt, y += lineSpacing)} 
  return arr
}

const slideRow = () => {
  // shits heights, and moves y's to begginig of they are higher tha Height
  grid.forEach( (line) => {
    line.forEach( x => {
    x.slide(ySpacing)
    })
  })
  //grid[grid.length -1] = createLine([], amtOfHorizontalCircles, 0, 0)
}


function setup () {
  createCanvas(300, canvasHeight)
  background("#140c28")
  grid = createGrid([], linesAmt, 10)
  setInterval(slideRow, 1000)
}

function draw () {
  background("#140c28")
  grid.forEach( row => {
    row.forEach( x => {
      x.display()
    })
  })
}

Answer 1

  

我希望它每次都在开始时生成一个新行，以使其永远不会重复...

为每个圆生成一个新的随机半径，该半径从底部到顶部“翻转”：

slide(amt) {
     if( ypos >  linesAmt * lineSpacing ) {
         ypos = lineSpacing
         maxRadius = Math.random()*9 // <-- new random radius for the circle 
     }
     ypos += amt
}