JS1k: The JavaScript code golfing competition

const t=["#ff0000","#ff9b1e","#ffff1e","#00ff00","#0000ff","#641eff","#c81eff"],i=(t,i)=>Math.random()*(i-t)+t;let h=[],e=t[0];const n=(t,s)=>({x:t,y:s,xM:0,yM:0,c:e,d(){const t=window.c;t.beginPath(),t.fillStyle=this.c,t.arc(this.x,this.y,6,0,2*Math.PI),t.fill()},cl(){const t=n(this.x,this.y);return t.xM=Math.random()<.5?i(5,10):i(-10,-5),t.yM=i(-45,-35),t},m(){7+this.y+this.yM<window.a.height?(this.yM++,this.y+=this.yM):(h=h.filter(t=>t!==this)).push(this.cl(),this.cl()),this.x+this.xM<=window.a.width&&this.x+this.xM>=0?this.x+=this.xM:(this.c=e,this.xM=-this.xM)}}),s=()=>{window.c.clearRect(0,0,window.a.width,window.a.height),window.c.fillStyle="rgb(0,0,0)",window.c.fillRect(0,0,window.a.width,window.a.height),h.length>4e3&&(h=h.slice(h.length-4e3,h.length)),h.forEach(t=>{t.m(),t.d()}),window.requestAnimationFrame(s)};window.addEventListener("load",()=>{s(),setInterval(()=>{const i=t.indexOf(e);e=i===t.length-1?t[0]:t[i+1]},700)}),window.addEventListener("click",t=>{h.push(n(t.clientX,t.clientY))});

Y29uc3QgdD1bIiNmZjAwMDAiLCIjZmY5YjFlIiwiI2ZmZmYxZSIsIiMwMGZmMDAiLCIjMDAwMGZmIiwiIzY0MWVmZiIsIiNjODFlZmYiXSxpPSh0LGkpPT5NYXRoLnJhbmRvbSgpKihpLXQpK3Q7bGV0IGg9W10sZT10WzBdO2NvbnN0IG49KHQscyk9Pih7eDp0LHk6cyx4TTowLHlNOjAsYzplLGQoKXtjb25zdCB0PXdpbmRvdy5jO3QuYmVnaW5QYXRoKCksdC5maWxsU3R5bGU9dGhpcy5jLHQuYXJjKHRoaXMueCx0aGlzLnksNiwwLDIqTWF0aC5QSSksdC5maWxsKCl9LGNsKCl7Y29uc3QgdD1uKHRoaXMueCx0aGlzLnkpO3JldHVybiB0LnhNPU1hdGgucmFuZG9tKCk8LjU/aSg1LDEwKTppKC0xMCwtNSksdC55TT1pKC00NSwtMzUpLHR9LG0oKXs3K3RoaXMueSt0aGlzLnlNPHdpbmRvdy5hLmhlaWdodD8odGhpcy55TSsrLHRoaXMueSs9dGhpcy55TSk6KGg9aC5maWx0ZXIodD0+dCE9PXRoaXMpKS5wdXNoKHRoaXMuY2woKSx0aGlzLmNsKCkpLHRoaXMueCt0aGlzLnhNPD13aW5kb3cuYS53aWR0aCYmdGhpcy54K3RoaXMueE0+PTA/dGhpcy54Kz10aGlzLnhNOih0aGlzLmM9ZSx0aGlzLnhNPS10aGlzLnhNKX19KSxzPSgpPT57d2luZG93LmMuY2xlYXJSZWN0KDAsMCx3aW5kb3cuYS53aWR0aCx3aW5kb3cuYS5oZWlnaHQpLHdpbmRvdy5jLmZpbGxTdHlsZT0icmdiKDAsMCwwKSIsd2luZG93LmMuZmlsbFJlY3QoMCwwLHdpbmRvdy5hLndpZHRoLHdpbmRvdy5hLmhlaWdodCksaC5sZW5ndGg+NGUzJiYoaD1oLnNsaWNlKGgubGVuZ3RoLTRlMyxoLmxlbmd0aCkpLGguZm9yRWFjaCh0PT57dC5tKCksdC5kKCl9KSx3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHMpfTt3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigibG9hZCIsKCk9PntzKCksc2V0SW50ZXJ2YWwoKCk9Pntjb25zdCBpPXQuaW5kZXhPZihlKTtlPWk9PT10Lmxlbmd0aC0xP3RbMF06dFtpKzFdfSw3MDApfSksd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIix0PT57aC5wdXNoKG4odC5jbGllbnRYLHQuY2xpZW50WSkpfSk7

const colors = [
        "#ff0000",
        "#ff9b1e",
        "#ffff1e",
        "#00ff00",
        "#0000ff",
        "#641eff",
        "#c81eff"
      ]
    , getRandom = (min, max) => Math.random() * (max - min) + min

let animatedObjects = []
  , currentColor = colors[0]

const Circle = (x, y) => {
  return {
    x,
    y,
    xM: 0,
    yM: 0,
    c: currentColor,

    d() {
      const ctx = window.c
      ctx.beginPath()
      ctx.fillStyle = this.c
      ctx.arc(this.x, this.y, 6, 0, Math.PI * 2)
      ctx.fill()
    },

    cl() {
      const newCircle = Circle(this.x, this.y)
      newCircle.xM = Math.random() < 0.5 ? getRandom(5, 10) : getRandom(-10, -5)
      newCircle.yM = getRandom(-45, -35)
      return newCircle
    },

    m() {
      if (7 + this.y + this.yM < window.a.height) { // Falling
        this.yM++
        this.y += this.yM
      } else { // Hit the ground
        animatedObjects = animatedObjects.filter(x => x !== this)
        animatedObjects.push(this.cl(), this.cl())
      }

      // X Motion
      if (this.x + this.xM <= window.a.width && this.x + this.xM >= 0) {
        this.x += this.xM
      } else {
        this.c = currentColor
        this.xM = -this.xM
      }
    }
  };
};

const render = () => {
  window.c.clearRect(0, 0, window.a.width, window.a.height)
  window.c.fillStyle = "rgb(0,0,0)"
  window.c.fillRect(0, 0, window.a.width, window.a.height)

  if (animatedObjects.length > 4000) {
    animatedObjects = 
      animatedObjects.slice(animatedObjects.length - 4000, animatedObjects.length)
  }

  animatedObjects
    .forEach(obj => {
      obj.m()
      obj.d()
    })
  
  window.requestAnimationFrame(render)
}

window.addEventListener("load", () => {
  render()

  setInterval(() => {
    const currentIndex = colors.indexOf(currentColor)
    currentColor = currentIndex === colors.length - 1
                 ? colors[0]
                 : colors[currentIndex + 1]; 
  }, 700)
})

window.addEventListener("click", e => {
  animatedObjects.push(Circle(e.clientX, e.clientY))
})