Snippet Zone

Raphaël Easing Equations How To

```
const { pow, PI } = Math;
```
```
 
```
```
// mostly unedited code from Raphaël
```
```
var ef = {
```
```
  linear: function(n) {
```
```
    return n;
```
```
  },
```
```
  '<': function(n) {
```
```
    return pow(n, 1.7);
```
```
  },
```
```
  '>': function(n) {
```
```
    return pow(n, 0.48);
```
```
  },
```
```
  '<>': function(n) {
```
```
    var q = 0.48 - n / 1.04,
```
```
      Q = Math.sqrt(0.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 + 0.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 - 0.075) * (2 * PI)) / 0.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 + 0.75;
```
```
      } else {
```
```
        if (n < 2.5 / p) {
```
```
          n -= 2.25 / p;
```
```
          l = s * n * n + 0.9375;
```
```
        } else {
```
```
          n -= 2.625 / p;
```
```
          l = s * n * n + 0.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;
```
```
 
```
```
// create a dot
```
```
function dot(x, y, radius, color) {
```

  const el = document.createElement('div');

```
  const size = `${radius * 2}px`;
```
```
  Object.assign(el.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: size,
```
```
    height: size,
```

    transform: `translate(${-radius}px, ${-radius}px)`,

```
    borderRadius: '50%',
```
```
    background: color
```
```
  });
```
```
  el.classList.add('dot');
```
```
  document.body.appendChild(el);
```
```
  return el;
```
```
}
```
```
 
```
```
const elA = dot(0, 40, 30, 'red');
```
```
const elB = dot(0, 110, 30, 'blue');
```
```
const elC = dot(0, 160, 20, 'green');
```
```
 
```
```
// how to use the easing equations:
```
```
let t = 0;
```
```
 
```
```
let start = Date.now();
```
```
let time = 0;
```
```
let duration = 2; // 2 seconds
```
```
function loop() {
```
```
  // frame based
```

  elA.style.left = `${ef.elastic(t) * 50}%`;

```
  t += 0.005;
```
```
 
```
```
  // time based
```
```
  if (time <= duration) {
```
```
    time = (Date.now() - start) / 1000;
```
```
    const param = time / duration;
```

    elB.style.left = `${ef.elastic(param) * 50}%`;

```
 
```
```
    // green bounce example
```

    elC.style.left = `${ef.bounce(param) * 50}%`;

```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

I realized it might not be obvious how to use Raphaël’s easing equations. So I speed coded this example.

If you’d like to learn more about this kind of thing gsap is a great place to start… it is amazing… I highly recommend browsing the source.

January 18, 2022

// animation // javascript // oldschool // speed-coded // tricks

Rotate Point Around Point (Golfed)

```
  rot = (
```
```
    cx, cy, X, Y, ang,
```
```
    cos = Math.cos(-ang),
```
```
    sin = Math.sin(-ang),
```

    x = cos * (X - cx) + sin * (Y - cy) + cx,

    y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

Rotate one point around another… I like to use something like this when speed-coding and golfing…

January 6, 2022

// math // matrix // oldschool // tricks

Perlin Noise on JavaScript Canvas

// IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.

```
const p = [];
```

const permutation = [151,160,137,91,90,15,

131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,

190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,

88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,

77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,

102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,

135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,

5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,

223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,

129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,

251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,

49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,

138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];

```
 
```
```
for (let i = 0; i < 256 ; i++) 
```
```
  p[256+i] = p[i] = permutation[i]; 
```
```
 
```
```
function noise(x, y, z) {
```

  const X = Math.floor(x) & 255,

        Y = Math.floor(y) & 255,

```
        Z = Math.floor(z) & 255;
```

  x -= Math.floor(x);

  y -= Math.floor(y);

```
  z -= Math.floor(z);
```
```
 
```

  const u = fade(x),

        v = fade(y),

```
        w = fade(z);
```

  const A = p[X  ]+Y, AA = p[A]+Z, AB = p[A+1]+Z,

      B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;

```
 
```

  return lerp(w, lerp(v, lerp(u, grad(p[AA  ], x  , y  , z   ),

                                  grad(p[BA  ], x-1, y  , z   )),

                          lerp(u, grad(p[AB  ], x  , y-1, z   ),

                                  grad(p[BB  ], x-1, y-1, z   ))),

                  lerp(v, lerp(u, grad(p[AA+1], x  , y  , z-1 ),

                                  grad(p[BA+1], x-1, y  , z-1 )),

                          lerp(u, grad(p[AB+1], x  , y-1, z-1 ),

                                  grad(p[BB+1], x-1, y-1, z-1 ))));

```
}
```
```
function fade(t) { 
```

  return t * t * t * (t * (t * 6 - 15) + 10);

```
}
```
```
function lerp(t, a, b) { 
```
```
  return a + t * (b - a); 
```
```
}
```
```
function grad(hash, x, y, z) {
```

  const h = hash & 15;

  const u = h<8 ? x : y,

        v = h<4 ? y : h==12||h==14 ? x : z;

  return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);

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

const canvas = document.body.appendChild(document.createElement('canvas'));

```
const c = canvas.getContext('2d');
```
```
canvas.width = canvas.height = 200;
```
```
 
```
```
c.fillStyle = 'black';
```

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

```
 
```

const pix = c.createImageData(canvas.width, canvas.height);

```
 
```
```
const freq = 1 / 20;
```
```
let inc = 0;
```
```
let z = 0;
```
```
 
```
```
function loop() {
```
```
  z += 0.02;
```
```
  inc = 0;
```

  for (var y = 0; y < canvas.height; y++) {

    for (var x = 0; x < canvas.width; x++) {

      var col = parseInt(Math.abs(noise(x * freq, y * freq, z)) * 500);

```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = col;
```
```
      pix.data[inc++] = 255;
```
```
    }
```
```
  }
```
```
 
```
```
  c.putImageData(pix, 0, 0);
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Perlin noise (created by Ken Perlin).

Years ago I grabbed the noise function from here I think….

This shows how to do perlin noise on an html5 canvas. If you need a more performant one for animation and/or larger images – a glsl shader is the way to go.

December 16, 2021

// canvas // graphics // javascript // math // oldschool

Super Simple Seeded Random

```
let _seed = 1234567;
```
```
 
```

// Deterministic pseudo-random float in the interval [ 0, 1 ]

```
function seededRandom( s ) {
```

  if ( s !== undefined ) _seed = s % 2147483647;

```
 
```
```
  // Park-Miller algorithm
```
```
  _seed = _seed * 16807 % 2147483647;
```
```
  return ( _seed - 1 ) / 2147483646;
```
```
}
```

Straight from the THREE.js source code – a fun and simple seeded random. The best libraries are always filled with gems like this…

If I were going to use this I would do a couple things out of pure preference:

```
let seed = 1234567;
```
```
 
```

const setSeed = newSeed => seed = newSeed

```
function seededRand() {
```
```
  // Park-Miller algorithm
```
```
  seed *= 16807 % 0x7fffffff;
```
```
  return (seed - 1) / 0x7fffffff;
```
```
}
```
```
 
```
```
// try it out:
```
```
 
```
```
console.log('one', seededRand());
```
```
console.log('two', seededRand());
```
```
console.log('three', seededRand());
```
```
 
```
```
seed = 9999
```

console.log('one new seed', seededRand());

console.log('one new seed', seededRand());

```
 
```
```
seed = 1234567;
```

console.log('one old seed', seededRand());

If you’re wondering about what this is doing… read more about it here.

December 14, 2021

// hex // javascript // math // oldschool // tricks

Newer Posts

Raphaël Easing Equations How To

Rotate Point Around Point (Golfed)

Perlin Noise on JavaScript Canvas

Super Simple Seeded Random

Recent

Archive