100 35 Ways
const _100 = 100;
const count = i => {
document.body.innerHTML +=
_100.toString(i) + ` :: ... ${i}<br>`
i++ < 36 && count(i)
}
count(2)
Display 100 in many bases from binary to base 36… Today is the 100th post on Snippet Zone.
const _100 = 100;
const count = i => {
document.body.innerHTML +=
_100.toString(i) + ` :: ... ${i}<br>`
i++ < 36 && count(i)
}
count(2)
Display 100 in many bases from binary to base 36… Today is the 100th post on Snippet Zone.
// multiply math random by another math random:
const value = Math.random() * Math.random() * 10;
// This makes it less likely that `value` will be 10
// the more times you multiply, the less likely you will be to reach
// the maximum potential value
const value = Math.random() * Math.random() * Math.random() * 10;
I use this a fair amount when creating artwork with code. I’ll usually use a seeded random though for more control.
I was thinking about different icons I might use in a node based programming environment to denote this use of random and after a little futzing around created this series of histograms:
function rand(n = 1, f = 1) {
let value = 1;
for (let i = 0; i < n; i++) {
value *= Math.random();
}
// fixing the value so that it fits
// nicely as a key in the hash table
// hash = {
// 0.2: 5,
// 0.9: 8,
// etc...
// }
return value.toFixed(f);
}
function histo(n = 1, f = 2, off, iter = 1500, size = 70) {
const vals = {};
const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');
canvas.width = canvas.height = size;
canvas.style.margin = '.5em';
document.body.appendChild(canvas);
for (let i = 0; i < iter; i++) {
const randNum = off ? off - rand(n, f) : rand(n, f);
if (vals[randNum] == null) {
vals[randNum] = 1;
} else {
vals[randNum]++;
}
}
c.fillStyle = '#ccc';
c.fillRect(0, 0, size, size);
c.strokeRect(0, 0, size, size);
for (let i in vals) {
const x = parseFloat(i) * size;
c.beginPath();
c.moveTo(x, size);
c.lineTo(x, size - vals[i]);
c.stroke();
}
}
histo();
histo(2);
histo(3, 2, 1);
histo(5, 2, 1);
histo(6, 2, 0, 500);
const aOrB = /\b(a|b)\b/g;
const fn = '(b > .5) ? (max(a, 2. * (b - .5))) : (min(a, 2. * b))'
const r = fn.replace(aOrB, '$1.r');
const g = fn.replace(aOrB, '$1.g');
const b = fn.replace(aOrB, '$1.b');
console.log(r);
console.log(g);
console.log(b);
Match an a
or b
, but not when it’s part of another word.
Found myself needing this for auto-generating some shaders recently.
const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');
let targetX, targetY, startX, startY;
const rectSize = 20;
const maxStep = 10;
const matchStep = maxStep / 2;
const halfRectSize = rectSize / 2;
let matchTime = 0;
const resetTime = 20;
function randX() {
return innerWidth * 0.8 * Math.random() + innerWidth * 0.1;
}
function randY() {
return innerHeight * 0.8 * Math.random() + innerHeight * 0.1;
}
function resize() {
canvas.width = innerWidth;
canvas.height = innerHeight;
reset();
}
window.addEventListener('resize', resize);
resize();
document.body.appendChild(canvas);
document.body.style.margin = 0;
function reset() {
matchTime = 0;
targetX = randX();
targetY = randY();
startX = randX();
startY = randY();
c.fillStyle = '#ccc';
c.fillRect(0, 0, innerWidth, innerHeight);
c.fillStyle = '#c79500';
c.fillRect(
targetX - halfRectSize,
targetY - halfRectSize,
rectSize,
rectSize
);
c.fillStyle = '#4e82c7';
c.fillRect(startX - halfRectSize, startY - halfRectSize, rectSize, rectSize);
}
function loop() {
c.strokeStyle = 'black';
c.beginPath();
c.moveTo(startX, startY);
if (startX < targetX) {
startX += Math.random() * maxStep;
} else if (startX > targetX) {
startX -= Math.random() * maxStep;
}
if (startY < targetY) {
startY += Math.random() * maxStep;
} else if (startY > targetY) {
startY -= Math.random() * maxStep;
}
c.lineTo(startX, startY);
c.stroke();
if (
Math.abs(startX - targetX) < matchStep &&
Math.abs(startY - targetY) < matchStep
) {
matchTime++;
if (matchTime > resetTime) {
reset();
}
}
window.requestAnimationFrame(loop);
}
loop();
Randomly walk to a target.
function twoXmodMap(start = 0.2) {
const seed = () => Math.random() * Math.random() * start
let xn = seed()
let xn1
let iter = 0
return () => {
iter++
if (iter > 50) {
xn = seed()
iter = 0
}
// this is the key part:
xn1 = (2 * xn) % 1
xn = xn1
return xn1
}
}
const el = document.body.appendChild(document.createElement('div'))
el.innerHTML = `
<svg>
<path d="M 0 0 L 1 1" fill="none" stroke="red" />
</svg>
<style>
svg, body, html {
width: 100%;
height: 100%;
overflow: visible;
}
</style>
`
const path = el.querySelector('path')
let pathStr = ''
const map = twoXmodMap()
let x = 0
let yo = 0
let y;
function loop() {
y = map()
x += 2
if (pathStr == '' || x > 300) {
x = 10
yo += 50
pathStr += `M 10 ${yo}`
} else {
pathStr += ` L ${x} ${yo + y * 30} `
}
path.setAttribute('d', pathStr)
window.requestAnimationFrame(loop)
}
loop()
Drawing the 2x mod 1 map
.