feat: add rule30 automaton

Author: bolinocroustibat

1d/rule30/rule30.ts

@@ -0,0 +1,50 @@
+import type { RGB } from "../../types/RGB"
+import { Automaton1D } from "../automaton1d"
+
+export class Rule30 extends Automaton1D {
+	constructor(
+		canvasEl: HTMLCanvasElement,
+		width: number,
+		height: number,
+		paletteColors?: RGB[],
+	) {
+		// Rule 30 always uses 2 colors (binary states)
+		super(canvasEl, width, height, 2, paletteColors)
+	}
+
+	protected setRandomState = (): void => {
+		// Instead of random state, start with a single black cell in the middle
+		if (!this.state) this.state = []
+		for (let x = 0; x < this.width; x++) {
+			this.state[x] = this.colors[0] // white
+		}
+		// Place single black cell in the middle
+		this.state[Math.floor(this.width / 2)] = this.colors[1] // black
+	}
+
+	protected update = (line: number): void => {
+		const newState = []
+		for (let x = 0; x < this.width; x++) {
+			// Get the three cells above (previous line)
+			const left = this.getCellColor(x - 1)
+			const center = this.getCellColor(x)
+			const right = this.getCellColor(x + 1)
+
+			// Convert to binary pattern (0 = white, 1 = black)
+			const pattern =
+				(left.id === 1 ? 4 : 0) +
+				(center.id === 1 ? 2 : 0) +
+				(right.id === 1 ? 1 : 0)
+
+			// Apply Rule 30:
+			// 111 -> 0    011 -> 0    101 -> 0    001 -> 1
+			// 110 -> 0    010 -> 1    100 -> 1    000 -> 0
+			const newStateId = [0, 1, 1, 1, 1, 0, 0, 0][pattern]
+			newState[x] = this.colors[newStateId]
+
+			// Render directly to the canvas
+			this.fillPixel(this.state[x].colorRgb, x, line)
+		}
+		this.state = newState
+	}
+}

main.ts

@@ -1,6 +1,7 @@
 import * as Sentry from "@sentry/browser"
 import { Pane } from "tweakpane"
 import { CCA1D } from "./1d/cca_1d/cca_1d"
+import { Rule30 } from "./1d/rule30/rule30"
 import { CCA2D } from "./2d/cca_2d/cca_2d"
 import { ConwayAutomaton } from "./2d/conway/conway"
 import { gosperGliderGunPattern } from "./2d/conway/patterns/guns"
@@ -59,6 +60,7 @@ window.onload = () => {
 			"quadlife",
 			"langton",
 			"entropy",
+			"rule30",
 		]
 		return validAlgos.includes(path) ? path : "cca-2D"
 	}
@@ -72,6 +74,7 @@ window.onload = () => {
 		label: "Algorithm",
 		options: {
 			"1 dimension Cyclic Cellular Automaton": "cca-1D",
+			"Elementary Cellular Automaton Rule 30": "rule30",
 			"2 dimensions Cyclic Cellular Automaton": "cca-2D",
 			"3 dimensions Cyclic Cellular Automaton": "cca-3D",
 			"Conway's game of Life": "conway",
@@ -261,6 +264,11 @@ window.onload = () => {
 		resolutionBlade.hidden = false
 	}
 
+	const setRule30Blades = () => {
+		for (const blade of blades) blade.hidden = true
+		paletteSelector.hidden = false
+	}
+
 	setCca2dBlades()
 	void reset()
 
@@ -273,6 +281,9 @@ window.onload = () => {
 			case "cca-1D":
 				setCca1dBlades()
 				break
+			case "rule30":
+				setRule30Blades()
+				break
 			case "cca-2D":
 				setCca2dBlades()
 				break
@@ -349,6 +360,9 @@ window.onload = () => {
 			case "cca-1D":
 				automaton.start(10)
 				break
+			case "rule30":
+				automaton.start(10)
+				break
 			case "cca-2D":
 				automaton.start(25, 2500)
 				break
@@ -425,6 +439,8 @@ const createAutomaton = async (
 					settings.cca1dColorsCount || 4,
 					paletteColors,
 				)
+			case "rule30":
+				return new Rule30(canvasEl, width, height, paletteColors)
 			case "cca-2D":
 				return new CCA2D(
 					settings.cca2dThreshold,