const metadata = { name: "Brutalist Mangle", thumbnail: "text", category: "Generative", parameters: [ { key: "paramColor", name: "Color 1", type: "colorPicker", defaultValue: 0xcbe21b }, { key: "paramColor2", name: "Color 2", type: "colorPicker", defaultValue: 0xff00b2 }, { key: "paramColor3", name: "Color 3", type: "colorPicker", defaultValue: 0x0b0b0b }, { key: "paramText", name: "Text", type: "textInput", defaultStringValue: "PLCHDLR" }, { key: "paramFont", name: "Font", type: "selectInput", source: "systemFonts", defaultStringValue: "system-ui", options: [ { value: "system-ui", label: "System" }, { value: "Arial", label: "Arial" }, { value: "Impact", label: "Impact" }, { value: "Helvetica", label: "Helvetica" }, { value: "Times New Roman", label: "Times" }, { value: "Courier New", label: "Courier" }, ], }, { key: "paramWeight", name: "Weight", type: "selectInput", defaultStringValue: "900", options: [ { value: "400", label: "Regular" }, { value: "700", label: "Bold" }, { value: "900", label: "Black" }, ], }, { key: "paramStyle", name: "Style", type: "selectInput", defaultStringValue: "fill", options: [ { value: "fill", label: "Fill" }, { value: "outline", label: "Outline" }, ], }, { key: "paramSize", name: "Size", type: "slider", minValue: 0, maxValue: 100, defaultValue: 40 }, { key: "paramStretch", name: "Stretch", type: "slider", minValue: 0, maxValue: 100, defaultValue: 55 }, { key: "paramSkew", name: "Skew", type: "slider", minValue: -100, maxValue: 100, defaultValue: -32 }, { key: "paramSpacing", name: "Spacing", type: "slider", minValue: 0, maxValue: 100, defaultValue: 20 }, { key: "paramLine", name: "Line Height", type: "slider", minValue: 0, maxValue: 100, defaultValue: 80 }, { key: "paramRepeat", name: "Repeat", type: "slider", minValue: 0, maxValue: 100, defaultValue: 0 }, { key: "paramNoise", name: "Noise", type: "slider", minValue: 0, maxValue: 100, defaultValue: 59 }, { key: "paramSlices", name: "Slices", type: "slider", minValue: 0, maxValue: 100, defaultValue: 51 }, { key: "paramMangle", name: "Mangle", type: "slider", minValue: 0, maxValue: 100, defaultValue: 70 }, { key: "paramBleed", name: "Bleed", type: "slider", minValue: 0, maxValue: 100, defaultValue: 74 }, { key: "paramGlow", name: "Glow", type: "slider", minValue: 0, maxValue: 100, defaultValue: 6 }, { key: "paramSpeed", name: "Speed", type: "slider", minValue: 0, maxValue: 100, defaultValue: 58 }, ], }; function makeBuffer(w, h) { const buffer = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(w, h) : canvas.cloneNode(false); buffer.width = w; buffer.height = h; return { canvas: buffer, ctx: buffer.getContext("2d") }; } function resizeBuffer(buffer, w, h) { if (buffer.canvas.width !== w || buffer.canvas.height !== h) { buffer.canvas.width = w; buffer.canvas.height = h; } } const layout = makeBuffer(canvas.width, canvas.height); const accent = makeBuffer(canvas.width, canvas.height); const glow = makeBuffer(canvas.width, canvas.height); const noise = makeBuffer(256, 256); function generateNoiseTexture(w, h) { resizeBuffer(noise, w, h); const imgData = noise.ctx.createImageData(w, h); const data = imgData.data; for (let i = 0; i < data.length; i += 4) { const stark = Math.random() < 0.2; const val = stark ? (Math.random() < 0.5 ? 0 : 255) : Math.floor(Math.random() * 256); data[i] = val; data[i + 1] = val; data[i + 2] = val; data[i + 3] = Math.random() < 0.25 ? 230 : Math.floor(Math.random() * 110); } noise.ctx.putImageData(imgData, 0, 0); noise.ctx.strokeStyle = "rgba(0, 0, 0, 0.5)"; noise.ctx.lineWidth = 1; for (let i = 0; i < 40; i++) { const y = Math.random() * h; const len = Math.random() * w * 0.8 + w * 0.2; const x = Math.random() * (w - len); noise.ctx.beginPath(); noise.ctx.moveTo(x, y); noise.ctx.lineTo(x + len, y + (Math.random() - 0.5) * 3); noise.ctx.stroke(); } noise.ctx.strokeStyle = "rgba(255, 255, 255, 0.4)"; for (let i = 0; i < 28; i++) { const y = Math.random() * h; const len = Math.random() * w * 0.6 + w * 0.2; const x = Math.random() * (w - len); noise.ctx.beginPath(); noise.ctx.moveTo(x, y); noise.ctx.lineTo(x + len, y); noise.ctx.stroke(); } } generateNoiseTexture(256, 256); let lastLayoutKey = ""; function drawTextToBuffer( bufferCtx, w, h, fontStr, text, color, baseSize, letterSpacing, lineHeightMult, stretchX, skewAngle, gridRepeat, outlineOnly ) { bufferCtx.clearRect(0, 0, w, h); bufferCtx.font = fontStr; bufferCtx.textBaseline = "middle"; bufferCtx.textAlign = "center"; if ("letterSpacing" in bufferCtx) { bufferCtx.letterSpacing = `${letterSpacing}px`; } const lines = String(text).split("\n"); const lineGap = baseSize * lineHeightMult; const totalSlots = Math.max(1, Math.floor(gridRepeat)); const slotHeight = h / totalSlots; for (let r = 0; r < totalSlots; r++) { const centerY = slotHeight * r + slotHeight / 2; bufferCtx.save(); bufferCtx.translate(w / 2, centerY); const skewRad = (skewAngle * Math.PI) / 180; bufferCtx.transform(stretchX, 0, Math.tan(skewRad), 1, 0, 0); for (let i = 0; i < lines.length; i++) { const yOffset = (i - (lines.length - 1) / 2) * lineGap; if (outlineOnly) { bufferCtx.strokeStyle = color; bufferCtx.lineWidth = Math.max(1.5, baseSize * 0.035); bufferCtx.strokeText(lines[i], 0, yOffset); } else { bufferCtx.fillStyle = color; bufferCtx.fillText(lines[i], 0, yOffset); } } bufferCtx.restore(); } } function renderOffscreenLayout(w, h) { resizeBuffer(layout, w, h); resizeBuffer(accent, w, h); resizeBuffer(glow, w, h); const text = controls.get("paramText", "PLCHDLR"); const family = String(controls.get("paramFont", "system-ui")); const weight = String(controls.get("paramWeight", "900")); const outlineOnly = String(controls.get("paramStyle", "fill")) === "outline"; const minDim = Math.min(w, h); const baseSize = minDim * (0.06 + (Number(controls.get("paramSize", 40)) / 100) * 0.34); const letterSpacing = -8 + (Number(controls.get("paramSpacing", 20)) / 100) * 28; const lineHeightMult = 0.6 + (Number(controls.get("paramLine", 80)) / 100) * 1.8; const stretchX = 0.5 + (Number(controls.get("paramStretch", 55)) / 100) * 4.5; const skewAngle = Number(controls.get("paramSkew", -32)); const gridRepeat = 1 + (Number(controls.get("paramRepeat", 0)) / 100) * 7; const textColor = controls.get("paramColor", "#cbe21b"); const accentColor = controls.get("paramColor2", "#ff00b2"); const fontStr = `${weight} ${Math.round(baseSize)}px "${family}", sans-serif`; drawTextToBuffer( layout.ctx, w, h, fontStr, text, textColor, baseSize, letterSpacing, lineHeightMult, stretchX, skewAngle, gridRepeat, outlineOnly ); drawTextToBuffer( accent.ctx, w, h, fontStr, text, accentColor, baseSize, letterSpacing, lineHeightMult, stretchX, skewAngle, gridRepeat, outlineOnly ); glow.ctx.clearRect(0, 0, w, h); glow.ctx.save(); glow.ctx.filter = "blur(36px)"; glow.ctx.globalAlpha = 0.85; glow.ctx.drawImage(accent.canvas, 0, 0); glow.ctx.filter = "blur(16px)"; glow.ctx.globalAlpha = 0.75; glow.ctx.drawImage(layout.canvas, 0, 0); glow.ctx.filter = "blur(14px)"; glow.ctx.globalAlpha = 0.35; glow.ctx.scale(1.6, 0.5); glow.ctx.drawImage(accent.canvas, -w * 0.15, h * 0.5); glow.ctx.restore(); glow.ctx.save(); glow.ctx.globalCompositeOperation = "multiply"; glow.ctx.globalAlpha = 0.85; glow.ctx.drawImage(noise.canvas, 0, 0, w, h); glow.ctx.restore(); glow.ctx.save(); glow.ctx.globalCompositeOperation = "overlay"; glow.ctx.globalAlpha = 0.5; glow.ctx.drawImage(noise.canvas, 0, 0, w, h); glow.ctx.restore(); } function PRNG(seed) { let s = Math.floor(seed) % 2147483647; if (s <= 0) s += 2147483646; return function () { return (s = (s * 16807) % 2147483647) / 2147483647; }; } function layoutSignature() { return [ controls.get("paramText", "PLCHDLR"), controls.get("paramFont", "system-ui"), controls.get("paramWeight", "900"), controls.get("paramStyle", "fill"), controls.get("paramSize", 40), controls.get("paramStretch", 55), controls.get("paramSkew", -32), controls.get("paramSpacing", 20), controls.get("paramLine", 80), controls.get("paramRepeat", 0), controls.get("paramColor", "#cbe21b"), controls.get("paramColor2", "#ff00b2"), canvas.width, canvas.height, ].join("|"); } function draw(timestamp) { const w = canvas.width; const h = canvas.height; if (w <= 0 || h <= 0) { requestAnimationFrame(draw); return; } const key = layoutSignature(); if (key !== lastLayoutKey) { renderOffscreenLayout(w, h); lastLayoutKey = key; } const bgColor = controls.get("paramColor3", "#0b0b0b"); const industrialNoise = Number(controls.get("paramNoise", 59)); const glitchSlices = Number(controls.get("paramSlices", 51)); const mangleIntensity = (Number(controls.get("paramMangle", 70)) / 100) * 160; const accentBleed = Number(controls.get("paramBleed", 74)); const mistyGlow = Number(controls.get("paramGlow", 6)); const jitterSpeed = Number(controls.get("paramSpeed", 58)); const accentColor = controls.get("paramColor2", "#ff00b2"); const textColor = controls.get("paramColor", "#cbe21b"); ctx.fillStyle = bgColor; ctx.fillRect(0, 0, w, h); let seed = 88888; if (jitterSpeed > 0) { const frameIndex = Math.floor(timestamp * 0.001 * (jitterSpeed * 0.35)); seed += frameIndex * 13371; } const rand = PRNG(seed); const sliceCount = Math.max(1, Math.floor(glitchSlices)); let y = 0; while (y < h) { const maxSliceH = Math.max(3, Math.floor(h / Math.max(1, sliceCount * 0.4))); const sliceH = Math.min(h - y, Math.max(2, Math.floor(rand() * maxSliceH))); const isGlitched = glitchSlices > 0 && rand() < glitchSlices / 100; let offsetX = 0; if (isGlitched && mangleIntensity > 0) { const dir = rand() < 0.5 ? -1 : 1; offsetX = dir * Math.pow(rand(), 1.8) * mangleIntensity; } const isAccentBleed = isGlitched && rand() * 100 < accentBleed; const sourceCanvas = isAccentBleed ? accent.canvas : layout.canvas; if (mistyGlow > 0) { ctx.save(); const glowFactor = mistyGlow / 100; const flicker = jitterSpeed > 0 && rand() < 0.3 ? 0.85 + rand() * 0.3 : 1; ctx.globalAlpha = Math.min(1, glowFactor * 1.25 * flicker); ctx.globalCompositeOperation = "screen"; const glowOffset = offsetX * 1.2; ctx.drawImage(glow.canvas, 0, y, w, sliceH, glowOffset, y, w, sliceH); if (mistyGlow > 60) { ctx.globalAlpha = glowFactor * 0.35 * flicker; ctx.drawImage( glow.canvas, 0, y, w, sliceH, glowOffset * 1.6 + (rand() - 0.5) * 15, y, w, sliceH ); } ctx.restore(); } if (isAccentBleed && rand() < 0.5) { const ghostOffset = offsetX + (rand() - 0.5) * 30; ctx.drawImage(accent.canvas, 0, y, w, sliceH, ghostOffset, y, w, sliceH); } ctx.drawImage(sourceCanvas, 0, y, w, sliceH, offsetX, y, w, sliceH); if (isGlitched && rand() < 0.12 && accentBleed > 5) { ctx.fillStyle = accentColor; ctx.fillRect( offsetX > 0 ? 0 : w + offsetX, y, Math.min(w, Math.abs(offsetX) + 10), Math.max(1, Math.floor(sliceH * 0.25)) ); } y += sliceH; } if (industrialNoise > 0) { ctx.save(); let noiseX = 0; let noiseY = 0; if (jitterSpeed > 0 && rand() < 0.75) { noiseX = Math.floor((rand() - 0.5) * 300); noiseY = Math.floor((rand() - 0.5) * 300); } ctx.globalAlpha = (industrialNoise / 100) * 0.7; ctx.globalCompositeOperation = "overlay"; ctx.drawImage(noise.canvas, noiseX, noiseY, w, h); ctx.globalAlpha = (industrialNoise / 100) * 0.35; ctx.globalCompositeOperation = "multiply"; ctx.drawImage(noise.canvas, -noiseX, -noiseY, w, h); ctx.restore(); } ctx.save(); ctx.strokeStyle = textColor; ctx.lineWidth = 1; ctx.globalAlpha = 0.4; ctx.strokeRect(16, 16, w - 32, h - 32); const markLen = 20; ctx.beginPath(); ctx.moveTo(8, 16); ctx.lineTo(8 + markLen, 16); ctx.moveTo(16, 8); ctx.lineTo(16, 8 + markLen); ctx.moveTo(w - 8, 16); ctx.lineTo(w - 8 - markLen, 16); ctx.moveTo(w - 16, 8); ctx.lineTo(w - 16, 8 + markLen); ctx.moveTo(8, h - 16); ctx.lineTo(8 + markLen, h - 16); ctx.moveTo(16, h - 8); ctx.lineTo(16, h - 8 - markLen); ctx.moveTo(w - 8, h - 16); ctx.lineTo(w - 8 - markLen, h - 16); ctx.moveTo(w - 16, h - 8); ctx.lineTo(w - 16, h - 8 - markLen); ctx.stroke(); ctx.restore(); requestAnimationFrame(draw); } requestAnimationFrame(draw);