Wise Fool.
Visioneer.
Public
Edited
May 16, 2024
bz(DOM.context2d(W, W))
bz = (context) => {
// https://gist.github.com/bellbind/c805785a0c67cc5c108b17fc68f8a214
render(context, channels);
loop(context, channels);
return context.canvas;
}
function loop(context, channels) {
render(context, channels);
requestAnimationFrame(_ => loop(context, next(channels)({alpha, beta, gamma})));
}
channels = ({
A: randoms(w),
B: randoms(w),
C: randoms(w),
})
randoms = (w) => Array.from({length: w * w}, Math.random)
next = ({A, B, C}) => ({alpha, beta, gamma}) => {
// 3 channels as rock-papper-scissors relations
// - one of other channels as food, another as poison, each other
const F = [...zip(A.map(convF), B.map(convF), C.map(convF))];
return {
A: F.map(([a, b, c]) => clamp(a * (1 + alpha * b - gamma * c), 0, 1)),
B: F.map(([a, b, c]) => clamp(b * (1 + beta * c - alpha * a), 0, 1)),
C: F.map(([a, b, c]) => clamp(c * (1 + gamma * a - beta * b), 0, 1)),
};
}
a = ([a, b, c]) => f(a,b,c, alpha, gamma)
b = ([a, b, c]) => f(b,c, a, beta, alpha)
c = ([a, b, c]) => f(b,c,a, gamma, beta)
f = (a,b,c, f, g) => clamp(a * (1 + f * b - g * c), 0, 1)
// idea logbook
when = ({
sparked: new Date("2024-05-14"), // when did the idead spark with me?
initial: new Date("2024-05-16"), // when did I first implement it?
})
colors = d3.schemeCategory10
W = w * s
w = 640 / 4
s = 1
nr = 2
F = [
...zip(
channels.A.map(convF),
channels.B.map(convF),
channels.B.map(convF),
)
]
// zap
// (
[
channels.A.map(convF),
channels.B.map(convF),
channels.B.map(convF),
] // )
({
A: F.map(([a, b, c]) => clamp(a * (1 + alpha * b - gamma * c), 0, 1)),
B: F.map(([a, b, c]) => clamp(b * (1 + beta * c - alpha * a), 0, 1)),
C: F.map(([a, b, c]) => clamp(c * (1 + gamma * a - beta * b), 0, 1)),
})
function* zip(...iterables) {
const itors = iterables.map(iterable => iterable[Symbol.iterator]());
for (
let curs = itors.map(itor => itor.next());
!curs.some(c => c.done);
curs = itors.map(itor => itor.next())
)
yield curs.map(c => c.value);
}
function zap(...iterables) {
const itors = iterables.map(iterable => iterable[Symbol.iterator]());
for (
let curs = itors.map(itor => itor.next());
!curs.some(c => c.done);
curs = itors.map(itor => itor.next())
)
return curs.map(c => c.value);
}
get = (cells, x, y) => cells[clamp(y, 0, w - 1) * w + clamp(x, 0, w - 1)]
conv = (f) => (v, i, cells) => {
const x = i % w, y = i / w | 0;
return f.reduce((s, c) => s + c.f * get(cells, x + c.x, y + c.y), 0);
}
force = (r) => {
const w = 2 * r + 1;
const conv = [...Array(w * w)]
.map(
(_, i) => {
const x = i % w - r, y = (i / w | 0) - r;
// f: square distance between cell centers as a force effect
const f = Math.max((r + 1 / 2) - Math.hypot(x, y), 0) ** 2;
return {x, y, f};
})
.filter(({f}) => f > 0);
const total = conv.reduce((s, {f}) => s + f, 0);
return conv.map(({x, y, f}) => ({x, y, f: f / total}));
}
convF = conv(force(nr));
render = (c2d, {A, B, C}) => {
c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);
for (const [[a, b, c], i] of enumerate(zip(A, B, C))) {
const x = i % w, y = i / w | 0;
c2d.fillStyle = colors[argmax([a, b, c])];
c2d.fillRect(x * s, y * s, s, s);
}
}
clamp = (v, min, max) => Math.min(Math.max(min, v), max)
argmax = (a) => a.reduce((r, v, i) => v > r.v ? {v, i} : r, {v: a[0], i: 0}).i
function* enumerate(iterable) {
const itor = iterable[Symbol.iterator]();
for (let i = 0, c = itor.next(); !c.done;
i++, c = itor.next()) yield [c.value, i];
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
