Hugging Face's logo

Spaces:
awacke1
/
AIAgenticControlSystemGame
Running

App Files Community
AIAgenticControlSystemGame / index.html
awacke1's picture
awacke1
Update index.html
1bc509f verified
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>