const animatorjs = 'https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js'

function loadScript(url) {
  let script = document.createElement('script')
  script.type = "text/javascript"
  script.src = url
  document.body.appendChild(script)

  return new Promise(resolve => {
    script.onload = () => {
      resolve()
    }
  }) 
}

function sleep(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms)
  })
}

;(async function(){
  await loadScript(animatorjs)

  const paper = new spritejs.Scene('#paper', {
      resolution: [1600, 1200],
      stickMode: 'width',
    }),
    Path = spritejs.Path

  async function ray() {
    const s = new Path()

    const pos = [200 + 1200 * Math.random(), 200 + 800 * Math.random()]
    const rotate = 360 * Math.random()

    const color = [127 + 128 * Math.random(), 255 * Math.random(), 128 * Math.random()].map(Math.round)

    s.attr({
      anchor: [0, 0],
      pos,
      rotate,
      lineWidth: 6,
      lineCap: 'round',
      d: 'M10,80 q140,-50 160,0',
      linearGradients: {
        strokeColor: {
          vector: [10, 30, 180, 90],
          colors: [{
            offset: 0,
            color: `rgba(${color[0]},${color[1]},${color[2]},0)`,
          }, {
            offset: 1,
            color: `rgba(${color[0]},${color[1]},${color[2]},0)`,
          }]
        },
      }  
    })
    
    paper.layer().append(s) 


    const a1 = new Animator(3000,  p => {
      let q = 0

      if(p > 0.618) {
        q = 1 - (1 - p) / 0.382
      }

      p = Math.min(p / 0.7, 1)

      const colors = [
        {offset: 0, color: `rgba(${color[0]},${color[1]},${color[2]},0)`},
        {offset: q, color: `rgba(${color[0]},${color[1]},${color[2]},0)`},
        {offset: p, color: `rgba(${color[0]},${color[1]},${color[2]},1)`},
        {offset: Math.min(p + 0.06, 1), color: `rgba(${color[0]},${color[1]},${color[2]},0)`},
      ]
      
      const linearGradients = s.attr('linearGradients')
      linearGradients.strokeColor.colors = colors

      const len = s.getPathLength()
      const [x, y] = s.getPointAtLength(p * len)

      linearGradients.strokeColor.vector = [10, 30, x + 5, y]

      s.attr({linearGradients})
    })   

    await a1.animate()
    paper.layer().remove(s)
  }

  do {
    ray()
    let delay = Math.random() * 500 + 200
    await sleep(delay)
  }while(1)  
})()
@@ -325,17 +325,16 @@
   %7D%0A  %7D)
- 
 %0A%7D%0A%0Afunc
@@ -772,16 +772,64 @@
 random()
+%0A    const controller = Math.random() * 340 + 10
 %0A%0A    co
@@ -1044,17 +1044,17 @@
  d: 
-'
+%60
 M10,80 q
 140,
@@ -1053,22 +1053,32 @@
 80 q
-140,-50 160,0'
+$%7Bcontroller%7D,-80 350,0%60
 ,%0A  
@@ -1409,18 +1409,16 @@
    %7D
-  
 %0A    %7D)%0A
     
@@ -1413,20 +1413,16 @@
 %0A    %7D)%0A
-    
 %0A    pap
@@ -1441,17 +1441,16 @@
 ppend(s)
- 
 %0A%0A%0A    c
@@ -1949,22 +1949,16 @@
       %5D%0A
-      
 %0A      c
@@ -2244,19 +2244,16 @@
 )%0A    %7D)
-   
 %0A%0A    aw
@@ -2399,11 +2399,10 @@
 e(1)
-  
 %0A%7D)()
+%0A

update demo-ray