)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Object Key Order and Reflect.ownKeys

  1. const obj = { 11: 'eleven', 23: 'twenty-three', 1: 'one', 2: 'two', '-1': 'negative 1' };
  2.  
  3. console.log(Reflect.ownKeys(obj))

I noticed that for in.. over an object was giving me weirdly consistent results across all browsers the other day and stumbled upon this.

Great news, but it’s Reflect.ownKeys for me… now that IE11 is dying/dead.

// arrays // objects // oldschool

Raphaël Easing Equations How To

  1. const { pow, PI } = Math;
  2.  
  3. // mostly unedited code from Raphaël
  4. var ef = {
  5.   linear: function(n) {
  6.     return n;
  7.   },
  8.   '<': function(n) {
  9.     return pow(n, 1.7);
  10.   },
  11.   '>': function(n) {
  12.     return pow(n, 0.48);
  13.   },
  14.   '<>': function(n) {
  15.     var q = 0.48 - n / 1.04,
  16.       Q = Math.sqrt(0.1734 + q * q),
  17.       x = Q - q,
  18.       X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
  19.       y = -Q - q,
  20.       Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
  21.       t = X + Y + 0.5;
  22.     return (1 - t) * 3 * t * t + t * t * t;
  23.   },
  24.   backIn: function(n) {
  25.     var s = 1.70158;
  26.     return n * n * ((s + 1) * n - s);
  27.   },
  28.   backOut: function(n) {
  29.     n = n - 1;
  30.     var s = 1.70158;
  31.     return n * n * ((s + 1) * n + s) + 1;
  32.   },
  33.   elastic: function(n) {
  34.     if (n == !!n) {
  35.       return n;
  36.     }
  37.     return pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * PI)) / 0.3) + 1;
  38.   },
  39.   bounce: function(n) {
  40.     var s = 7.5625,
  41.       p = 2.75,
  42.       l;
  43.     if (n < 1 / p) {
  44.       l = s * n * n;
  45.     } else {
  46.       if (n < 2 / p) {
  47.         n -= 1.5 / p;
  48.         l = s * n * n + 0.75;
  49.       } else {
  50.         if (n < 2.5 / p) {
  51.           n -= 2.25 / p;
  52.           l = s * n * n + 0.9375;
  53.         } else {
  54.           n -= 2.625 / p;
  55.           l = s * n * n + 0.984375;
  56.         }
  57.       }
  58.     }
  59.     return l;
  60.   }
  61. };
  62. ef.easeIn = ef['ease-in'] = ef['<'];
  63. ef.easeOut = ef['ease-out'] = ef['>'];
  64. ef.easeInOut = ef['ease-in-out'] = ef['<>'];
  65. ef['back-in'] = ef.backIn;
  66. ef['back-out'] = ef.backOut;
  67.  
  68. // create a dot
  69. function dot(x, y, radius, color) {
  70.   const el = document.createElement('div');
  71.   const size = `${radius * 2}px`;
  72.   Object.assign(el.style, {
  73.     position: 'absolute',
  74.     left: `${x}px`,
  75.     top: `${y}px`,
  76.     width: size,
  77.     height: size,
  78.     transform: `translate(${-radius}px, ${-radius}px)`,
  79.     borderRadius: '50%',
  80.     background: color
  81.   });
  82.   el.classList.add('dot');
  83.   document.body.appendChild(el);
  84.   return el;
  85. }
  86.  
  87. const elA = dot(0, 40, 30, 'red');
  88. const elB = dot(0, 110, 30, 'blue');
  89. const elC = dot(0, 160, 20, 'green');
  90.  
  91. // how to use the easing equations:
  92. let t = 0;
  93.  
  94. let start = Date.now();
  95. let time = 0;
  96. let duration = 2; // 2 seconds
  97. function loop() {
  98.   // frame based
  99.   elA.style.left = `${ef.elastic(t) * 50}%`;
  100.   t += 0.005;
  101.  
  102.   // time based
  103.   if (time <= duration) {
  104.     time = (Date.now() - start) / 1000;
  105.     const param = time / duration;
  106.     elB.style.left = `${ef.elastic(param) * 50}%`;
  107.  
  108.     // green bounce example
  109.     elC.style.left = `${ef.bounce(param) * 50}%`;
  110.   }
  111.  
  112.   requestAnimationFrame(loop);
  113. }
  114. 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.

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

Rotate Point Around Point (Golfed)

  1.   rot = (
  2.     cx, cy, X, Y, ang,
  3.     cos = Math.cos(-ang),
  4.     sin = Math.sin(-ang),
  5.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  6.     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…

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

Perlin Noise on JavaScript Canvas

  1. // IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.
  2. const p = [];
  3. const permutation = [151,160,137,91,90,15,
  4. 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
  5. 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
  6. 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
  7. 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
  8. 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
  9. 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
  10. 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
  11. 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
  12. 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
  13. 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
  14. 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
  15. 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
  16.  
  17. for (let i = 0; i < 256 ; i++) 
  18.   p[256+i] = p[i] = permutation[i]; 
  19.  
  20. function noise(x, y, z) {
  21.   const X = Math.floor(x) & 255,                  
  22.         Y = Math.floor(y) & 255,                  
  23.         Z = Math.floor(z) & 255;
  24.   x -= Math.floor(x);                                
  25.   y -= Math.floor(y);                               
  26.   z -= Math.floor(z);
  27.  
  28.   const u = fade(x),                               
  29.         v = fade(y),                                
  30.         w = fade(z);
  31.   const A = p[X  ]+Y, AA = p[A]+Z, AB = p[A+1]+Z,      
  32.       B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;      
  33.  
  34.   return lerp(w, lerp(v, lerp(u, grad(p[AA  ], x  , y  , z   ),  
  35.                                   grad(p[BA  ], x-1, y  , z   )), 
  36.                           lerp(u, grad(p[AB  ], x  , y-1, z   ),   
  37.                                   grad(p[BB  ], x-1, y-1, z   ))), 
  38.                   lerp(v, lerp(u, grad(p[AA+1], x  , y  , z-1 ),   
  39.                                   grad(p[BA+1], x-1, y  , z-1 )),  
  40.                           lerp(u, grad(p[AB+1], x  , y-1, z-1 ),
  41.                                   grad(p[BB+1], x-1, y-1, z-1 ))));
  42. }
  43. function fade(t) { 
  44.   return t * t * t * (t * (t * 6 - 15) + 10); 
  45. }
  46. function lerp(t, a, b) { 
  47.   return a + t * (b - a); 
  48. }
  49. function grad(hash, x, y, z) {
  50.   const h = hash & 15;                      
  51.   const u = h<8 ? x : y,                 
  52.         v = h<4 ? y : h==12||h==14 ? x : z;
  53.   return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
  54. }
  55.  
  56. const canvas = document.body.appendChild(document.createElement('canvas'));
  57. const c = canvas.getContext('2d');
  58. canvas.width = canvas.height = 200;
  59.  
  60. c.fillStyle = 'black';
  61. c.fillRect(0, 0, canvas.width, canvas.height);
  62.  
  63. const pix = c.createImageData(canvas.width, canvas.height);
  64.  
  65. const freq = 1 / 20;
  66. let inc = 0;
  67. let z = 0;
  68.  
  69. function loop() {
  70.   z += 0.02;
  71.   inc = 0;
  72.   for (var y = 0; y < canvas.height; y++) {
  73.     for (var x = 0; x < canvas.width; x++) {
  74.       var col = parseInt(Math.abs(noise(x * freq, y * freq, z)) * 500);
  75.       pix.data[inc++] = col;
  76.       pix.data[inc++] = col;
  77.       pix.data[inc++] = col;
  78.       pix.data[inc++] = 255;
  79.     }
  80.   }
  81.  
  82.   c.putImageData(pix, 0, 0);
  83.   window.requestAnimationFrame(loop);
  84. }
  85. 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.

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

Super Simple Seeded Random

  1. let _seed = 1234567;
  2.  
  3. // Deterministic pseudo-random float in the interval [ 0, 1 ]
  4. function seededRandom( s ) {
  5.   if ( s !== undefined ) _seed = s % 2147483647;
  6.  
  7.   // Park-Miller algorithm
  8.   _seed = _seed * 16807 % 2147483647;
  9.   return ( _seed - 1 ) / 2147483646;
  10. }

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:

  1. let seed = 1234567;
  2.  
  3. const setSeed = newSeed => seed = newSeed
  4. function seededRand() {
  5.   // Park-Miller algorithm
  6.   seed *= 16807 % 0x7fffffff;
  7.   return (seed - 1) / 0x7fffffff;
  8. }
  9.  
  10. // try it out:
  11.  
  12. console.log('one', seededRand());
  13. console.log('two', seededRand());
  14. console.log('three', seededRand());
  15.  
  16. seed = 9999
  17. console.log('one new seed', seededRand());
  18. console.log('one new seed', seededRand());
  19.  
  20. seed = 1234567;
  21. console.log('one old seed', seededRand());

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

// hex // javascript // math // oldschool // tricks
Newer Posts

Recent

Archive

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