title: P5js. Sliding matrix of circles, can't generate or fill new row of circles in 2D array
body: <p>Hi am creating a 2D array of circles, which slides down every second.</p>
  
  <p>Right now if the height of the circles is bigger than the sketch height, it resets the height of the circles to the top.</p>
  
  <p><a href="https://i.stack.imgur.com/Dxy3j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dxy3j.png" alt="enter image description here"></a></p>
  
  <p>So, i generate once a grid and i just slide it, cyclically.</p>
  
  <p>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...</p>
  
  <p>But i cant get it to work , i have tried many things but none work..</p>
  
  <p>Any ideas of how can i get this behaviour? </p>
  
  <p>The code works this way: </p>
  
  <p>There is a circle factory function, a line factory functionm and i grid factory function.</p>
  
  <p>The grid factory calls the line factory and this one calls the circle one.</p>
  
  <p>Then on setup i have a <em>setInterval</em> 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.</p>
  
  <p>Here is the codepen: 
  <a href="https://codepen.io/giorgiomartini/pen/MzGmwW" rel="nofollow noreferrer">https://codepen.io/giorgiomartini/pen/MzGmwW</a></p>
  
  <pre><code> 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) =&gt; {
  let xpos = x
  let ypos = y
   return {
     xpos,
     ypos,
     display() {
       noStroke()
       fill(fillColor)
       ellipse(xpos, ypos, maxRadius, maxRadius)
     },
     slide(amt) {
       if( ypos &gt;  linesAmt * lineSpacing ) {
         ypos = lineSpacing
       }
       ypos += amt
     },
   }
  }
  
  const createLine = (arr, amt,x, y) =&gt; {
    if( arr.length &lt; 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) =&gt; {
    if( arr.length &lt; linesAmt) {
      arr.push(createLine([], amtOfHorizontalCircles, 0, y))
      createGrid(arr, linesAmt, y += lineSpacing)} 
    return arr
  }
  
  const slideRow = () =&gt; {
    // shits heights, and moves y's to begginig of they are higher tha Height
    grid.forEach( (line) =&gt; {
      line.forEach( x =&gt; {
      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 =&gt; {
      row.forEach( x =&gt; {
        x.display()
      })
    })
  }
  </code></pre>