Consultant Designer & Developer
067 Tessellated tangrams066 Side walk on a rainy day065 144 Trapeziums064 Blank arcade063 Transmogrifying circles061 Last 30 seconds060 Overprinted discs059 Lazy polygons058 Hexmaze057 Dreaming shapes056 Connections055 Letter grid054 Koch curve053 Fizzled grid052 Lines on a 5×5 grid051 Sol Lewitt’s ‘Lines of One Inch, Four Directions, Four Colours’050 Sol Lewitt’s wall drawing 289049 Dots and lines048 Blending ratios047 Squares using pen on paper046 Tetrahedrons045 Monochromatic squares044 Fifteen silly ways to draw a line043 One way to arrange lines042 Misregistered041 Running in circles040 Dancing to the noise039 Deformed Rectangles038 x raised to y mod n037 Shapes on a QuadTree036 Wolfram’s Rules 30, 90, 110 and 184035 Dancing Lines034 Sol LeWitt’s Successive Lines033 Directional Tiles032 A Bunch of Lines031 Lorenz Attractor030 Karel Martens’s Kinetic Work029 Map of Somewhere028 Piet Mondrian027 Peaks of Shards026 Dots in Motion025 A Pack of Circles024 Squares on Markov Chain023 Moon rise022 Tensile Roof021 Arrangements020 Squares and Arcs019 Sierpiński carpet018 Squiggles II017 Squiggles016 Some Triangles015 Some Rectangles014 Joy Division013 Study in Lightness012 Truchet tiles011 Triangles010 Shapes with Shapes009 Lines #3008 Perlin Noise Halftones007 '10 PRINT' Pattern006 Wandered Dot005 Wandering Dot004 Lines #2003 Lines #1002 Circles #2001 Circles #1
062 Mugshots
function generateFace({
debug = false,
width = 150,
height = 200,
features = ["mouth", "eyes", "nose", "hair"],
fill = "hsl(0,0%,95%)",
stroke = "hsl(0,0%,5%)",
strokeWidth = 1.5,
strokeLinejoin = "round",
strokeLinecap = "round",
noseWidth = 1,
noseWobble = 0.5,
formity = 0.5,
happiness = 0,
hairStyle = "flat",
hairVariation = 0.5
} = {}) {
const aspectRatio = width / height;
const happinessUV = happiness * 0.5 + 0.5;
const verticalDivisions = 3;
const verticalDivHeight = height / verticalDivisions;
const eyelineDivisions = 5;
const eyelineY = verticalDivHeight + (verticalDivHeight * 1) / 4;
const eyeWidth = width / eyelineDivisions;
const earWidth = (eyeWidth * 2) / 5;
const earHeight = (verticalDivHeight * 2) / 4;
const mouthLine = verticalDivHeight * 2 + verticalDivHeight / 3;
const tickSize = 10;
const drawSkin = () => {
const faceWidth = width - 2 * earWidth;
const dCx = (formity * faceWidth) / 5;
return htl.svg`<g transform="translate(${earWidth},0)">
<path
d="M${faceWidth / 2},0
Q${faceWidth},0 ${faceWidth},${height / 2}
Q${faceWidth - dCx},${height} ${faceWidth / 2},${height}
Q${dCx},${height} 0,${height / 2}
Q0,0 ${faceWidth / 2},0
Z"
fill=${fill}
></path>
</g>`;
};
const drawEars = () => {
const earDebugStroke = debug ? "red" : "none";
const earDx = m.lerp(0, earWidth / 2, formity);
const d = `M${earWidth * 1.5},${eyelineY}
Q${earWidth * 1.5},${verticalDivHeight}
${earWidth / 2},${verticalDivHeight}
Q${0},${verticalDivHeight} ${0},${eyelineY}
Q${earDx},${verticalDivHeight * 2}
${earWidth * 1.75},${eyelineY + verticalDivHeight * 0.25}
Z`;
return htl.svg`<g class="ears">
<path
d=${d}
fill=${fill}
></path>
<g transform="scale(-1,1) translate(${-width},0) ">
<path
d=${d}
fill=${fill}
></path>
</g>
</g>`;
};
const drawEyes = () => {
if (!features.includes("eyes")) return;
const eyeY = eyelineY;
const eyeXFromMid = (eyeWidth * 3) / 4;
const eyeDx = m.lerp(0, eyeWidth / 5, happinessUV);
const eyeStrokeWidth = m.lerp(strokeWidth * 2, strokeWidth, happinessUV);
return htl.svg`<g class="eyes">
<line
x1=${width / 2 - eyeXFromMid - eyeDx}
y1=${eyeY}
x2=${width / 2 - eyeXFromMid + eyeDx}
y2=${eyeY}
fill="none"
stroke=${stroke}
stroke-width=${eyeStrokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></line>
<line
x1=${width / 2 + eyeXFromMid - eyeDx}
y1=${eyeY}
x2=${width / 2 + eyeXFromMid + eyeDx}
y2=${eyeY}
fill="none"
stroke=${stroke}
stroke-width=${eyeStrokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></line>
</g>`;
};
const drawNose = () => {
if (!features.includes("nose")) return;
const noseWidthDX = m.lerp(-eyeWidth, eyeWidth, noseWidth);
const noseCx = width / 2;
const noseY1 = eyelineY;
const noseY2 = 2 * verticalDivHeight;
const dy = m.lerp(0, verticalDivHeight / 5, noseWobble);
// if (Math.abs(noseWidth * 2 - 1) < 0.25) return;
return htl.svg`<g class="nose">
<path
d="M${noseCx},${noseY1}
Q ${noseCx - noseWidthDX},${noseY2 + dy} ${noseCx},${noseY2}"
r=20
fill="none"
stroke=${stroke}
stroke-width=${strokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></path>
</g>`;
};
const drawMouth = () => {
if (!features.includes("mouth")) return;
const cx = width / 2;
const mouthY = mouthLine;
const mouthDy =
happiness < 0
? m.lerp(0, -verticalDivHeight / 3, Math.abs(happiness))
: m.lerp(0, verticalDivHeight / 2, Math.abs(happiness));
const mouthDx = m.lerp(eyeWidth * 0.25, eyeWidth * 0.85, happinessUV);
return htl.svg` <path
class="mouth"
d="M${cx - mouthDx},${mouthY}
Q ${cx},${mouthY + mouthDy} ${cx + mouthDx},${mouthY}"
r=20
fill="none"
stroke=${stroke}
stroke-width=${strokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></path>`;
};
const drawHair = () => {
if (!features.includes("hair")) return;
if (hairStyle === "flat") {
const hairY = m.lerp(
verticalDivHeight * 0.25,
verticalDivHeight * 0.75,
hairVariation
);
return htl.svg`<line class="hair"
x1=${earWidth}
y1=${hairY}
x2=${width - earWidth}
y2=${hairY}
fill="none"
stroke=${stroke}
stroke-width=${strokeWidth}
></line>`;
} else if (hairStyle === "parted") {
const hairYMin = verticalDivHeight * 0.25;
const hairPartitionX = m.lerp(
earWidth * 3,
width - earWidth * 3,
hairVariation
);
return htl.svg`<path class="hair"
d="M${earWidth},${verticalDivHeight - strokeWidth / 2}
A ${hairPartitionX - earWidth}
${verticalDivHeight - hairYMin} 0 0 0 ${hairPartitionX},${hairYMin}
A ${width - earWidth - hairPartitionX}
${verticalDivHeight - hairYMin}
0 0 0 ${width - earWidth},${verticalDivHeight - strokeWidth / 2}"
fill="none"
stroke=${stroke}
stroke-width=${strokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></path>`;
} else if (hairStyle === "wavy") {
const hairYMin = m.lerp(
verticalDivHeight * 0.8,
verticalDivHeight * 0.9,
hairVariation
);
const hairYMax = verticalDivHeight * 1.25 - strokeWidth / 2;
const hairPartitionX = m.lerp(
earWidth * 1.333,
width - earWidth * 1.333,
hairVariation
);
const partions = 2 * Math.floor(m.lerp(3, 6, hairVariation));
const points = m
.linspace(partions + 1, true)
.map((u, i) => [
earWidth + u * (width - 2 * earWidth),
i % 2 === 0 ? hairYMin : hairYMax
]);
const path = d3.path();
points.forEach((p, i) => {
if (i === 0) {
path.moveTo(...p);
} else if (i % 2 !== 0) {
} else {
const cx = points[i - 1][0];
const cy = points[i - 1][1];
path.quadraticCurveTo(cx, cy, ...p);
}
});
const d = path.toString();
return htl.svg`<path class="hair"
d=${d}
fill="none"
stroke=${stroke}
stroke-width=${strokeWidth}
stroke-linejoin=${strokeLinejoin}
stroke-linecap=${strokeLinecap}
></path>`;
}
};
let debugEls;
if (debug) {
debugEls = htl.svg`<g class="debug">
<rect width=${width} height=${height} stroke="#ff0" fill="none"></rect>
${d3.range(verticalDivisions - 1).map(
(i) =>
htl.svg`<line
x1=0
y1=${(i + 1) * verticalDivHeight}
x2=${width}
y2=${(i + 1) * verticalDivHeight}
stroke="#f0f"
stroke-width=${strokeWidth}
fill="none"></rect>`
)}
<line
x1="0" y1=${eyelineY}
x2=${width} y2=${eyelineY}
stroke="#0ff"
stroke-width=${strokeWidth}
></line>
${d3.range(eyelineDivisions + 1).map(
(i) => htl.svg`<line
x1=${i * eyeWidth}
y1=${eyelineY - tickSize / 2}
x2=${i * eyeWidth}
y2=${eyelineY + tickSize / 2}
stroke="#0ff"
stroke-width=${strokeWidth}></line>`
)}
<line
x1=${eyeWidth * 1.5}
y1=${mouthLine}
x2=${width - eyeWidth * 1.5}
y2=${mouthLine}
stroke="#0ff"
stroke-width=${strokeWidth}
></line>
<path
d="M${width / 2},${eyelineY}
L${eyeWidth * 2},${2 * verticalDivHeight}
L${eyeWidth * 3},${2 * verticalDivHeight}z"
fill="none"
stroke="#0ff"
stroke-width=${strokeWidth}
></path>
</g>`;
}
return htl.svg`<g class="face">
${drawSkin()}
${drawEars()}
${drawHair()}
${drawNose()}
${drawEyes()}
${drawMouth()}
${debugEls}
</g>`;
}
sampleGrid = {
const aspectRatio = 4 / 3;
const baseWidth = 960;
const baseHeight = Math.floor(baseWidth / aspectRatio);
const grid = generateIrregularGrid({
baseWidth,
baseHeight,
freq: sampleFreq,
cells: sampleCells,
padding: sampleGridPadding
});
const { width, height, cells } = grid;
return htl.svg`<svg viewBox=${[0, 0, width, height]}>
<rect width=${width} height=${height} fill="hsl(0,0%,95%)"></rect>
${cells.map((cell) => {
const { x, y, width, height } = cell;
return htl.svg`<rect
x=${x}
y=${y}
width=${width}
height=${height}
fill="none"
stroke="black"
></rect>`;
})}
</svg>`;
}
function generateIrregularGrid({
baseGrid,
baseWidth = 640,
baseHeight = 480,
cells = 90,
random = CSRandom,
freq = 15,
amp = 0.75,
padding = 0.5
} = {}) {
const p = m.clamp01(padding);
const paddingPx = (p * Math.min(baseWidth, baseHeight)) / 50;
const grid = baseGrid ?? squaresInRectangle(baseWidth, baseHeight, cells);
const { side, rows, cols } = grid;
const gridWidth = side * cols - paddingPx;
const gridHeight = side * rows - paddingPx;
const maxDu = (side / (side * cols)) * 0.5;
let generatedCells = m.linspace(rows, true).map((v, j) => {
const heightRatio = random.noise2D(v / 10, 100, freq, amp) * 0.5 + 0.5;
return m.linspace(cols, true).map((u, i) => {
const widthRatio =
random.noise3D(u / 10, v / 10, 0, freq, amp) * 0.5 + 0.5;
return {
widthRatio,
heightRatio
};
});
});
const totalHeightRatio = d3.sum(generatedCells, (d) => d[0].heightRatio);
const totalWidthRatios = generatedCells.map((row) => {
return d3.sum(row, (d) => d.widthRatio);
});
generatedCells = generatedCells.map((row, j) => {
return row.map((c, i) => {
const width = (gridWidth * c.widthRatio) / totalWidthRatios[j];
const height = (gridHeight * c.heightRatio) / totalHeightRatio;
return {
// ...c,
width,
height
};
});
});
generatedCells = generatedCells.reduce((accRows, row, j) => {
const nextRow = row.reduce((acc, curr, i) => {
return [
...acc,
{
...curr,
x: i === 0 ? 0 : acc[i - 1].x + acc[i - 1].width,
y: j === 0 ? 0 : accRows[j - 1][i].y + accRows[j - 1][i].height
}
];
}, []);
return [...accRows, nextRow];
}, []);
generatedCells = generatedCells.flat();
generatedCells = generatedCells.map(({ x, y, width, height }) => ({
x: x + paddingPx,
y: y + paddingPx,
width: width - paddingPx,
height: height - paddingPx
}));
return {
...grid,
width: cols * side,
height: rows * side,
cells: generatedCells
};
}
function getForeground({
colors,
background,
maxAttempts = 10,
minContrastRatio = 4.5
} = {}) {
let attempts = maxAttempts;
const contrasts = colors
.map((c) => color.contrastRatio(background, c))
.map((contrast, index) => ({ contrast, index }));
const sortedContrast = contrasts
.slice()
.sort((a, b) => b.contrast - a.contrast);
if (sortedContrast[0].contrast > minContrastRatio) {
return colors[sortedContrast[0].index];
}
}
versionedUrl = {
const { url, version } = await getCurrentMetadata();
return `${url}@${version}`;
}
randomize
versionUrlWithCurrentParams = addParams(versionedUrl, {
seed: randomize,
gridPadding,
margin,
strokeWidth
})
import { blurp } from "@saneef/art-saneef-com-blurb"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.