9to5 background generator
by PhilQ
HTML
<button id="generate">Generate</button>
<br />
<canvas width="300" height="300"></canvas>
SCSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
JavaScript
// PRNG from https://stackoverflow.com/a/47593316/2142071
function cyrb128(str) {
let h1 = 1779033703, h2 = 3144134277,
h3 = 1013904242, h4 = 2773480762;
for (let i = 0, k; i < str.length; i++) {
k = str.charCodeAt(i);
h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
}
h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
return [h1>>>0, h2>>>0, h3>>>0, h4>>>0];
}
function sfc32(a, b, c, d) {
return function() {
a |= 0; b |= 0; c |= 0; d |= 0;
let t = (a + b | 0) + d | 0;
d = d + 1 | 0;
a = b ^ b >>> 9;
b = c + (c << 3) | 0;
c = (c << 21 | c >>> 11);
c = c + t | 0;
return (t >>> 0) / 4294967296;
}
}
// Create seed
const seed = cyrb128("apples");
// -- OR: random seed --
// const seedgen = () => (Math.random()*2**32)>>>0;
// const rand = sfc32(seedgen(), seedgen(), seedgen(), seedgen());
// Create PRNG with seed
const rand = sfc32(seed[0], seed[1], seed[2], seed[3]);
// ---------
let cnv = false, ctx, width, height;
function blankCanvas(color = '#fff') {
if ( ! cnv ) {
cnv = document.querySelector('canvas');
ctx = cnv.getContext('2d');
}
cnv.width = width;
cnv.height = height;
ctx.fillStyle = color;
ctx.fillRect(0, 0, width, height);
}
function placeCircles(amount = 1, color = '#000000', blur = 0, min_r = 5, max_r = 50, square = false) {
ctx.filter = `blur(${blur}px)`;
ctx.fillStyle = color;
for (let i = 0; i < amount; i++) {
let rx = min_r + rand() * (max_r - min_r);
let ry = square ? rx : min_r + rand() * (max_r - min_r);
let rotation = rand() * 2 * Math.PI;
ctx.beginPath();
ctx.ellipse(
rand() * width,
rand() *...