I work on explorable explanations, gamedev tutorials, and gamedev tools.
Published
Edited
Jan 31, 2021
1 star
svg`<svg viewBox="0 0 100 100" style="max-width: 600px">${colors}</svg>`
N = 25
colors = {
let svg = ``;
for (let x = 0; x < N; x++) {
for (let y = 0; y < N; y++) {
let haircolor = color(x/N, y/N);
svg += `<rect x="${x/N*100}" y="${y/N*100}" width="${100/N+0.5}" height="${100/N+0.5}" fill="rgb(${haircolor.toString()})"/>`;
}
}
return svg;
}
function color(x, y) {
const white = [255, 255, 255];
const eumelanin = [35, 18, 11];
const pheomelanin = [218, 104, 15];
let e = lerp(white, eumelanin, x);
let p = lerp(white, pheomelanin, y);
/* this blending seems … weird? why separate per channel?? */
return [e[0] * p[0] / 255 | 0, e[1] * p[1] / 255 | 0, e[2] * p[2] / 255 | 0];
}
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.
