[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67aa997794d481919cebfc5d4102d345","versionInt","title","Machine Based Life Simulator","type","code/react","content","import React, { useEffect, useState, useRef } from 'react';\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion } from \"framer-motion\";\n\n// Machine-Based Life Simulator\n// This simulator illustrates the machine-based theory of life: each digital 'organism' is treated\n// as a self-sustaining machine that processes energy, matter, and information. They replicate\n// and mutate, compete for resources, and evolve over time.\n\n\n// TYPES & INTERFACES\n// Organism data structure\n// - x, y: organism's position on the grid\n// - energy: current energy level\n// - age: how many cycles it has survived\n// - genome: simple representation of 'genetic' info\n// - color: used for visual representation\n// - id: unique identifier\n\n// Grid cell data structure\n// - resource: the amount of resource available in that cell\n\n// MAIN COMPONENT\nexport default function MachineBasedLifeSimulator() {\n // CONFIGURABLE SIMULATION PARAMETERS\n const [gridSize, setGridSize] = useState(20);\n const [resources, setResources] = useState([]); // environment resource matrix\n\n const [organisms, setOrganisms] = useState([]);\n\n // Simulation parameters\n const [isRunning, setIsRunning] = useState(false);\n const [tickInterval, setTickInterval] = useState(500); // ms per simulation step\n\n // Environment controls\n const [resourceRegenRate, setResourceRegenRate] = useState(1);\n\n // Organism controls\n const [initialOrganismCount, setInitialOrganismCount] = useState(5);\n const [reproductionEnergyThreshold, setReproductionEnergyThreshold] = useState(20);\n const [energyGainPerResource, setEnergyGainPerResource] = useState(5);\n const [mutationRate, setMutationRate] = useState(0.1); // 10% chance to mutate\n const [movementCost, setMovementCost] = useState(1);\n const [idleCost, setIdleCost] = useState(0.5);\n\n // REF FOR INTERVAL\n const intervalRef = useRef(null);\n\n // INITIALIZE ENVIRONMENT & ORGANISMS ONCE\n useEffect(() => {\n resetSimulation();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // SIMULATION TICK\n const simulationStep = () => {\n setOrganisms((prevOrgs) => {\n let newOrgs = JSON.parse(JSON.stringify(prevOrgs));\n\n // 1. Update each organism\n for (let i = 0; i < newOrgs.length; i++) {\n const org = newOrgs[i];\n // Age increment\n org.age += 1;\n // Move the organism randomly (cost energy)\n const direction = Math.floor(Math.random() * 4);\n let newX = org.x;\n let newY = org.y;\n switch (direction) {\n case 0:\n newX = Math.max(0, org.x - 1);\n break;\n case 1:\n newX = Math.min(gridSize - 1, org.x + 1);\n break;\n case 2:\n newY = Math.max(0, org.y - 1);\n break;\n case 3:\n newY = Math.min(gridSize - 1, org.y + 1);\n break;\n default:\n break;\n }\n // Only move if new cell is different\n if (newX !== org.x || newY !== org.y) {\n org.x = newX;\n org.y = newY;\n // Deduct movement cost\n org.energy -= movementCost;\n } else {\n // Idle cost\n org.energy -= idleCost;\n }\n }\n\n // 2. Organisms gather resources where they land\n setResources((prevResources) => {\n let updatedResources = JSON.parse(JSON.stringify(prevResources));\n\n newOrgs.forEach((org) => {\n if (updatedResources[org.y] && updatedResources[org.y][org.x]) {\n // The organism consumes resource\n const cellResource = updatedResources[org.y][org.x];\n // Convert resource to energy\n const energyGained = Math.min(cellResource, energyGainPerResource);\n org.energy += energyGained;\n // Deplete the cell resource\n updatedResources[org.y][org.x] = Math.max(0, cellResource - energyGained);\n }\n });\n return updatedResources;\n });\n\n // 3. Reproduction: if energy >= threshold, replicate\n let offspring = [];\n for (let i = 0; i < newOrgs.length; i++) {\n let org = newOrgs[i];\n if (org.energy >= reproductionEnergyThreshold) {\n // Create offspring\n let child = JSON.parse(JSON.stringify(org));\n child.id = Math.random();\n child.age = 0;\n child.energy = org.energy / 2; // share energy\n org.energy = org.energy / 2;\n\n // Mutation chance\n if (Math.random() < mutationRate) {\n // We'll mutate the genome by flipping one random character or changing color\n child.genome = mutateGenome(child.genome);\n // Also change color slightly\n child.color = mutateColor(child.color);\n }\n offspring.push(child);\n }\n }\n newOrgs = newOrgs.concat(offspring);\n\n // 4. Remove dead organisms (energy <= 0)\n newOrgs = newOrgs.filter((org) => org.energy > 0);\n\n return newOrgs;\n });\n\n // 5. Regenerate resources in environment\n setResources((prevResources) => {\n let updatedResources = JSON.parse(JSON.stringify(prevResources));\n for (let y = 0; y < gridSize; y++) {\n for (let x = 0; x < gridSize; x++) {\n updatedResources[y][x] += resourceRegenRate;\n }\n }\n return updatedResources;\n });\n };\n\n // START / PAUSE / RESET\n const startSimulation = () => {\n if (!isRunning) {\n setIsRunning(true);\n intervalRef.current = setInterval(simulationStep, tickInterval);\n }\n };\n\n const pauseSimulation = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n setIsRunning(false);\n };\n\n const resetSimulation = () => {\n pauseSimulation();\n // Initialize resources\n let newResources = [];\n for (let y = 0; y < gridSize; y++) {\n let row = [];\n for (let x = 0; x < gridSize; x++) {\n row.push(10); // initial resource level\n }\n newResources.push(row);\n }\n setResources(newResources);\n\n // Initialize organisms\n let newOrgs = [];\n for (let i = 0; i < initialOrganismCount; i++) {\n newOrgs.push({\n id: Math.random(),\n x: Math.floor(Math.random() * gridSize),\n y: Math.floor(Math.random() * gridSize),\n energy: 10,\n age: 0,\n genome: randomGenome(5), // random string of length 5\n color: randomColor(),\n });\n }\n setOrganisms(newOrgs);\n };\n\n // HANDLE TICK INTERVAL CHANGES\n useEffect(() => {\n if (isRunning) {\n pauseSimulation();\n startSimulation();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tickInterval]);\n\n // UTILITY FUNCTIONS\n\n // Random genome generator\n function randomGenome(length) {\n const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n let result = \"\";\n for (let i = 0; i < length; i++) {\n result += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return result;\n }\n\n // Simple mutation: flip a random character to another random character\n function mutateGenome(genome) {\n if (!genome || genome.length === 0) return genome;\n let index = Math.floor(Math.random() * genome.length);\n const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n let newChar = chars.charAt(Math.floor(Math.random() * chars.length));\n let newGenome = genome.substring(0, index) + newChar + genome.substring(index + 1);\n return newGenome;\n }\n\n // Random color generator\n function randomColor() {\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n return `rgb(${r}, ${g}, ${b})`;\n }\n\n // Slight color mutation\n function mutateColor(color) {\n // Extract numeric values from rgb\n const regex = /rgb\$(\\d+), (\\d+), (\\d+)\$/;\n const match = color.match(regex);\n if (!match) return randomColor();\n let [_, r, g, b] = match;\n r = parseInt(r);\n g = parseInt(g);\n b = parseInt(b);\n\n // mutate by up to +/- 30\n r = Math.max(0, Math.min(255, r + Math.floor(Math.random() * 61) - 30));\n g = Math.max(0, Math.min(255, g + Math.floor(Math.random() * 61) - 30));\n b = Math.max(0, Math.min(255, b + Math.floor(Math.random() * 61) - 30));\n return `rgb(${r}, ${g}, ${b})`;\n }\n\n // RENDER\n return (\n

Machine-Based Life Simulator

\n This simulator demonstrates the machine-based theory of life:\n organisms are modeled as machines that consume resources and\n convert them into self-sustaining processes (energy, replication,\n and adaptation). Watch as digital machines compete, mutate, and\n evolve over time.\n

\n\n {/* CONTROL PANEL */}\n \n \n

\n Grid Size: {gridSize}\n setGridSize(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Initial Organisms: {initialOrganismCount}\n setInitialOrganismCount(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Tick Interval (ms): {tickInterval}\n setTickInterval(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Resource Regen Rate: {resourceRegenRate}\n setResourceRegenRate(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n Mutation Rate: {mutationRate.toFixed(2)}\n setMutationRate(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n Reproduction Threshold: {reproductionEnergyThreshold}\n setReproductionEnergyThreshold(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n Energy Gain per Resource: {energyGainPerResource}\n setEnergyGainPerResource(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Movement Cost: {movementCost}\n setMovementCost(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n Idle Cost: {idleCost}\n setIdleCost(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n \n \n \n \n \n \n \n\n {/* ENVIRONMENT RENDERING */}\n

\n \n {resources.map((row, y) =>\n row.map((cellResource, x) => {\n const resourceColorValue = Math.min(255, cellResource * 2);\n const bgColor = `rgba(0, ${resourceColorValue}, 0, 0.4)`;\n return (\n

\n );\n })\n )}\n {organisms.map((org) => {\n // We'll absolutely position the organism on top of the grid cell\n const index = org.id;\n const left = org.x * 20;\n const top = org.y * 20;\n return (\n \n );\n })}\n

\n \n\n {/* SHORT EXPLANATION */}\n \n \n

How it Works

\n Organism Representation: Each circle on the grid is a digital machine\n with state variables (energy, genome, etc.).\n
\n Energy Flow: Green cells represent resources that organisms consume to\n gain energy. Energy enables reproduction and movement.\n
\n Interaction & Evolution: Organisms move randomly, pay a movement or\n idle cost, and gather resources. Once they reach an energy threshold, they reproduce.\n Offspring may mutate, leading to new genome strings and color changes.\n
\n Machine Principles: Each organism continually converts resources\n (energy, matter, information) into self-maintenance and new machines (offspring). This\n leads to evolving behaviors over time.\n

\n \n \n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","874813825018928425","traceTime",1777532450550]