Snippet Zone

)

}

}

)

(

}

{

)

)

(

)

(

(

{

}

)

(

)

}

)

)

{

(

(

)

)

}

)

(

}

About All Posts Warning Random

Speed-coded Eye

```
d = document
```
```
b = d.body
```
```
b.style.margin = 0
```
```
with(Math) {
```

  S = min(innerHeight * 2, innerWidth * 2)

```
  hs = S / 2
```
```
 
```
```
  with(
```
```
    b.appendChild(Object.assign(
```
```
      d.createElement`canvas`, {
```
```
        width: S,
```
```
        height: S
```
```
      })).getContext`2d`) {
```
```
 
```

    // array of xy coords, closed boolean

    function bezierSkin(bez, closed = true) {

```
      const avg = calcAvgs(bez);
```
```
      const leng = bez.length;
```
```
      let i, n;
```
```
 
```
```
      if (closed) {
```
```
        moveTo(avg[0], avg[1]);
```
```
        for (i = 2; i < leng; i += 2) {
```
```
          n = i + 1;
```

          quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);

```
        }
```

        quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);

```
      } else {
```
```
        moveTo(bez[0], bez[1]);
```
```
        lineTo(avg[0], avg[1]);
```

        for (i = 2; i < leng - 2; i += 2) {

```
          n = i + 1;
```

          quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);

```
        }
```

        lineTo(bez[leng - 2], bez[leng - 1]);

```
      }
```
```
    }
```
```
 
```

    // create anchor points by averaging the control points

```
    function calcAvgs(p) {
```
```
      const avg = [];
```
```
      const leng = p.length;
```
```
      let prev;
```
```
      for (var i = 2; i < leng; i++) {
```
```
        prev = i - 2;
```
```
        avg.push((p[prev] + p[i]) / 2);
```
```
      }
```
```
      // close
```

      avg.push((p[0] + p[leng - 2]) / 2);

      avg.push((p[1] + p[leng - 1]) / 2);

```
      return avg;
```
```
    }
```
```
 
```
```
 
```

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.4)'

    shutter = () => hs * radA + random() * hs * (.6 - pupil)

```
 
```
```
    innerA = _ => {
```
```
      tinc = .05
```
```
      rad = shutter()
```
```
      dx = cx + rad * cos(t)
```
```
      dy = cy + rad * sin(t)
```
```
 
```
```
      if (t > 21 && random() < .3) {
```
```
        fnIdx++
```
```
      }
```
```
    }
```
```
 
```
```
    oa = 7 * 3
```
```
 
```
```
    innerB = _ => {
```
```
      tinc = .05
```
```
      T = t * random();
```
```
      dx = cx + hs * radA * cos(T)
```
```
      dy = cy + hs * radA * sin(T)
```

      if (t > 28 + oa && random() < .3) {

```
        rad = hs * .8
```
```
        fnIdx++
```
```
      }
```
```
    }
```
```
 
```
```
    outerA = _ => {
```

      R = (rad - hs * .1) + random() * hs * .1;

```
      dx = cx + R * cos(t)
```
```
      dy = cy + R * sin(t)
```

      if (t > 35 + oa && random() < .3) {

```
        fnIdx++
```
```
      }
```
```
    }
```
```
 
```
```
    outerB = _ => {
```
```
      tinc = .01;
```
```
      R = rad
```
```
      if (random() < .5) R = shutter()
```
```
      dx = cx + R * cos(t)
```
```
      dy = cy + R * sin(t)
```
```
 
```

      if (t > 42 + oa && random() < .3) {

```
        fnIdx++
```
```
        ct = t
```
```
      }
```
```
    }
```
```
 
```
```
 
```
```
    t2 = 0
```
```
    outerC = _ => {
```
```
      tinc = .1;
```
```
      t2 += .01;
```
```
      R = hs * .3
```
```
      RR = (R + t2 + random() * 10);
```
```
      dx = cx + R * .84 + RR * cos(t)
```
```
      dy = cy - R * .84 + RR * sin(t)
```
```
 
```

      if (t > 70 + oa && random() < .3) {

```
        fnIdx++
```
```
      }
```
```
    }
```
```
 
```
```
    outerD = _ => {
```
```
      tinc = .1;
```
```
      t2 += .01;
```
```
      R = hs * .1
```
```
      RR = (R + t2 + random() * 10);
```
```
      dx = cx + hs * .3 + RR * cos(t)
```
```
      dy = cy + R * .84 + RR * sin(t)
```
```
 
```

      if (t > 91 + oa && random() < .3) {

```
        fnIdx++
```
```
      }
```
```
    }
```
```
 
```
```
    outerE = _ => {
```
```
      tinc = .1;
```
```
 
```
```
      rad -= random() * .1;
```
```
      dx = cx + rad * cos(t)
```
```
      dy = cy + rad * sin(t)
```
```
 
```

      if (t > 112 + oa && random() < .3) {

    fns = [outer, innerA, innerB, outerA, outerB, outerC, outerD, outerE, last]

```
    fnIdx = 0
```
```
 
```
```
    outer()
```
```
    drawX = dx
```
```
    drawY = dy
```
```
    pDrawX = 0
```
```
    pDrawY = 0
```
```
 
```
```
    strokeStyle = 'rgba(0, 0, 0, 0.8)'
```
```
    lineWidth = 1;
```
```
    tt = 0
```
```
 
```
```
    ox = 0;
```
```
    oy = 0;
```
```
    setOff = _ => {
```
```
      return
```
```
      ox = S * 1.2 * random() - S / 2
```
```
      oy = S * 1.2 * random() - S / 2
```
```
      sl = .1 + random() * .9;
```
```
    }
```
```
 
```
```
    sl = 1
```
```
    pnts = []
```
```
    done = false
```
```
    loop = _ => {
```
```
 
```
```
      if (done) {
```
```
        return;
```
```
      }
```

      shadowColor = 'rgba(155, 255, 255, .5)';

```
      shadowBlur = 15;
```
```
 
```
```
      save()
```
```
      scale(1, 1)
```
```
      lineWidth = 2;
```
```
      for (i = 0; i < 20; i++) {
```
```
        t += tinc / 2
```
```
        fns[fnIdx]()
```
```
 
```

        drawX += ((dx + ox) * sl - drawX) / 2;

        drawY += ((dy + oy) * sl - drawY) / 2;

```
 
```
```
        if (drawX != 0 && pDrawX) {
```
```
          beginPath()
```
```
          moveTo(pDrawX, pDrawY);
```
```
          lineTo(drawX, drawY);
```
```
          pnts.push(drawX, drawY);
```
```
          stroke()
```
```
        }
```
```
 
```
```
        pDrawX = drawX
```
```
        pDrawY = drawY
```
```
      }
```
```
 
```
```
      restore()
```
```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
}
```

Another thing for #genuary2022… a single curve…

January 21, 2022

0

// animation // canvas // javascript

snippet.zone ~ 2021-24 /// {s/z}