32:T4db,generateGrid = () => { const vertices = CSRandom.shuffle([0, 1, 2, 3]).slice(0, 3); return grid.map((c) => { const [u, v, pu, pv] = c; const x = CSMath.lerp( margins.left + cellSize / 2, margins.left + size - cellSize / 2, u ) - cellSize / 2; const y = CSMath.lerp( margins.top + cellSize / 2, margins.top + size - cellSize / 2, v ) - cellSize / 2; const cx = CSMath.lerp(cellSize / 2, 2 * cellSize, pu); const cy = CSMath.lerp(cellSize / 2, 2 * cellSize, pv); const lines = [ svg``, svg``, svg``, svg`` ]; return svg` ${vertices.map((v) => lines[v])} `; }); }33:[] 30:{"title":"046 Tetrahedrons","cells":[{"id":0,"value":"# 046 Tetrahedrons","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof randomize = Inputs.button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof uvStroke = Inputs.range([0, 1], {\n label: \"Stroke\",\n step: 0.025\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof uvMargin = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 0.025\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"rows = 11","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"grid = CSMath.linspace(rows, true)\n .map((v, j) =>\n CSMath.linspace(rows, true).map((u, i) => {\n const pu = CSRandom.noise3D(i, j, randomize * 11, 1 / 25);\n const pv = CSRandom.noise3D(i, j, randomize * 331, 1 / 25);\n return [u, v, pu, pv];\n })\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"generateBg = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"generateDots = () => {\n const r = cellSize / 2;\n const num = CSMath.lerp(1, 5, CSRandom.value());\n\n return CSMath.linspace(num, true).map((_, i) => {\n return svg``;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"cellSize = size / rows","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"palette = ({\n bg: `hsl(0,0%,5%)`,\n fg: `hsl(0,0%,95%)`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"height = Math.floor(width * Math.SQRT2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"maxSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"margin = (uvMargin * maxSize) / 5 + stroke / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"size = maxSize - 2 * margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"margins = ({\n left: (width - size) / 2,\n top: height - size - margin\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"stroke = 0.5 + (uvStroke * maxSize) / 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"htl.html`