Genuary 28: infinite scroll

mySketch
xxxxxxxxxx
 
let simplex
let colors=["#8e5017","#d29c34","#a40e02","#28727f","#3b515d","#0f120c"]
let streamers=[]
let balls=[]
let side=0
​
function preload(){
font= loadFont('FamiljenGrotesk-VariableFont_wght.ttf')
}
​
function setup() {
  createCanvas(400, 400); 
  gravity= createVector(0, 0.01)
  simplex= new openSimplexNoise(Date.now()) 
  background('#f4f1de') 
  let coloring=-20
  side=0
  for(let y=0; y<height; y+=50){
    let sp=side%2
    streamers.push(new streamer(sp, y, random(120, 160), y))
    balls.push(new ball(random(125, 275), y+ random(-30, 30), random(50)))
    side++
  }
}
​
function draw(){
  
  background('#f4f1de') 
  
  fill("#0f120c")
  rect(60, 0, 280, 400)
  if(frameCount%50==0){
    let sp=side%2
    streamers.push(new streamer(sp, 430, random(120, 160), frameCount+400))
    balls.push(new ball(random(125, 275), 430+ random(-10, 10), random(40)))
    side++
  }
  for(let i=streamers.length-1; i>=0; i--){
    streamers[i].update()
    streamers[i].show()
  
  }
  
  for(let i=balls.length-1; i>=0; i--){
      balls[i].be()
      }
  
  fill('#f4f1de')
  noStroke()
  rect(0, 0, 60, height)
  rect(340, 0, 60, height)
  
  
  noFill()
  stroke(100)
  textFont(font)
   fill(100)
  strokeWeight(1)
  stroke(100)
  text('1.28', 20, 380)  
  
  
}
​
class streamer{
  constructor(side, y, length, seed){
    this.side=side
    this.y=y
    this.length=length
    this.seed= seed
    this.c1= colorMixer(seed, colors)
    this.c2= colorMixer(seed+1, colors)
  }
  
  show(){
    if(this.side==0){
    for(let x=60; x<(60+this.length); x+=1){
      noStroke()
      let size=map(x, 60, 60+this.length, 30, 1)
      let colorMix= map(x, 60, 60+this.length, 0, 1)
      fill(color(spectral.mix(this.c1, this.c2, colorMix)))
      let yoff= simplex.noise2D(this.seed, x/100)*50
      ellipse(x, this.y+yoff, size)
    }
    }
    if(this.side==1){
    for(let x=340; x>(340-this.length); x-=1){
      noStroke()
      let size=map(x, 340, 340-this.length, 30, 1)
      let colorMix= map(x, 340, 340-this.length, 0, 1)
      fill(color(spectral.mix(this.c1, this.c2, colorMix)))
      let yoff= simplex.noise2D(this.seed, x/100)*50
      ellipse(x, this.y+yoff, size)
    
    }
    }   
    
  }
  
  update(){
    this.y-=1
    if(this.y<-40){
      let index= streamers.indexOf(this)
      streamers.splice(index, 1)  
      
    }
  }
}
​
class ball{
  constructor(x, y, s){
    this.x=x
    this.y=y
    this.s=s
  }
  
  be(){
    push()
    blendMode(DODGE)
    for(let size=this.s; size>this.s/20; size-=this.s/20){
      noStroke()
      let colorMix= map(size, this.s, this.s/20, 0, 1)
      fill(spectral.mix(colors[0], colors[1], colorMix))
      ellipse(this.x, this.y, size)
      
    }
    pop()
    this.y-=1
    if(this.y<-40){
      let index= balls.indexOf(this)
      balls.splice(index, 1)    
    }
  } 
  
}
​
​
function colorMixer(i, colorArray, alpha) {
  let c = noise(i) * colorArray.length
  let c1 = floor(c)
  let c2 = floor(c + 1) % colorArray.length
  let color1 = colorArray[c1]
  let color2 = colorArray[c2]
  let mix = fract(c)
  let coloring = spectral.mix(color1, color2, mix)
  return coloring
}