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.
Easy Hex Color Invert
let color = 0xFFFF00;
function toHexString(col) {
return '#' + ('000000' + col.toString(16)).substr(-6);
}
function onClick() {
// invert the color
color ^= 0xFFFFFF;
document.body.style.background = toHexString(color);
}
onClick();
document.addEventListener('click', onClick);
console.log('try a different initial color');
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.
Integers to Colors
function toHexString(col) {
return '#' + ('000000' + col.toString(16)).substr(-6);
}
document.body.style.background = toHexString(0x275ba1);
console.log("#275ba1 as an integer:", 0x275ba1);
console.log("#ff0000 as an integer:", 0xff0000);
Convert an integer in hex (like 0xff0000
) to a usable hex string "#ff0000"
.
Canvas ImageData
const canvas = document.body.appendChild(
document.createElement('canvas')
);
const width = 200;
canvas.width = canvas.height = width;
const c = canvas.getContext('2d');
const pixels = c.createImageData(canvas.width, canvas.height);
const size = canvas.width * canvas.height;
let index = 0, x, y;
for (var i = 0; i < size; i++){
x = i % width;
y = Math.floor(i / width);
pixels.data[index++] = x;
pixels.data[index++] = y;
pixels.data[index++] = width - x;
pixels.data[index++] = 255;
}
c.putImageData(pixels, 0, 0);
This shows how to set pixel data on an html5 canvas.
toString Hack Obfuscated
x=''+self
j=''
'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'
.split``
.map(_=>j+=`x[0x${_}]+`)
console.log(eval(j+'""'))
Yesterday’s snippet saying something else…
It’s simpler than it looks:
x=''+self
// becomes "[object Window]"
j=''
// initialize `j` which will be javascript to pass to `eval`
'd1d7a17123456...'
// this is a list of index values to
// look up in `x` in hexidecimal so that each
// index is a single character
.split``
// split the index values into an array `[0xe, 0x2 ...`
.map(_=>j+=`x[0x${_}]+`)
// map over the index values and write a string like
// this `x[0xe]+x[0x2]+...` into `j`
console.log(eval(j+'""'))
// evaluate `j` with an empty string at the end
// `x[0xe]+x[0x2]+""` and log it out
`