Btukfyl

Hi am creating a 2D array of circles, which slides down every second.

Right now if the height of the circles is bigger than the sketch height, it resets the height of the circles to the top.

So, i generate once a grid and i just slide it, cyclically.

Now, i want it not be bee just a grid repeating itself. I want it that it generates a new row at the beggining everytime, so that it never repeats itself...

But i cant get it to work , i have tried many things but none work..

Any ideas of how can i get this behaviour?

The code works this way:

There is a circle factory function, a line factory functionm and i grid factory function.

The grid factory calls the line factory and this one calls the circle one.

Then on setup i have a setInterval function that, every seconds calls the slide method on the circle object. and if its height is bigger than the height it resets the height to the top.

Here is the 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()

    })

  })

}

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

Generate a new random radius for every circle, which is "flipped" from the bottom to the top:

slide(amt) {

     if( ypos >  linesAmt * lineSpacing ) {

         ypos = lineSpacing

         maxRadius = Math.random()*9 // <-- new random radius for the circle 

     }

     ypos += amt

}