Spaces:

awacke1
/

AIAgenticControlSystemGame

Running

App Files Files Community

AIAgenticControlSystemGame / index.html

awacke1

Update index.html

1bc509f verified about 1 year ago

Raw

History Blame Contribute Delete

50.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Agentic Demo - Dynamic Fractals & 3D Control</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
	font-family: 'Courier New', monospace;
	color: #00ff88;
	overflow: hidden;
	}

	.dashboard {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 300px 1fr 300px;
	grid-template-rows: 60px 1fr 200px;
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	}

	.header {
	grid-column: 1 / -1;
	background: rgba(0, 255, 136, 0.1);
	border: 1px solid #00ff88;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	backdrop-filter: blur(10px);
	}

	.ai-panel {
	background: rgba(0, 255, 136, 0.05);
	border: 1px solid #00ff88;
	border-radius: 8px;
	padding: 15px;
	backdrop-filter: blur(10px);
	overflow-y: auto;
	}

	.viz-container {
	position: relative;
	border: 1px solid #00ff88;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	}

	.control-panel {
	grid-column: 1 / -1;
	background: rgba(0, 255, 136, 0.05);
	border: 1px solid #00ff88;
	border-radius: 8px;
	padding: 15px;
	backdrop-filter: blur(10px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	}

	.agent-card {
	background: rgba(0, 255, 136, 0.1);
	border: 1px solid #00ff88;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
	}

	.agent-card:hover {
	background: rgba(0, 255, 136, 0.2);
	transform: translateX(5px);
	}

	.agent-status {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	}

	.active { background: #00ff88; }
	.idle { background: #ffaa00; }
	.error { background: #ff4444; }

	button {
	background: linear-gradient(45deg, #00ff88, #00cc66);
	border: none;
	border-radius: 4px;
	color: #000;
	padding: 8px 16px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	}

	button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
	}

	.code-block {
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid #333;
	border-radius: 4px;
	padding: 10px;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	margin: 10px 0;
	overflow-x: auto;
	}

	.log-entry {
	background: rgba(0, 255, 136, 0.1);
	border-left: 3px solid #00ff88;
	padding: 8px;
	margin: 5px 0;
	border-radius: 0 4px 4px 0;
	font-size: 12px;
	}

	input[type="range"] {
	width: 100%;
	margin: 10px 0;
	}

	.fractal-params {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
	}

	.param-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	}

	label {
	font-size: 12px;
	color: #00ff88;
	}
	</style>
	</head>
	<body>
	<div class="dashboard">
	<div class="header">
	<h1>🤖 AI Agentic Control System</h1>
	<div>
	<span id="status">🟢 System Active</span>
	<span style="margin-left: 20px;">FPS: <span id="fps">60</span></span>
	</div>
	</div>

	<div class="ai-panel">
	<h3>🧠 AI Agents</h3>
	<div id="agents-container">
	<!-- Agents will be populated here -->
	</div>

	<h4>📊 System Logs</h4>
	<div id="logs-container">
	<!-- Logs will appear here -->
	</div>
	</div>

	<div class="viz-container">
	<canvas id="three-canvas"></canvas>
	</div>

	<div class="ai-panel">
	<h3>🔧 Dynamic Code Engine</h3>
	<button onclick="updateFractalCode()">🔄 Evolve Fractal</button>
	<button onclick="generateNewSurface()">🌊 New Surface</button>

	<div class="code-block" id="current-code">
	// Current fractal function
	z = z² + c
	</div>

	<h4>🎯 Active Targets</h4>
	<div id="targets-list">
	<div class="log-entry">Target: Web App Control</div>
	<div class="log-entry">Target: Fractal Evolution</div>
	<div class="log-entry">Target: 3D Animation</div>
	</div>
	</div>

	<div class="control-panel">
	<div>
	<h4>🌀 Fractal Controls</h4>
	<div class="fractal-params">
	<div class="param-group">
	<label>Iterations:</label>
	<input type="range" id="iterations" min="10" max="200" value="50">
	</div>
	<div class="param-group">
	<label>Zoom:</label>
	<input type="range" id="zoom" min="0.1" max="5" step="0.1" value="1">
	</div>
	<div class="param-group">
	<label>C Real:</label>
	<input type="range" id="c-real" min="-2" max="2" step="0.01" value="-0.7">
	</div>
	<div class="param-group">
	<label>C Imag:</label>
	<input type="range" id="c-imag" min="-2" max="2" step="0.01" value="0.27">
	</div>
	</div>
	</div>

	<div>
	<h4>🏙️ City Controls</h4>
	<button onclick="addPerson()">🚶 Add Person</button>
	<button onclick="addVehicle()">🚗 Add Vehicle</button>
	<button onclick="addAnimal()">🐕 Add Animal</button>
	<button onclick="toggleTimeSpeed()">⏰ Time Speed</button>
	</div>

	<div>
	<h4>☀️ Day/Night</h4>
	<button onclick="forceDayTime()">☀️ Force Day</button>
	<button onclick="forceNightTime()">🌙 Force Night</button>
	<button onclick="randomizeColors()">🎨 Colors</button>
	<button onclick="addControlPoint()">✨ Add Orb</button>
	</div>

	<div>
	<h4>🚀 Agent Actions</h4>
	<button onclick="deployAgent('fractal')">🌀 Fractal Agent</button>
	<button onclick="deployAgent('visual')">👁️ Visual Agent</button>
	<button onclick="deployAgent('control')">🎮 Control Agent</button>
	<button onclick="deployAgent('browser')">🌐 Browser Agent</button>
	</div>

	<div>
	<h4>📡 System Status</h4>
	<div style="font-size: 12px;">
	<div>People: <span id="people-count">8</span></div>
	<div>Vehicles: <span id="vehicle-count">9</span></div>
	<div>Animals: <span id="animal-count">11</span></div>
	<div>Time: <span id="time-cycle">Day</span></div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// AI Agent System
	class AIAgent {
	constructor(name, type, color) {
	this.name = name;
	this.type = type;
	this.color = color;
	this.status = 'idle';
	this.tasks = [];
	this.lastUpdate = Date.now();
	}

	execute(task) {
	this.status = 'active';
	this.tasks.push(task);
	addLog(`${this.name}: Executing ${task}`);

	// Simulate agent work
	setTimeout(() => {
	this.status = 'idle';
	addLog(`${this.name}: Completed ${task}`);
	}, Math.random() * 2000 + 1000);
	}
	}

	// Initialize AI Agents
	const agents = [
	new AIAgent('Fractal-AI', 'computation', '#00ff88'),
	new AIAgent('Visual-AI', 'graphics', '#ff6b6b'),
	new AIAgent('Control-AI', 'interface', '#4ecdc4'),
	new AIAgent('Browser-AI', 'automation', '#45b7d1')
	];

	// Three.js Setup
	let scene, camera, renderer, fractalMesh, controlPoints = [];
	let animationId;
	let isAnimating = true;

	// City elements
	let buildings = [];
	let people = [];
	let vehicles = [];
	let animals = [];
	let dayNightCycle = { time: 0, sunLight: null, moonLight: null, ambientLight: null };

	function initThreeJS() {
	const container = document.getElementById('three-canvas');
	const rect = container.parentElement.getBoundingClientRect();

	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, rect.width / rect.height, 0.1, 1000);
	renderer = new THREE.WebGLRenderer({ canvas: container, alpha: true });
	renderer.setSize(rect.width, rect.height);
	renderer.setClearColor(0x87CEEB, 1.0); // Sky blue
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;

	// Setup lighting system
	setupLighting();

	// Create city environment
	createCity();
	createPeople();
	createVehicles();
	createAnimals();

	// Create dynamic fractal surface (smaller, positioned as part of city)
	createFractalSurface();

	camera.position.set(0, 8, 12);
	camera.lookAt(0, 0, 0);

	animate();
	}

	function setupLighting() {
	// Ambient light
	dayNightCycle.ambientLight = new THREE.AmbientLight(0x404040, 0.3);
	scene.add(dayNightCycle.ambientLight);

	// Sun light
	dayNightCycle.sunLight = new THREE.DirectionalLight(0xffffff, 1.0);
	dayNightCycle.sunLight.position.set(10, 10, 5);
	dayNightCycle.sunLight.castShadow = true;
	dayNightCycle.sunLight.shadow.mapSize.width = 2048;
	dayNightCycle.sunLight.shadow.mapSize.height = 2048;
	scene.add(dayNightCycle.sunLight);

	// Moon light
	dayNightCycle.moonLight = new THREE.DirectionalLight(0x6666ff, 0.3);
	dayNightCycle.moonLight.position.set(-10, 8, -5);
	dayNightCycle.moonLight.castShadow = true;
	dayNightCycle.moonLight.visible = false;
	scene.add(dayNightCycle.moonLight);
	}

	function createCity() {
	// Ground
	const groundGeometry = new THREE.PlaneGeometry(20, 20);
	const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 });
	const ground = new THREE.Mesh(groundGeometry, groundMaterial);
	ground.rotation.x = -Math.PI / 2;
	ground.receiveShadow = true;
	scene.add(ground);

	// Create buildings with animated windows
	for (let i = 0; i < 12; i++) {
	createBuilding(
	(Math.random() - 0.5) * 15,
	0,
	(Math.random() - 0.5) * 15
	);
	}

	// Streets
	createStreets();
	}

	function createBuilding(x, y, z) {
	const height = Math.random() * 4 + 2;
	const width = Math.random() * 1.5 + 1;
	const depth = Math.random() * 1.5 + 1;

	// Building structure
	const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
	const buildingMaterial = new THREE.MeshLambertMaterial({
	color: new THREE.Color().setHSL(Math.random() * 0.1 + 0.15, 0.3, 0.4)
	});
	const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
	building.position.set(x, height / 2, z);
	building.castShadow = true;
	building.receiveShadow = true;
	scene.add(building);

	// Create windows
	const windows = [];
	const windowsX = Math.floor(width * 4);
	const windowsY = Math.floor(height * 3);

	for (let wx = 0; wx < windowsX; wx++) {
	for (let wy = 0; wy < windowsY; wy++) {
	const windowGeometry = new THREE.PlaneGeometry(0.15, 0.15);
	const windowMaterial = new THREE.MeshBasicMaterial({
	color: 0x444444,
	transparent: true,
	opacity: 0.8
	});
	const window = new THREE.Mesh(windowGeometry, windowMaterial);

	window.position.set(
	x + (wx - windowsX/2) * 0.2,
	y + (wy - windowsY/2) * 0.3 + height/2,
	z + width/2 + 0.01
	);

	window.userData = {
	isOn: Math.random() > 0.5,
	flickerTimer: Math.random() * 1000
	};

	windows.push(window);
	scene.add(window);
	}
	}

	buildings.push({ structure: building, windows: windows });
	}

	function createStreets() {
	// Main streets
	const streetMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });

	// Horizontal street
	const hStreetGeometry = new THREE.PlaneGeometry(20, 1);
	const hStreet = new THREE.Mesh(hStreetGeometry, streetMaterial);
	hStreet.rotation.x = -Math.PI / 2;
	hStreet.position.y = 0.01;
	scene.add(hStreet);

	// Vertical street
	const vStreetGeometry = new THREE.PlaneGeometry(1, 20);
	const vStreet = new THREE.Mesh(vStreetGeometry, streetMaterial);
	vStreet.rotation.x = -Math.PI / 2;
	vStreet.position.y = 0.01;
	scene.add(vStreet);
	}

	function createPeople() {
	for (let i = 0; i < 8; i++) {
	const person = createPerson();
	people.push(person);
	scene.add(person.group);
	}
	}

	function createPerson() {
	const group = new THREE.Group();

	// Body
	const bodyGeometry = new THREE.CylinderGeometry(0.1, 0.15, 0.4);
	const bodyMaterial = new THREE.MeshLambertMaterial({
	color: new THREE.Color().setHSL(Math.random(), 0.6, 0.5)
	});
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.4;
	group.add(body);

	// Head
	const headGeometry = new THREE.SphereGeometry(0.08);
	const headMaterial = new THREE.MeshLambertMaterial({ color: 0xffdbac });
	const head = new THREE.Mesh(headGeometry, headMaterial);
	head.position.y = 0.7;
	group.add(head);

	// Position and movement
	const path = createRandomPath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.02 + 0.01,
	walkCycle: 0
	};
	}

	function createVehicles() {
	// Cars
	for (let i = 0; i < 4; i++) {
	const car = createCar();
	vehicles.push(car);
	scene.add(car.group);
	}

	// Trucks
	for (let i = 0; i < 2; i++) {
	const truck = createTruck();
	vehicles.push(truck);
	scene.add(truck.group);
	}

	// Bicycles
	for (let i = 0; i < 3; i++) {
	const bicycle = createBicycle();
	vehicles.push(bicycle);
	scene.add(bicycle.group);
	}
	}

	function createCar() {
	const group = new THREE.Group();

	// Car body
	const bodyGeometry = new THREE.BoxGeometry(0.8, 0.3, 0.4);
	const bodyMaterial = new THREE.MeshLambertMaterial({
	color: new THREE.Color().setHSL(Math.random(), 0.8, 0.5)
	});
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.2;
	group.add(body);

	// Wheels
	const wheelGeometry = new THREE.CylinderGeometry(0.08, 0.08, 0.05);
	const wheelMaterial = new THREE.MeshLambertMaterial({ color: 0x222222 });

	const wheels = [];
	const wheelPositions = [
	[-0.3, 0.08, -0.15], [0.3, 0.08, -0.15],
	[-0.3, 0.08, 0.15], [0.3, 0.08, 0.15]
	];

	wheelPositions.forEach(pos => {
	const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
	wheel.position.set(...pos);
	wheel.rotation.z = Math.PI / 2;
	wheels.push(wheel);
	group.add(wheel);
	});

	const path = createVehiclePath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	wheels: wheels,
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.05 + 0.03,
	type: 'car'
	};
	}

	function createTruck() {
	const group = new THREE.Group();

	// Truck body
	const bodyGeometry = new THREE.BoxGeometry(1.2, 0.5, 0.6);
	const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.3;
	group.add(body);

	// Cab
	const cabGeometry = new THREE.BoxGeometry(0.4, 0.4, 0.6);
	const cabMaterial = new THREE.MeshLambertMaterial({ color: 0x654321 });
	const cab = new THREE.Mesh(cabGeometry, cabMaterial);
	cab.position.set(-0.5, 0.4, 0);
	group.add(cab);

	const path = createVehiclePath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.03 + 0.02,
	type: 'truck'
	};
	}

	function createBicycle() {
	const group = new THREE.Group();

	// Frame
	const frameGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.6);
	const frameMaterial = new THREE.MeshLambertMaterial({ color: 0x0066cc });
	const frame = new THREE.Mesh(frameGeometry, frameMaterial);
	frame.position.y = 0.15;
	frame.rotation.z = Math.PI / 6;
	group.add(frame);

	// Wheels
	const wheelGeometry = new THREE.TorusGeometry(0.12, 0.02, 8, 16);
	const wheelMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });

	const frontWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
	frontWheel.position.set(0.3, 0.12, 0);
	group.add(frontWheel);

	const backWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
	backWheel.position.set(-0.3, 0.12, 0);
	group.add(backWheel);

	const path = createRandomPath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	wheels: [frontWheel, backWheel],
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.04 + 0.02,
	type: 'bicycle'
	};
	}

	function createAnimals() {
	// Dogs
	for (let i = 0; i < 3; i++) {
	const dog = createDog();
	animals.push(dog);
	scene.add(dog.group);
	}

	// Cats
	for (let i = 0; i < 2; i++) {
	const cat = createCat();
	animals.push(cat);
	scene.add(cat.group);
	}

	// Birds
	for (let i = 0; i < 6; i++) {
	const bird = createBird();
	animals.push(bird);
	scene.add(bird.group);
	}
	}

	function createDog() {
	const group = new THREE.Group();

	// Body
	const bodyGeometry = new THREE.BoxGeometry(0.3, 0.15, 0.15);
	const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.1;
	group.add(body);

	// Head
	const headGeometry = new THREE.BoxGeometry(0.12, 0.1, 0.1);
	const head = new THREE.Mesh(headGeometry, bodyMaterial);
	head.position.set(0.2, 0.12, 0);
	group.add(head);

	// Tail
	const tailGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.1);
	const tail = new THREE.Mesh(tailGeometry, bodyMaterial);
	tail.position.set(-0.15, 0.15, 0);
	tail.rotation.z = Math.PI / 4;
	group.add(tail);

	const path = createRandomPath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	tail: tail,
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.03 + 0.02,
	type: 'dog',
	tailWag: 0
	};
	}

	function createCat() {
	const group = new THREE.Group();

	// Body
	const bodyGeometry = new THREE.BoxGeometry(0.25, 0.1, 0.1);
	const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x696969 });
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	body.position.y = 0.08;
	group.add(body);

	// Head
	const headGeometry = new THREE.SphereGeometry(0.05);
	const head = new THREE.Mesh(headGeometry, bodyMaterial);
	head.position.set(0.15, 0.1, 0);
	group.add(head);

	const path = createRandomPath();
	group.position.copy(path[0]);
	group.castShadow = true;

	return {
	group: group,
	path: path,
	pathIndex: 0,
	speed: Math.random() * 0.025 + 0.015,
	type: 'cat'
	};
	}

	function createBird() {
	const group = new THREE.Group();

	// Body
	const bodyGeometry = new THREE.SphereGeometry(0.04);
	const bodyMaterial = new THREE.MeshLambertMaterial({
	color: new THREE.Color().setHSL(Math.random(), 0.7, 0.6)
	});
	const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
	group.add(body);

	// Wings
	const wingGeometry = new THREE.PlaneGeometry(0.08, 0.03);
	const wingMaterial = new THREE.MeshLambertMaterial({
	color: bodyMaterial.color,
	transparent: true,
	opacity: 0.8
	});

	const leftWing = new THREE.Mesh(wingGeometry, wingMaterial);
	leftWing.position.set(-0.05, 0, 0);
	leftWing.rotation.z = Math.PI / 6;
	group.add(leftWing);

	const rightWing = new THREE.Mesh(wingGeometry, wingMaterial);
	rightWing.position.set(0.05, 0, 0);
	rightWing.rotation.z = -Math.PI / 6;
	group.add(rightWing);

	group.position.set(
	(Math.random() - 0.5) * 15,
	Math.random() * 3 + 2,
	(Math.random() - 0.5) * 15
	);

	return {
	group: group,
	wings: [leftWing, rightWing],
	flightPath: Math.random() * Math.PI * 2,
	flightRadius: Math.random() * 5 + 2,
	height: group.position.y,
	speed: Math.random() * 0.02 + 0.01,
	wingFlap: 0,
	type: 'bird'
	};
	}

	function createRandomPath() {
	const path = [];
	for (let i = 0; i < 6; i++) {
	path.push(new THREE.Vector3(
	(Math.random() - 0.5) * 15,
	0,
	(Math.random() - 0.5) * 15
	));
	}
	return path;
	}

	function createVehiclePath() {
	// Create paths along streets
	const paths = [
	// Horizontal street
	[
	new THREE.Vector3(-10, 0, 0),
	new THREE.Vector3(10, 0, 0)
	],
	// Vertical street
	[
	new THREE.Vector3(0, 0, -10),
	new THREE.Vector3(0, 0, 10)
	]
	];
	return paths[Math.floor(Math.random() * paths.length)];
	}

	function createFractalSurface() {
	const geometry = new THREE.PlaneGeometry(2, 2, 32, 32);
	const vertices = geometry.attributes.position.array;

	// Generate fractal heightmap
	for (let i = 0; i < vertices.length; i += 3) {
	const x = vertices[i];
	const y = vertices[i + 1];

	// Mandelbrot-inspired surface
	const c_real = parseFloat(document.getElementById('c-real')?.value \|\| -0.7);
	const c_imag = parseFloat(document.getElementById('c-imag')?.value \|\| 0.27);
	const zoom = parseFloat(document.getElementById('zoom')?.value \|\| 1);

	let z_real = x * zoom;
	let z_imag = y * zoom;
	let iterations = 0;
	const maxIter = parseInt(document.getElementById('iterations')?.value \|\| 50);

	while (z_real * z_real + z_imag * z_imag < 4 && iterations < maxIter) {
	const temp = z_real * z_real - z_imag * z_imag + c_real;
	z_imag = 2 * z_real * z_imag + c_imag;
	z_real = temp;
	iterations++;
	}

	vertices[i + 2] = (iterations / maxIter) * 0.3 * Math.sin(Date.now() * 0.001 + x + y);
	}

	geometry.attributes.position.needsUpdate = true;
	geometry.computeVertexNormals();

	// Dynamic material with time-based colors
	const material = new THREE.MeshPhongMaterial({
	color: new THREE.Color().setHSL((Date.now() * 0.0001) % 1, 0.7, 0.6),
	wireframe: false,
	transparent: true,
	opacity: 0.6
	});

	if (fractalMesh) {
	scene.remove(fractalMesh);
	}

	fractalMesh = new THREE.Mesh(geometry, material);
	fractalMesh.position.set(5, 0.5, 5); // Position in city as art installation
	fractalMesh.rotation.x = -Math.PI / 2;
	scene.add(fractalMesh);
	}

	function updateDayNightCycle() {
	dayNightCycle.time += 0.001;
	const cycle = (Math.sin(dayNightCycle.time) + 1) / 2; // 0 to 1

	// Sun position (spherical path)
	const sunAngle = dayNightCycle.time;
	const sunRadius = 15;
	dayNightCycle.sunLight.position.set(
	Math.cos(sunAngle) * sunRadius,
	Math.sin(sunAngle) * sunRadius,
	5
	);

	// Moon position (opposite to sun)
	const moonAngle = sunAngle + Math.PI;
	dayNightCycle.moonLight.position.set(
	Math.cos(moonAngle) * sunRadius,
	Math.sin(moonAngle) * sunRadius,
	-5
	);

	// Day/night lighting
	if (cycle > 0.5) {
	// Day time
	dayNightCycle.sunLight.visible = true;
	dayNightCycle.moonLight.visible = false;
	dayNightCycle.sunLight.intensity = cycle;
	dayNightCycle.ambientLight.intensity = cycle * 0.5;

	// Sky color transition
	const skyHue = 0.55; // Blue
	const skySaturation = 0.6;
	const skyLightness = 0.4 + cycle * 0.4;
	renderer.setClearColor(new THREE.Color().setHSL(skyHue, skySaturation, skyLightness));
	} else {
	// Night time
	dayNightCycle.sunLight.visible = false;
	dayNightCycle.moonLight.visible = true;
	dayNightCycle.moonLight.intensity = (1 - cycle) * 0.3;
	dayNightCycle.ambientLight.intensity = (1 - cycle) * 0.2;

	// Night sky
	const skyHue = 0.65; // Dark blue
	const skySaturation = 0.8;
	const skyLightness = 0.1 + (1 - cycle) * 0.1;
	renderer.setClearColor(new THREE.Color().setHSL(skyHue, skySaturation, skyLightness));
	}
	}

	function updateBuildingWindows() {
	const isNight = (Math.sin(dayNightCycle.time) + 1) / 2 < 0.5;

	buildings.forEach(building => {
	building.windows.forEach(window => {
	window.userData.flickerTimer += 16; // ~60fps

	// More lights on at night
	const lightProbability = isNight ? 0.7 : 0.2;

	if (window.userData.flickerTimer > 1000 + Math.random() * 2000) {
	window.userData.isOn = Math.random() < lightProbability;
	window.userData.flickerTimer = 0;
	}

	if (window.userData.isOn) {
	const warmth = Math.random() * 0.1 + 0.1;
	window.material.color.setHSL(warmth, 0.8, 0.6);
	window.material.opacity = 0.9;
	} else {
	window.material.color.setRGB(0.2, 0.2, 0.3);
	window.material.opacity = 0.3;
	}
	});
	});
	}

	function updatePeople() {
	people.forEach(person => {
	const path = person.path;
	const currentPos = path[person.pathIndex];
	const nextPos = path[(person.pathIndex + 1) % path.length];

	// Move towards next position
	const direction = new THREE.Vector3().subVectors(nextPos, currentPos).normalize();
	person.group.position.add(direction.multiplyScalar(person.speed));

	// Rotation to face movement direction
	person.group.lookAt(person.group.position.clone().add(direction));

	// Walking animation
	person.walkCycle += 0.3;
	person.group.children[0].rotation.z = Math.sin(person.walkCycle) * 0.1;

	// Check if reached next waypoint
	if (person.group.position.distanceTo(nextPos) < 0.2) {
	person.pathIndex = (person.pathIndex + 1) % path.length;
	}
	});
	}

	function updateVehicles() {
	vehicles.forEach(vehicle => {
	const path = vehicle.path;
	const currentPos = path[vehicle.pathIndex];
	const nextPos = path[(vehicle.pathIndex + 1) % path.length];

	// Move towards next position
	const direction = new THREE.Vector3().subVectors(nextPos, currentPos).normalize();
	vehicle.group.position.add(direction.multiplyScalar(vehicle.speed));

	// Rotation to face movement direction
	vehicle.group.lookAt(vehicle.group.position.clone().add(direction));

	// Wheel rotation for cars and bicycles
	if (vehicle.wheels) {
	vehicle.wheels.forEach(wheel => {
	wheel.rotation.x += vehicle.speed * 2;
	});
	}

	// Check if reached next waypoint
	if (vehicle.group.position.distanceTo(nextPos) < 0.2) {
	vehicle.pathIndex = (vehicle.pathIndex + 1) % path.length;
	}
	});
	}

	function updateAnimals() {
	animals.forEach(animal => {
	if (animal.type === 'bird') {
	// Circular flight pattern
	animal.flightPath += animal.speed;
	animal.group.position.x = Math.cos(animal.flightPath) * animal.flightRadius;
	animal.group.position.z = Math.sin(animal.flightPath) * animal.flightRadius;
	animal.group.position.y = animal.height + Math.sin(animal.flightPath * 3) * 0.5;

	// Wing flapping
	animal.wingFlap += 0.5;
	const flapAngle = Math.sin(animal.wingFlap) * 0.5;
	animal.wings[0].rotation.z = Math.PI / 6 + flapAngle;
	animal.wings[1].rotation.z = -Math.PI / 6 - flapAngle;

	// Face flight direction
	const flightDirection = new THREE.Vector3(
	-Math.sin(animal.flightPath),
	0,
	Math.cos(animal.flightPath)
	);
	animal.group.lookAt(animal.group.position.clone().add(flightDirection));

	} else {
	// Ground animals (dogs, cats)
	const path = animal.path;
	const currentPos = path[animal.pathIndex];
	const nextPos = path[(animal.pathIndex + 1) % path.length];

	const direction = new THREE.Vector3().subVectors(nextPos, currentPos).normalize();
	animal.group.position.add(direction.multiplyScalar(animal.speed));
	animal.group.lookAt(animal.group.position.clone().add(direction));

	// Special animations
	if (animal.type === 'dog' && animal.tail) {
	animal.tailWag += 0.4;
	animal.tail.rotation.y = Math.sin(animal.tailWag) * 0.5;
	}

	if (animal.group.position.distanceTo(nextPos) < 0.1) {
	animal.pathIndex = (animal.pathIndex + 1) % path.length;
	}
	}
	});
	}

	function addControlPoint() {
	const geometry = new THREE.SphereGeometry(0.1, 16, 16);
	const material = new THREE.MeshPhongMaterial({
	color: new THREE.Color().setHSL(Math.random(), 0.8, 0.6),
	emissive: new THREE.Color().setHSL(Math.random(), 0.3, 0.1)
	});

	const sphere = new THREE.Mesh(geometry, material);
	sphere.position.set(
	(Math.random() - 0.5) * 16,
	Math.random() * 4 + 2,
	(Math.random() - 0.5) * 16
	);

	sphere.userData = {
	velocity: new THREE.Vector3(
	(Math.random() - 0.5) * 0.03,
	(Math.random() - 0.5) * 0.02,
	(Math.random() - 0.5) * 0.03
	)
	};

	sphere.castShadow = true;
	controlPoints.push(sphere);
	scene.add(sphere);

	addLog(`Control point added at (${sphere.position.x.toFixed(2)}, ${sphere.position.y.toFixed(2)})`);
	}

	function addPerson() {
	const person = createPerson();
	people.push(person);
	scene.add(person.group);
	addLog(`New person added to city`);
	}

	function addVehicle() {
	const vehicleType = ['car', 'truck', 'bicycle'][Math.floor(Math.random() * 3)];
	let vehicle;

	if (vehicleType === 'car') vehicle = createCar();
	else if (vehicleType === 'truck') vehicle = createTruck();
	else vehicle = createBicycle();

	vehicles.push(vehicle);
	scene.add(vehicle.group);
	addLog(`New ${vehicleType} added to streets`);
	}

	function addAnimal() {
	const animalType = ['dog', 'cat', 'bird'][Math.floor(Math.random() * 3)];
	let animal;

	if (animalType === 'dog') animal = createDog();
	else if (animalType === 'cat') animal = createCat();
	else animal = createBird();

	animals.push(animal);
	scene.add(animal.group);
	addLog(`New ${animalType} spotted in city`);
	}

	function toggleTimeSpeed() {
	const currentSpeed = 0.001;
	dayNightCycle.timeSpeed = dayNightCycle.timeSpeed === currentSpeed ? currentSpeed * 5 : currentSpeed;
	addLog(`Time speed: ${dayNightCycle.timeSpeed === currentSpeed ? 'Normal' : '5x Fast'}`);
	}

	function forceDayTime() {
	dayNightCycle.time = Math.PI / 2; // Noon
	addLog('Forced to day time');
	}

	function forceNightTime() {
	dayNightCycle.time = -Math.PI / 2; // Midnight
	addLog('Forced to night time');
	}

	function clearControlPoints() {
	controlPoints.forEach(point => scene.remove(point));
	controlPoints = [];
	addLog('All control points cleared');
	}

	function animate() {
	if (!isAnimating) return;

	animationId = requestAnimationFrame(animate);

	// Update day/night cycle
	updateDayNightCycle();

	// Update building windows
	updateBuildingWindows();

	// Update all moving entities
	updatePeople();
	updateVehicles();
	updateAnimals();

	// Update fractal surface
	if (fractalMesh) {
	fractalMesh.rotation.z += 0.002;
	fractalMesh.material.color.setHSL((Date.now() * 0.0001) % 1, 0.7, 0.6);
	}

	// Animate control points
	controlPoints.forEach(point => {
	point.position.add(point.userData.velocity);

	// Bounce off boundaries
	if (Math.abs(point.position.x) > 8) point.userData.velocity.x *= -1;
	if (Math.abs(point.position.y - 2) > 4) point.userData.velocity.y *= -1;
	if (Math.abs(point.position.z) > 8) point.userData.velocity.z *= -1;

	// Add some orbital motion
	point.rotation.x += 0.02;
	point.rotation.y += 0.03;
	});

	renderer.render(scene, camera);

	// Update FPS
	updateFPS();
	}

	let lastTime = Date.now();
	let frameCount = 0;

	function updateFPS() {
	frameCount++;
	const now = Date.now();
	if (now - lastTime >= 1000) {
	document.getElementById('fps').textContent = frameCount;
	frameCount = 0;
	lastTime = now;
	}
	}

	// Dynamic Code Engine
	const fractalFunctions = [
	"z = z² + c",
	"z = z³ + c",
	"z = sin(z) + c",
	"z = \|z\|² + c",
	"z = z² + c + sin(t)",
	"z = z*cos(z) + c",
	"z = exp(z) + c"
	];

	function updateFractalCode() {
	const newFunction = fractalFunctions[Math.floor(Math.random() * fractalFunctions.length)];
	document.getElementById('current-code').innerHTML = `// Current fractal function<br/>${newFunction}`;

	createFractalSurface();
	agents[0].execute('fractal code evolution');
	addLog(`Fractal function updated: ${newFunction}`);
	}

	function generateNewSurface() {
	// Randomize parameters
	document.getElementById('c-real').value = (Math.random() - 0.5) * 4;
	document.getElementById('c-imag').value = (Math.random() - 0.5) * 4;
	document.getElementById('zoom').value = Math.random() * 3 + 0.5;

	createFractalSurface();
	agents[1].execute('surface generation');
	}

	function toggleAnimation() {
	isAnimating = !isAnimating;
	if (isAnimating) {
	animate();
	addLog('Animation resumed');
	} else {
	cancelAnimationFrame(animationId);
	addLog('Animation paused');
	}
	}

	function randomizeColors() {
	if (fractalMesh) {
	fractalMesh.material.color.setHSL(Math.random(), 0.7, 0.6);
	}
	controlPoints.forEach(point => {
	point.material.color.setHSL(Math.random(), 0.8, 0.6);
	point.material.emissive.setHSL(Math.random(), 0.3, 0.1);
	});
	agents[1].execute('color randomization');
	}

	function deployAgent(type) {
	const agent = agents.find(a => a.type === type \|\| a.name.toLowerCase().includes(type));
	if (agent) {
	const tasks = {
	fractal: 'fractal computation optimization',
	visual: 'visual enhancement protocol',
	control: 'interface adaptation',
	browser: 'web application orchestration'
	};
	agent.execute(tasks[type] \|\| 'general task execution');
	}
	}

	// UI Functions
	function renderAgents() {
	const container = document.getElementById('agents-container');
	container.innerHTML = '';

	agents.forEach(agent => {
	const card = document.createElement('div');
	card.className = 'agent-card';
	card.innerHTML = `
	<div>
	<span class="agent-status ${agent.status}"></span>
	<strong>${agent.name}</strong>
	</div>
	<div style="font-size: 12px; color: ${agent.color};">
	${agent.type.toUpperCase()} • ${agent.tasks.length} tasks
	</div>
	`;
	container.appendChild(card);
	});
	}

	function addLog(message) {
	const container = document.getElementById('logs-container');
	const entry = document.createElement('div');
	entry.className = 'log-entry';
	entry.innerHTML = `<small>${new Date().toLocaleTimeString()}</small><br/>${message}`;
	container.appendChild(entry);

	// Keep only last 10 logs
	while (container.children.length > 10) {
	container.removeChild(container.firstChild);
	}

	container.scrollTop = container.scrollHeight;
	}

	function updateSystemStats() {
	document.getElementById('memory-usage').textContent = `${Math.floor(Math.random() * 30 + 40)}%`;
	document.getElementById('cpu-usage').textContent = `${Math.floor(Math.random() * 40 + 20)}%`;
	document.getElementById('agent-count').textContent = agents.length;
	document.getElementById('target-count').textContent = document.querySelectorAll('#targets-list .log-entry').length;
	}

	// Event Listeners
	document.getElementById('iterations')?.addEventListener('input', createFractalSurface);
	document.getElementById('zoom')?.addEventListener('input', createFractalSurface);
	document.getElementById('c-real')?.addEventListener('input', createFractalSurface);
	document.getElementById('c-imag')?.addEventListener('input', createFractalSurface);

	// Initialize System
	window.addEventListener('load', () => {
	initThreeJS();
	renderAgents();

	// Add initial control points
	for (let i = 0; i < 3; i++) {
	setTimeout(() => addControlPoint(), i * 500);
	}

	// System status updates
	setInterval(updateSystemStats, 2000);
	setInterval(renderAgents, 1000);

	// Auto-evolution
	setInterval(() => {
	if (Math.random() < 0.1) {
	updateFractalCode();
	}
	}, 5000);

	addLog('AI Agentic System initialized');
	addLog('3D visualization engine active');
	addLog('Dynamic fractal computation online');
	addLog('Browser automation ready');
	});

	// Handle window resize
	window.addEventListener('resize', () => {
	const container = document.getElementById('three-canvas');
	const rect = container.parentElement.getBoundingClientRect();
	camera.aspect = rect.width / rect.height;
	camera.updateProjectionMatrix();
	renderer.setSize(rect.width, rect.height);
	});

	// Simulate browser automation capabilities
	function simulateBrowserAutomation() {
	const actions = [
	'Opening new browser window',
	'Navigating to target application',
	'Injecting control scripts',
	'Establishing WebSocket connection',
	'Monitoring DOM changes',
	'Executing automated interactions'
	];

	let index = 0;
	const interval = setInterval(() => {
	if (index < actions.length) {
	addLog(`Browser Agent: ${actions[index]}`);
	index++;
	} else {
	clearInterval(interval);
	addLog('Browser automation sequence complete');
	}
	}, 1500);
	}

	// Simulate AI model inference
	function simulateAIInference() {
	const models = ['text-classification', 'object-detection', 'sentiment-analysis', 'code-generation'];
	const model = models[Math.floor(Math.random() * models.length)];

	addLog(`Running ${model} inference...`);
	setTimeout(() => {
	addLog(`${model} inference complete: confidence 0.${Math.floor(Math.random() * 30 + 70)}`);
	}, Math.random() * 2000 + 500);
	}

	// Periodic AI activities
	setInterval(simulateAIInference, 8000);
	setTimeout(simulateBrowserAutomation, 3000);
	</script>
	</body>
	</html>