Simple Way to Validate CSS Colors
function isColor(col) { const cache = isColor[col]
if (cache != null) { console.log('- reading cache') return cache
}
isColor.el.style = ''
isColor.el.style.color = col
return isColor[col] = !!isColor.el.style.color
}
isColor.el = document.createElement('div')
console.log('is "red" a color?', isColor('red'))console.log('from the cache: ', isColor('red'))
console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
console.log('is "#0f0" a color?', isColor('#0f0'))
console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?', isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
console.log('is "snippetZone" ?', isColor('snippetZone'))
I find this technique is usually good enough to validate colors…
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.
