31:T72b,{ // Define the scene. const scene = new THREE.Scene(); scene.background = new THREE.Color(0x444488); // Define the camera. const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 2500); // Define lights. const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(10, 10, 10); scene.add(dirLight); scene.add(new THREE.AmbientLight(0xc1c1c1, 1)); const pointLight = new THREE.PointLight(0xffffff, 2, 0, 0); pointLight.position.set(10, 60, 20); scene.add(pointLight); // Define the geometry. const geometry = new THREE.BoxGeometry(0.9, 0.9, 0.9); // Define the graidentMap. const size = 24; const colors = new Uint8Array(size); for (let i = 0; i < size; i++) colors[i] = (i / (size - 1)) * 255; const gradientMap = new THREE.DataTexture(colors, size, 1, THREE.RedFormat); gradientMap.needsUpdate = true; // Add stacked cells into a group. const group = new THREE.Group(); group.position.set(-centerX, -centerY, -centerZ); scene.add(group); for (let [i, j, z, c] of data) { const material = new THREE.MeshToonMaterial({ color: c, gradientMap }); const cube = new THREE.Mesh(geometry, material); cube.position.x = i; cube.position.z = j; cube.position.y = z; group.add(cube); } // Define the render with outline effects. const renderer = new THREE.WebGLRenderer(); const effect = new THREE.OutlineEffect(renderer); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); camera.position.set(raduis, raduis, raduis); const controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); while (true) { effect.render(scene, camera); yield withName(renderer.domElement, `${select}: ${n}/${N}`); } }32:T54c,function* evolve({ dimensions, data, rule, max = 1000 }) { const xy = (d) => [x(d), y(d)]; const x = (k) => k >> 16; const y = (k) => (k << 16) >> 16; const key = (x, y) => (x << 16) | (y & 0xffff); const hash = (set) => [...set].reduce((acc, k) => (acc * 1315423911) ^ k, 0); const [row, col] = dimensions; const seen = new Set(); const survive = new Set(rule.survive); const born = new Set(rule.born); const oy = (row / 2) | 0; const ox = (col / 2) | 0; let alive = new Set( data .map((d, i) => [d, i]) .filter(([d]) => d) .map(([, i]) => key((i % col) - ox, ((i / col) | 0) - oy)) ); let k = 0; let id; while (alive.size > 0 && !seen.has((id = hash(alive))) && k++ < max) { seen.add(id); yield Array.from(alive, xy); const [x0, x1] = d3.extent(alive, x); const [y0, y1] = d3.extent(alive, y); const next = new Set(); for (let i = x0 - 1; i <= x1 + 1; i++) { for (let j = y0 - 1; j <= y1 + 1; j++) { let sum = 0; for (let m = -1; m < 2; m++) { for (let n = -1; n < 2; n++) { if (m === n && m === 0) continue; sum += +alive.has(key(i + m, j + n)); } } const v = alive.has(key(i, j)) ? survive.has(sum) : born.has(sum); if (v) next.add(key(i, j)); } } alive = next; } }33:T16a3,// https://github.com/pearmini/swings-of-life/tree/main/public/data rules = [ { dimensions: [3, 3], data: [1, 1, 1, 0, 1, 0, 0, 0, 0], rule: { born: [3], survive: [2, 3] }, name: "T-tetromino" }, { dimensions: [3, 3], data: [0, 1, 0, 0, 0, 1, 1, 1, 1], rule: { born: [3], survive: [2, 3] }, name: "Glider" }, { dimensions: [4, 4], data: [0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0], rule: { born: [3], survive: [2, 3] }, name: "Clock" }, { dimensions: [4, 4], data: [0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0], rule: { born: [3], survive: [2, 3] }, name: "Toad" }, { dimensions: [5, 5], data: [ 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Thunderbird" }, { dimensions: [3, 3], data: [1, 1, 1, 1, 0, 1, 1, 0, 1], rule: { born: [3], survive: [2, 3] }, name: "Pi-heptomino" }, { dimensions: [4, 4], data: [0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0], rule: { born: [3], survive: [2, 3] }, name: "Bun" }, { dimensions: [4, 4], data: [1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1], rule: { born: [3], survive: [2, 3] }, name: "Butterfly" }, { dimensions: [5, 5], data: [ 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Bipole" }, { dimensions: [4, 4], data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1], rule: { born: [3], survive: [2, 3] }, name: "Cap" }, { dimensions: [5, 5], data: [ 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Gliders by the Dozen" }, { dimensions: [5, 5], data: [ 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Lightweight Spaceship" }, { dimensions: [5, 5], data: [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "House" }, { dimensions: [6, 6], data: [ 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1 ], rule: { born: [3], survive: [2, 3] }, name: "Figure Eight" }, { dimensions: [8, 8], data: [ 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Octagon" }, { dimensions: [8, 8], data: [ 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Unix" }, { dimensions: [9, 9], data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Tumbler" }, { dimensions: [13, 13], data: [ 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Dinner Table" }, { dimensions: [16, 16], data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Worker Bee" }, { dimensions: [13, 13], data: [ 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0 ], rule: { born: [3], survive: [2, 3] }, name: "Pulsar" } ]34:[] 2f:{"title":"Genuary 26 / 9 - Cellular Artchitecture","cells":[{"id":0,"value":"# Genuary 26 / 9 - Cellular Artchitecture\n## Crazy automaton. Cellular automata with crazy rules.\n\nNo crazy rules this time — instead, I stacked each iteration of a classic 2D cellular automaton in 3D space. Let’s watch a strange kind of “artchitecture” grow 🧱✨\n\nIt's based on my previous project [Swings of Life](https://github.com/pearmini/swings-of-life\n). Also a fun exploration of [toon-style materials](https://threejs.org/examples/#webgl_materials_toon) in [Three.js](https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_toon.html).","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"viewof select = Inputs.select(\n rules.map((d) => d.name),\n { label: \"Lexicon\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"selectRule = rules.find((d) => d.name === select)","pinned":true,"hidden":false,"mode":"ojs"},{"id":828,"value":"allStates = Array.from(evolve(selectRule))","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"N = allStates.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"states = allStates.slice(0, N < 300 ? 300 : 200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"n = states.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"scheme = d3.interpolateTurbo","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"color = (z) => scheme(1 - z / (n - 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"data = [...states]\n .reverse()\n .flatMap((cells, z) => cells.map(([x, y]) => [x, y, z, color(z)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"cells = states.flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"X = d3.extent(cells, (d) => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"Z = d3.extent(cells, (d) => d[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"extentX = X[1] - X[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"extentZ = Z[1] - Z[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"centerX = (X[0] + X[1]) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"centerZ = (Z[0] + Z[1]) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"centerY = n / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"raduis = Math.sqrt(extentX ** 2 + n ** 2 + extentZ ** 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"width = 1152","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"function withName(dom, text) {\n return html`\n

\n        ${text}\n      

\n ${dom}\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"THREE = ({\n ...(await import(\"three\")),\n ...(await import(\"three/examples/jsm/effects/OutlineEffect.js\")),\n ...(await import(\"three/examples/jsm/controls/OrbitControls.js\"))\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}