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

Question

您好，我正在创建一个二维圆阵列，它每秒都会向下滑动。

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

因此，我生成一次网格，然后循环滑动它。

现在，我希望它不是蜜蜂，只是一个重复的网格。我希望它每次都在开头生成一个新行，这样它就不会重复自己...

但是我无法让它工作，我已经尝试了很多东西但是 none 工作..

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

代码是这样工作的：

有一个圆形工厂函数，一个线工厂函数m和i个网格工厂函数。

网格厂叫线厂，这个叫圆厂

然后在设置时我有一个 setInterval 函数，它每隔一秒调用 circle 对象上的 slide 方法。如果它的高度大于它的高度，它会将高度重置为顶部。

这是代码笔： 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

I want it that it generates a new row at the beginning every time, so that it never repeats itself...

为每个圆生成一个新的随机半径，从下到上 "flipped"：

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

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

P5js. Sliding matrix of circles, can't generate or fill new row of circles in 2D array

javascript

processing

p5.js