Cosmalism

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evolution Simulation: Quint to Future Human</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>
<style>
body { margin: 0; background: black; }
canvas { display: block; }
.control-panel { position: fixed; top: 10px; left: 10px; z-index: 10; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; }
.control-panel label { color: white; font-size: 14px; }
.control-panel input { width: 200px; margin: 5px 0; }
.control-panel button { width: 100px; padding: 5px; background: #333; color: white; border: none; border-radius: 5px; cursor: pointer; }
.control-panel button:hover { background: #444; }
</style>
</head>
<body>
<div class="control-panel">
<label for="timeSlider">Evolution Speed:</label>
<input type="range" id="timeSlider" min="1" max="10" value="5" step="1">
<span id="speedLabel">Speed: 5</span>

<label for="particleColor">Entity Color:</label>
<input type="color" id="particleColor" value="#00FFFF">

<button id="pauseBtn">Pause</button>
<button id="resetBtn">Reset</button>
</div>

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// Lighting
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.3);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xFFFFFF, 1, 100);
pointLight.position.set(0, 0, 5);
scene.add(pointLight);

// Initial Quint (single particle)
const quintGeometry = new THREE.SphereGeometry(0.2, 16, 16);
const quintMaterial = new THREE.MeshStandardMaterial({ color: 0x00FFFF, emissive: 0x00FFFF, emissiveIntensity: 1 });
const quint = new THREE.Mesh(quintGeometry, quintMaterial);
scene.add(quint);

// Humanoid Evolution Stage
let humanoid = null;
const humanoidGeometry = new THREE.BoxGeometry(0.5, 2, 0.5); // Basic humanoid shape
const humanoidMaterial = new THREE.MeshStandardMaterial({ color: 0x00FFFF });

// Future Evolution Variables
let evolutionStage = 0; // 0: Quint, 1: Humanoid, 2: Future Form
let evolutionProgress = 0;
let simulationRunning = true;
let evolutionSpeed = 0.005;

camera.position.z = 10;

// Controls
const timeSlider = document.getElementById("timeSlider");
const speedLabel = document.getElementById("speedLabel");
const particleColorPicker = document.getElementById("particleColor");
const pauseBtn = document.getElementById("pauseBtn");
const resetBtn = document.getElementById("resetBtn");

// Evolution Speed Control
timeSlider.addEventListener("input", function () {
evolutionSpeed = parseInt(timeSlider.value) * 0.001;
speedLabel.innerText = `Speed: ${timeSlider.value}`;
});

// Color Control
particleColorPicker.addEventListener("input", function () {
quintMaterial.color.set(particleColorPicker.value);
if (humanoid) humanoidMaterial.color.set(particleColorPicker.value);
});

// Pause/Resume Simulation
pauseBtn.addEventListener("click", function () {
simulationRunning = !simulationRunning;
pauseBtn.innerText = simulationRunning ? "Pause" : "Resume";
});

// Reset Simulation
resetBtn.addEventListener("click", function () {
evolutionStage = 0;
evolutionProgress = 0;
scene.remove(humanoid);
humanoid = null;
scene.add(quint);
quint.scale.set(1, 1, 1);
simulationRunning = true;
pauseBtn.innerText = "Pause";
});

// Animation Loop
function animate() {
requestAnimationFrame(animate);

if (simulationRunning) {
evolutionProgress += evolutionSpeed;

// Stage 0: Quint pulsates
if (evolutionStage === 0) {
const scale = 1 + Math.sin(Date.now() * 0.005) * 0.1;
quint.scale.set(scale, scale, scale);
if (evolutionProgress > 1) {
evolutionStage = 1;
evolutionProgress = 0;
scene.remove(quint);
humanoid = new THREE.Mesh(humanoidGeometry, humanoidMaterial);
scene.add(humanoid);
}
}

// Stage 1: Humanoid forms and grows
else if (evolutionStage === 1) {
humanoid.scale.y = 1 + evolutionProgress * 2; // Elongate vertically
humanoid.rotation.y += 0.01; // Slight rotation
if (evolutionProgress > 1) {
evolutionStage = 2;
evolutionProgress = 0;
}
}

// Stage 2: Future Evolution (1,000,000 years extrapolation)
else if (evolutionStage === 2) {
// Morph humanoid into a more complex form (e.g., elongated limbs, larger head)
humanoid.scale.set(
1 + Math.sin(evolutionProgress) * 0.5, // Width oscillation
2 + evolutionProgress * 2, // Height increase
1 + Math.cos(evolutionProgress) * 0.5 // Depth oscillation
);
humanoid.rotation.x += 0.005;
humanoid.rotation.z += 0.005;

// Simulate advanced features (e.g., glowing aura or additional structures)
humanoidMaterial.emissiveIntensity = 1 + evolutionProgress;
if (evolutionProgress > 2) evolutionProgress = 2; // Cap future evolution
}

controls.update();
renderer.render(scene, camera);
}
}

animate();

// Window resize handling
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>