// Bauhaus Machine: an endless generator of Bauhaus posters. Color fields, // circles, arcs, triangles and bars ease into a new composition every few // seconds. Click for a new composition. // Shape colors as [hex, weight]; `dark` and `light` fill shapes set on fields. const PALETTES = { Signal: { paper: '#ebe5d6', text: '#141414', dark: '#141414', light: '#f8f5ec', colors: [['#141414', 5], ['#f1d72c', 4]] }, Primary: { paper: '#ebe5d6', text: '#141414', dark: '#141414', light: '#f8f5ec', colors: [['#141414', 4], ['#f1d72c', 3], ['#d63a2f', 2], ['#1d4f9e', 2]] }, Night: { paper: '#121212', text: '#ece7dc', dark: '#121212', light: '#ece7dc', colors: [['#ece7dc', 4], ['#f1d72c', 4], ['#4b4b4b', 2]] }, }; const SHAPES = [['quarter', 3], ['circle', 2], ['half', 2], ['triangle', 2], ['dot', 1]]; const KEYS = ['x', 'y', 'w', 'h', 'rot', 's', 'r', 'g', 'b']; const HOLD = 3.2; // seconds a composition rests (at tempo 1) const MOVE = 1.1; // seconds each shape takes to move const STAGGER = 0.6; // spread of start times across the grid const GUTTER = 0.1; // gap between neighbouring shapes, in cells const params = { grid: 4, density: 0.45, tempo: 1, palette: 'Signal', grain: 0.35, randomize() { params.grid = floor(random(3, 7)); params.density = round(random(0.3, 0.7) * 100) / 100; params.palette = random(Object.keys(PALETTES)); for (const c of gui.controllersRecursive()) c.updateDisplay(); compose(); }, }; const layers = [[], [], []]; // fields, shapes, bars: drawn in this order let clock = 0, start = 0, issue = 0, grainFill; function setup() { createCanvas(windowWidth, windowHeight); gui.add(params, 'grid', 3, 8, 1).name('Grid').onChange(compose); gui.add(params, 'density', 0.1, 1, 0.01).name('Density').onChange(compose); gui.add(params, 'tempo', 0.25, 2.5, 0.05).name('Tempo'); gui.add(params, 'palette', Object.keys(PALETTES)).name('Palette').onChange(compose); gui.add(params, 'grain', 0, 1, 0.01).name('Grain'); gui.add(params, 'randomize').name('Randomize'); // Paper grain: one noise tile rendered once, then repeated as a pattern. const tile = createGraphics(180, 180); tile.pixelDensity(1); tile.loadPixels(); for (let i = 0; i < tile.pixels.length; i += 4) { tile.pixels[i] = tile.pixels[i + 1] = tile.pixels[i + 2] = random(255); tile.pixels[i + 3] = random(90); } tile.updatePixels(); grainFill = drawingContext.createPattern(tile.canvas, 'repeat'); compose(); } // Square cells, `grid` of them along the shorter side, between header and footer. function layout() { const base = min(width, height); const margin = base * 0.07; const band = max(34, base * 0.085); const areaW = width - 2 * margin; const areaH = height - 2 * margin - 2 * band; const cell = min(areaW, areaH) / params.grid; const cols = max(1, floor(areaW / cell + 0.001)); const rows = max(1, floor(areaH / cell + 0.001)); return { band, cell, cols, rows, x: (width - cols * cell) / 2, y: margin + band + (areaH - rows * cell) / 2 }; } function pick(list) { let r = random(list.reduce((sum, [, w]) => sum + w, 0)); for (const [value, w] of list) if ((r -= w) < 0) return value; return list[0][0]; } // A new composition as target specs in grid units: one or two color fields, a // large hero shape, a second large shape, scattered singles, and a few bars. function design(cols, rows) { const pal = PALETTES[params.palette]; const field = new Map(); const used = new Set(); const specs = []; const spec = (type, layer, x, y, w, h, hex, rot = floor(random(4)) * HALF_PI) => specs.push({ type, layer, x, y, w, h, hex, rot }); const cells = (c, r, w, h, fn) => { for (let i = 0; i < w; i++) for (let j = 0; j < h; j++) fn(`${c + i},${r + j}`); }; const isFree = (c, r, n) => { let free = c >= 0 && r >= 0 && c + n <= cols && r + n <= rows; cells(c, r, n, n, (k) => { free = free && !used.has(k); }); return free; }; // Shapes sitting on a field take the field's contrasting tone. const tone = (c, r) => { const under = field.get(`${c},${r}`); if (!under) return pick(pal.colors); const u = color(under); return 0.2126 * red(u) + 0.7152 * green(u) + 0.0722 * blue(u) < 128 ? pal.light : pal.dark; }; for (let i = 0; i < 2; i++) { const w = min(cols, floor(random(2, 6))); const h = min(rows, floor(random(1, 4))); const c = floor(random(cols - w + 1)); const r = floor(random(rows - h + 1)); const hex = pick(pal.colors); spec('block', 0, c + w / 2, r + h / 2, w, h, hex, 0); cells(c, r, w, h, (k) => field.set(k, hex)); } for (const n of [min(3, cols, rows), 2]) { for (let attempt = 0; attempt < 12; attempt++) { const c = floor(random(cols - n + 1)); const r = floor(random(rows - n + 1)); if (n < 2 || !isFree(c, r, n)) continue; spec(random(['circle', 'half', 'quarter']), 1, c + n / 2, r + n / 2, n, n, tone(c, r)); cells(c, r, n, n, (k) => used.add(k)); break; } } for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { if (!used.has(`${c},${r}`) && random() < params.density) spec(pick(SHAPES), 1, c + 0.5, r + 0.5, 1, 1, tone(c, r)); } } for (let i = floor(random(1, 3)); i > 0; i--) { const across = random() < 0.6; const span = across ? cols : rows; const len = min(span, floor(random(2, span + 1))); const along = floor(random(span - len + 1)); const at = floor(random(1, max(2, across ? rows : cols))); if (across) spec('bar', 2, along + len / 2, at, len, 0.16, pal.dark === pal.paper ? pal.light : pal.dark, 0); else spec('bar', 2, at, along + len / 2, 0.16, len, pick(pal.colors), 0); } return specs; } // Ease every actor from where it is now to the nearest target of its type; // actors left without a target shrink away and new ones grow in. The very // first composition appears in place. function compose() { const { cols, rows } = layout(); for (const a of layers.flat()) { a.from = { ...a.cur }; a.to = { ...a.cur, s: 0 }; a.free = true; } for (const target of shuffle(design(cols, rows))) { let best = null; let bestD = Infinity; for (const a of layers[target.layer]) { const d = dist(a.cur.x, a.cur.y, target.x, target.y); if (a.free && a.type === target.type && d < bestD) [best, bestD] = [a, d]; } const c = color(target.hex); const to = { x: target.x, y: target.y, w: target.w, h: target.h, rot: target.rot, s: 1, r: red(c), g: green(c), b: blue(c) }; if (!best) { best = { type: target.type, cur: { ...to, s: 0 } }; layers[target.layer].push(best); } best.free = false; best.from = { ...best.cur }; best.to = { ...to, rot: best.cur.rot + ((to.rot - best.cur.rot) % TWO_PI + TWO_PI + PI) % TWO_PI - PI }; } for (const a of layers.flat()) { a.delay = ((a.to.x + a.to.y) / (cols + rows)) * STAGGER; if (issue === 0) { a.cur = { ...a.to }; a.from = { ...a.to }; } } start = clock; issue += 1; } const ease = (p) => (p < 0.5 ? 16 * p ** 5 : 1 - (-2 * p + 2) ** 5 / 2); function drawShape(type, w, h, gap) { const d = min(w, h) - gap; const k = d / 2; if (type === 'circle') circle(0, 0, d); else if (type === 'dot') circle(0, 0, d * 0.34); else if (type === 'half') arc(0, k, d, d, PI, TWO_PI, PIE); else if (type === 'quarter') arc(-k, k, d * 2, d * 2, -HALF_PI, 0, PIE); else if (type === 'triangle') triangle(-k, -k, k, k, -k, k); else if (type === 'bar') rect(-w / 2, -h / 2, w, h); else rect((gap - w) / 2, (gap - h) / 2, w - gap, h - gap); } function label(txt, x, y, size, align, style = NORMAL) { textSize(size); textStyle(style); textAlign(align, BASELINE); text(txt, x, y); } function draw() { clock += min(deltaTime, 100) / 1000; const cycle = HOLD + MOVE + STAGGER; const tempo = max(params.tempo, 0.05); if ((clock - start) * tempo > cycle) compose(); const t = (clock - start) * tempo; const pal = PALETTES[params.palette]; const L = layout(); const [left, top] = [L.x, L.y]; const [right, bottom] = [L.x + L.cols * L.cell, L.y + L.rows * L.cell]; background(pal.paper); // Faint construction grid. stroke(pal.text); strokeWeight(0.5); drawingContext.globalAlpha = 0.12; for (let c = 0; c <= L.cols; c++) line(left + c * L.cell, top, left + c * L.cell, bottom); for (let r = 0; r <= L.rows; r++) line(left, top + r * L.cell, right, top + r * L.cell); drawingContext.globalAlpha = 1; noStroke(); for (const layer of layers) { for (const a of layer) { const p = ease(constrain((t - a.delay) / MOVE, 0, 1)); for (const key of KEYS) a.cur[key] = lerp(a.from[key], a.to[key], p); if (a.cur.s < 0.002) continue; push(); translate(left + a.cur.x * L.cell, top + a.cur.y * L.cell); rotate(a.cur.rot); scale(a.cur.s); fill(a.cur.r, a.cur.g, a.cur.b); drawShape(a.type, a.cur.w * L.cell, a.cur.h * L.cell, GUTTER * L.cell); pop(); } } // Poster typography, rules and a countdown to the next composition. const small = max(8, L.band * 0.16); textFont('sans-serif'); fill(pal.text); drawingContext.letterSpacing = '0.14em'; label('BAUHAUS MACHINE', left, top - L.band * 0.5, small * 1.6, LEFT, BOLD); label(`Nº ${String(issue).padStart(3, '0')}`, right, top - L.band * 0.5, small * 1.6, RIGHT, BOLD); for (let c = 0; c < L.cols; c++) label(String(c + 1).padStart(2, '0'), left + c * L.cell + 2, top - L.band * 0.1, small, LEFT); label(`GRID ${L.cols} × ${L.rows}`, left, bottom + L.band * 0.72, small, LEFT); label(`${params.palette.toUpperCase()} · TEMPO ${params.tempo.toFixed(2)}`, right, bottom + L.band * 0.72, small, RIGHT); drawingContext.letterSpacing = '0px'; rect(left, top - L.band * 0.36, right - left, 1); rect(left, bottom + L.band * 0.3, right - left, 1); rect(left, bottom + L.band * 0.3 - 1, (right - left) * constrain(t / cycle, 0, 1), 3); // Grain over everything, in its own canvas state so p5's cached fill is untouched. drawingContext.save(); drawingContext.globalAlpha = params.grain * 0.6; drawingContext.fillStyle = grainFill; drawingContext.fillRect(0, 0, width, height); drawingContext.restore(); } function mousePressed() { compose(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); compose(); }