)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

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.

Easy Hex Color Invert

  1. let color = 0xFFFF00;
  2.  
  3. function toHexString(col) { 
  4.   return '#' + ('000000' + col.toString(16)).substr(-6);
  5. }
  6.  
  7. function onClick() {
  8.   // invert the color
  9.   color ^= 0xFFFFFF;
  10.   document.body.style.background = toHexString(color);
  11. }
  12.  
  13. onClick();
  14.  
  15. document.addEventListener('click', onClick);
  16.  
  17. console.log('try a different initial color');
  18. console.log('click anywhere to invert background...');

Easily invert a hex color. Expanding on yesterdays post – just one of many reasons you may want to work with colors in their integer form.

// color // hex // javascript // math // tricks

Integers to Colors

  1. function toHexString(col) { 
  2.   return '#' + ('000000' + col.toString(16)).substr(-6);
  3. }
  4.  
  5. document.body.style.background = toHexString(0x275ba1);
  6.  
  7. console.log("#275ba1 as an integer:", 0x275ba1);
  8. console.log("#ff0000 as an integer:", 0xff0000);

Convert an integer in hex (like 0xff0000) to a usable hex string "#ff0000".

// color // hex // javascript // math

Canvas ImageData

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const width = 200;
  5. canvas.width = canvas.height = width;
  6.  
  7. const c = canvas.getContext('2d');
  8. const pixels = c.createImageData(canvas.width, canvas.height);
  9. const size = canvas.width * canvas.height;
  10.  
  11. let index = 0, x, y;
  12.  
  13. for (var i = 0; i < size; i++){
  14.   x = i % width;
  15.   y = Math.floor(i / width);
  16.  
  17.   pixels.data[index++] = x;
  18.   pixels.data[index++] = y;
  19.   pixels.data[index++] = width - x;
  20.   pixels.data[index++] = 255;
  21. }
  22. c.putImageData(pixels, 0, 0);

This shows how to set pixel data on an html5 canvas.

// canvas // color // graphics // hex // javascript // math

toString Hack Obfuscated

  1. x=''+self 
  2. j=''
  3. 'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'
  4. .split``
  5. .map(_=>j+=`x[0x${_}]+`)
  6. console.log(eval(j+'""'))

Yesterday’s snippet saying something else…

It’s simpler than it looks:

  1. x=''+self 
  2. // becomes "[object Window]"
  3.  
  4. j='' 
  5. // initialize `j` which will be javascript to pass to `eval`
  6.  
  7. 'd1d7a17123456...' 
  8. // this is a list of index values to 
  9. // look up in `x` in hexidecimal so that each 
  10. // index is a single character
  11.  
  12. .split``
  13. // split the index values into an array `[0xe, 0x2 ...`
  14.  
  15. .map(_=>j+=`x[0x${_}]+`)
  16. // map over the index values and write a string like
  17. // this `x[0xe]+x[0x2]+...` into `j`
  18.  
  19. console.log(eval(j+'""'))
  20. // evaluate `j` with an empty string at the end
  21. // `x[0xe]+x[0x2]+""` and log it out
`
snippet.zone ~ 2021-22 /// {s/z}