Mutate/Randomize rules added fixed CSS

README.md

@@ -1,5 +1,6 @@
 ![Langton's ant originally on a 30720x17280 grid (resized to 4320x4320) with the LRRRRRLLR pattern after 1292334158 iterations](ASSETS/LRRRRRLLR_30720x17280_1292334158_RESIZED_512x512.png)
 
+
 This repository contains a C++ and web implementation of the [Langton's ant](https://wikipedia.org/wiki/Langton's_ant) universal Turing machine.
 
 The web version can be found [here](https://rafa-br34.github.io/LangtonsAnt)

WEBSITE/Scripts/Main.js

@@ -166,7 +166,11 @@ async function Main() {
 		let Ant_Position = { X: $("#Ant_PositionX"), Y: $("#Ant_PositionY") }
 		let Ant_Direction = { X: $("#Ant_DirectionX"), Y: $("#Ant_DirectionY") }
 		let Ant_StepSize = $("#Ant_StepSize")
+
 		let Ant_Rules = $("#Ant_Rules")
+		let Ant_Rules_Mutate = $("#Ant_Rules_Mutate")
+		let Ant_Rules_Randomize = $("#Ant_Rules_Randomize")
+
 		let Ant_Wrap = $("#Ant_Wrap")
 		let Ant_Enabled = $("#Ant_Enabled")
 
@@ -229,7 +233,6 @@ async function Main() {
 			SimulationObject.Reset()
 		})
 
-
 		Ant_Rules.on("change", () => {
 			if (!Selected) { return }
 
@@ -247,6 +250,28 @@ async function Main() {
 			SimulationObject.Reset()
 			UpdateOptions()
 		})
+
+		Ant_Rules_Mutate.on("click", () => {
+			if (!Selected) { return }
+
+			let States = Object.values(c_DirectionEnum)
+			let StateMachine = AntObject.StateMachine
+
+			StateMachine[Math.floor(Math.random() * StateMachine.length)] = States[Math.floor(Math.random() * States.length)]
+			SimulationObject.Reset()
+			UpdateOptions()
+		})
+
+		Ant_Rules_Randomize.on("click", () => {
+			if (!Selected) { return }
+
+			let States = Object.values(c_DirectionEnum)
+
+			AntObject.StateMachine = Array.from({length: (Math.random() * 10) + 4}, () => States[Math.floor(Math.random() * States.length)])
+
+			SimulationObject.Reset()
+			UpdateOptions()
+		})
 
 		let AntList = $("#AntList")
 		let CreateAnt = $("#CreateAnt")
@@ -290,7 +315,7 @@ async function Main() {
 			let NewAnt = new Ant(
 				GridSize.X / 2, GridSize.Y / 2,
 				0, -1,
-				Array.from({length: (Math.random() * 22) + 6}, () => States[Math.floor(Math.random() * States.length)])
+				Array.from({length: (Math.random() * 10) + 4}, () => States[Math.floor(Math.random() * States.length)])
 			)
 
 			AddAnt(NewAnt, !Selected)

WEBSITE/Styles/Main.css

@@ -48,8 +48,8 @@ input[type="checkbox"] {
 
 	&::before {
 		content: "";
-		width: 1rem;
-		height: 1rem;
+		width: 19px;
+		height: 19px;
 		transform: scale(0);
 		background-color: var(--Text);
 	}

WEBSITE/index.html

@@ -154,8 +154,8 @@
 				<div class="Entry">
 					<div class="Name">Direction: </div>
 					<span class="Value">
-						<input id="Ant_DirectionX" type="number" min="-1" step="1" max="1" value="0" style="width: 10%;">
-						<input id="Ant_DirectionY" type="number" min="-1" step="1" max="1" value="1" style="width: 10%;">
+						<input id="Ant_DirectionX" type="number" min="-1" step="1" max="1" value="0" style="width: 50%;">
+						<input id="Ant_DirectionY" type="number" min="-1" step="1" max="1" value="1" style="width: 50%;">
 					</span>
 				</div>
 				<div class="Entry">
@@ -168,6 +168,8 @@
 					<div class="Name">Rules: </div>
 					<span class="Value">
 						<input id="Ant_Rules" type="text" value="RL" style="background-color: rgba(0, 255, 0, 0.2);" style="width: 100%;">
+						<button id="Ant_Rules_Mutate" style="width: 21px;">M</button>
+						<button id="Ant_Rules_Randomize" style="width: 21px;">R</button>
 					</span>
 				</div>
 				<div class="Entry">