Snippet Zone

Raphaël Easing Equations

```
var ef = R.easing_formulas = {
```
```
    linear: function (n) {
```
```
        return n;
```
```
    },
```
```
    "<": function (n) {
```
```
        return pow(n, 1.7);
```
```
    },
```
```
    ">": function (n) {
```
```
        return pow(n, .48);
```
```
    },
```
```
    "<>": function (n) {
```
```
        var q = .48 - n / 1.04,
```

            Q = math.sqrt(.1734 + q * q),

```
            x = Q - q,
```

            X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),

```
            y = -Q - q,
```

            Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),

```
            t = X + Y + .5;
```

        return (1 - t) * 3 * t * t + t * t * t;

```
    },
```
```
    backIn: function (n) {
```
```
        var s = 1.70158;
```

        return n * n * ((s + 1) * n - s);

```
    },
```
```
    backOut: function (n) {
```
```
        n = n - 1;
```
```
        var s = 1.70158;
```

        return n * n * ((s + 1) * n + s) + 1;

```
    },
```
```
    elastic: function (n) {
```
```
        if (n == !!n) {
```
```
            return n;
```
```
        }
```

        return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;

```
    },
```
```
    bounce: function (n) {
```
```
        var s = 7.5625,
```
```
            p = 2.75,
```
```
            l;
```
```
        if (n < (1 / p)) {
```
```
            l = s * n * n;
```
```
        } else {
```
```
            if (n < (2 / p)) {
```
```
                n -= (1.5 / p);
```
```
                l = s * n * n + .75;
```
```
            } else {
```
```
                if (n < (2.5 / p)) {
```
```
                    n -= (2.25 / p);
```

                    l = s * n * n + .9375;

```
                } else {
```
```
                    n -= (2.625 / p);
```

                    l = s * n * n + .984375;

```
                }
```
```
            }
```
```
        }
```
```
        return l;
```
```
    }
```
```
};
```
```
ef.easeIn = ef["ease-in"] = ef["<"];
```
```
ef.easeOut = ef["ease-out"] = ef[">"];
```

ef.easeInOut = ef["ease-in-out"] = ef["<>"];

```
ef["back-in"] = ef.backIn;
```
```
ef["back-out"] = ef.backOut;
```

Another fun chunk of code directly from the Raphaël source. Makes me think of the Penner easing equations.

January 17, 2022

// animation // javascript // math

Bat Signal

document.body.innerHTML = '<pre>'+`n2zh2

```
f8l2b2l8
```
```
b8pep8
```
```
7cpepc
```
```
5ijiji
```
```
3yyq
```
```
0
```
```
0
```
```
0
```
```
3yyq
```
```
5afy8fa
```
```
98f69a96f8
```

f4f2d6d2f4`.replace(/./g,c=>'* '[(n=parseInt(c,36))&1].repeat(n/2||49))

           *                         *
       ****          *     *          ****
     ****            *******            ****
   ******            *******            ******
  *********         *********         *********
 ***********************************************
*************************************************
*************************************************
*************************************************
 ***********************************************
  *****       *********************       *****
    ****       ***    *****    ***       ****
       **       *      ***      *       **

Fun js codegolf answer from user arnauld… Whole thread is very fun…

January 15, 2022

// codegolf // javascript // strings

Inline Binary

```
console.log(0b1010 & 0b0010)
```
```
// 2
```

… 😀

January 14, 2022

// binary // javascript

HSL to RGB JavaScript

```
const hsl2rgb = (h, s, l, o) => {
```
```
  if (h > 1 || s > 1 || l > 1) {
```
```
      h /= 360;
```
```
      s /= 100;
```
```
      l /= 100;
```
```
  }
```
```
  h *= 360;
```
```
 
```
```
  let R, G, B, X, C;
```
```
 
```
```
  h = (h % 360) / 60;
```
```
  C = 2 * s * (l < .5 ? l : 1 - l);
```
```
  X = C * (1 - Math.abs(h % 2 - 1));
```
```
  R = G = B = l - C / 2;
```
```
 
```
```
  h = ~~h;
```
```
  R += [C, X, 0, 0, X, C][h];
```
```
  G += [X, C, C, X, 0, 0][h];
```
```
  B += [0, 0, X, C, C, X][h];
```

  return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;

```
};
```
```
 
```
```
console.log(hsl2rgb(122, 50, 50, .5));
```

Taken from the Raphaël source… Always fun to browse – I’ve learned lots of great stuff from it 😀

January 13, 2022

// color // javascript // math

Freeth’s Nephroid Animated

```
const FOUR_PI = 4 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() {
```

  c.clearRect(0, 0, canvas.width, canvas.height);

```
  c.fillStyle = 'blue';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  // Freeth's Nephroid
```

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

```
  // r = a(1 + 2sin(θ / 2))
```
```
  let b = 2 * cos(inc);
```
```
  inc += .01;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

```
    x = rad * cos(theta);
```
```
    y = rad * sin(theta);
```
```
    c.fillRect(x, y, 2, 2);
```
```
    theta += 0.05;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

```
 
```
```
draw()
```

It’s always fun to play with curves from here Famous Curves Index

January 11, 2022

// animation // canvas // javascript // math

Older Posts

Newer Posts

Raphaël Easing Equations

Bat Signal

Inline Binary

HSL to RGB JavaScript

Freeth’s Nephroid Animated

Recent

Archive