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

More Odd Nonsense Code

  1. console.log(
  2.   (() => () => () => 0xa)()()()
  3. )
// javascript

Odd Nonsense Code

  1. _=((((
  2.   (
  3.     ( 0xb - 0b1001
  4.     )
  5.   )
  6. ) / 0xd0f)
  7.  / 0b010101
  8. ) ** .001 ** 2) / 0xe * 0xf00d * 0xdab
  9. console.log(_)
¯\_(:/)_/¯
// javascript // math

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

Bring Node to Top

  1. myEl.parentNode.appendChild(myEl);

This will make an element the top most of all of its siblings…

  1. document.body.innerHTML += `
  2. <div>
  3.   <button>one</button>
  4.   <button>two</button>
  5.   <button>three</button>
  6.   <button>four</button>
  7. </div>
  8. <style>
  9.   button { display: block; cursor: pointer; }
  10. </style>
  11. `;
  12. document.addEventListener('click', e => {
  13.   if (e.target.tagName === 'BUTTON') {
  14.     e.target.parentNode.appendChild(e.target);
  15.   }
  16. });

Clicking on any button will bring it to the top most position within its parent.

// dom // javascript // tricks // ui
Older Posts
Newer Posts

Recent

Archive

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