[claude] Agent idle behaviors in 3D world (#8) #48

Merged
Timmy merged 1 commits from claude/issue-8 into main 2026-03-24 03:25:24 +00:00

260
app.js
View File

@@ -438,6 +438,76 @@ function createTerminalPanel(parent, x, y, rot, title, color, lines) {
batcaveTerminals.push({ group, scanMat, borderMat });
}
// ═══ AGENT IDLE BEHAVIOR SYSTEM ═══
const AGENT_STATES = { IDLE: 'IDLE', PACING: 'PACING', LOOKING: 'LOOKING', READING: 'READING' };
const ACTIVITY_STATES = { NONE: 'NONE', WAITING: 'WAITING', THINKING: 'THINKING', PROCESSING: 'PROCESSING' };
function createActivityIndicator(color) {
const group = new THREE.Group();
group.position.y = 4.2;
group.visible = false;
// WAITING — pulsing sphere
const waitGeo = new THREE.SphereGeometry(0.18, 16, 16);
const waitMat = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.85 });
const waitMesh = new THREE.Mesh(waitGeo, waitMat);
waitMesh.name = 'indicator_waiting';
waitMesh.visible = false;
group.add(waitMesh);
// THINKING — wireframe octahedron
const thinkGeo = new THREE.OctahedronGeometry(0.2, 0);
const thinkMat = new THREE.MeshBasicMaterial({ color, wireframe: true });
const thinkMesh = new THREE.Mesh(thinkGeo, thinkMat);
thinkMesh.name = 'indicator_thinking';
thinkMesh.visible = false;
group.add(thinkMesh);
// PROCESSING — spinning torus ring
const procGeo = new THREE.TorusGeometry(0.18, 0.04, 8, 32);
const procMat = new THREE.MeshBasicMaterial({ color });
const procMesh = new THREE.Mesh(procGeo, procMat);
procMesh.name = 'indicator_processing';
procMesh.visible = false;
group.add(procMesh);
return { group, waitMesh, thinkMesh, procMesh };
}
function setAgentActivity(agent, state) {
agent.activityState = state;
agent.indicator.group.visible = (state !== ACTIVITY_STATES.NONE);
agent.indicator.waitMesh.visible = (state === ACTIVITY_STATES.WAITING);
agent.indicator.thinkMesh.visible = (state === ACTIVITY_STATES.THINKING);
agent.indicator.procMesh.visible = (state === ACTIVITY_STATES.PROCESSING);
}
function buildPacingPath(station) {
// Small 3-waypoint circuit around the station
const r = 1.8;
return [
new THREE.Vector3(station.x - r, 0, station.z),
new THREE.Vector3(station.x, 0, station.z + r),
new THREE.Vector3(station.x + r, 0, station.z - r * 0.5),
];
}
function pickNextState(agent) {
const weights = {
[AGENT_STATES.IDLE]: 40,
[AGENT_STATES.PACING]: 25,
[AGENT_STATES.LOOKING]: 20,
[AGENT_STATES.READING]: 15,
};
const total = Object.values(weights).reduce((a, b) => a + b, 0);
let r = Math.random() * total;
for (const [state, w] of Object.entries(weights)) {
r -= w;
if (r <= 0) return state;
}
return AGENT_STATES.IDLE;
}
// ═══ AGENT PRESENCE SYSTEM ═══
function createAgentPresences() {
const agentData = [
@@ -491,16 +561,30 @@ function createAgentPresences() {
label.position.y = 3.8;
group.add(label);
// Activity Indicator
const indicator = createActivityIndicator(color);
group.add(indicator.group);
scene.add(group);
agents.push({
id: data.id,
group,
orb,
halo,
color,
station: data.station,
agents.push({
id: data.id,
group,
orb,
halo,
color,
station: data.station,
targetPos: new THREE.Vector3(data.pos.x, 0, data.pos.z),
wanderTimer: 0
// Idle state machine
state: AGENT_STATES.IDLE,
stateTimer: 2 + Math.random() * 4,
lookAngle: 0,
lookSpeed: 0.4 + Math.random() * 0.3,
pacingPath: buildPacingPath(data.station),
pacingIdx: 0,
// Activity indicators
indicator,
activityState: ACTIVITY_STATES.NONE,
activityLocked: false,
});
});
}
@@ -1065,6 +1149,19 @@ function sendChatMessage() {
if (!text) return;
addChatMessage('user', text);
input.value = '';
// Drive Timmy activity indicators
const timmy = agents.find(a => a.id === 'timmy');
if (timmy) {
timmy.activityLocked = true;
setAgentActivity(timmy, ACTIVITY_STATES.THINKING);
}
const delay = 500 + Math.random() * 1000;
if (timmy) {
setTimeout(() => setAgentActivity(timmy, ACTIVITY_STATES.PROCESSING), delay * 0.4);
}
setTimeout(() => {
const responses = [
'Processing your request through the harness...',
@@ -1077,7 +1174,14 @@ function sendChatMessage() {
];
const resp = responses[Math.floor(Math.random() * responses.length)];
addChatMessage('timmy', resp);
}, 500 + Math.random() * 1000);
if (timmy) {
setAgentActivity(timmy, ACTIVITY_STATES.WAITING);
setTimeout(() => {
setAgentActivity(timmy, ACTIVITY_STATES.NONE);
timmy.activityLocked = false;
}, 2000);
}
}, delay);
input.blur();
}
@@ -1336,24 +1440,7 @@ function gameLoop() {
});
// Animate Agents
agents.forEach((agent, i) => {
// Wander logic
agent.wanderTimer -= delta;
if (agent.wanderTimer <= 0) {
agent.wanderTimer = 3 + Math.random() * 5;
agent.targetPos.set(
agent.station.x + (Math.random() - 0.5) * 4,
0,
agent.station.z + (Math.random() - 0.5) * 4
);
}
agent.group.position.lerp(agent.targetPos, delta * 0.5);
agent.orb.position.y = 3 + Math.sin(elapsed * 2 + i) * 0.15;
agent.halo.rotation.z = elapsed * 0.5;
agent.halo.scale.setScalar(1 + Math.sin(elapsed * 3 + i) * 0.1);
agent.orb.material.emissiveIntensity = 2 + Math.sin(elapsed * 4 + i) * 1;
});
updateAgents(elapsed, delta);
// Animate Power Meter
powerMeterBars.forEach((bar, i) => {
@@ -1420,6 +1507,125 @@ function onResize() {
composer.setSize(w, h);
}
// ═══ AGENT IDLE ANIMATION ═══
function updateAgents(elapsed, delta) {
const ATTENTION_RADIUS = 7;
const terminalFacing = new THREE.Vector3(0, 0, -8); // batcave terminal bank Z
agents.forEach((agent, i) => {
const stationWorld = new THREE.Vector3(agent.station.x, 0, agent.station.z);
// ── Attention system: face player when close ──
const toPlayer = new THREE.Vector3(
playerPos.x - agent.group.position.x,
0,
playerPos.z - agent.group.position.z
);
const playerDist = toPlayer.length();
const playerNearby = playerDist < ATTENTION_RADIUS && !agent.activityLocked;
if (playerNearby) {
const targetAngle = Math.atan2(toPlayer.x, toPlayer.z);
const currentAngle = agent.group.rotation.y;
const diff = ((targetAngle - currentAngle + Math.PI * 3) % (Math.PI * 2)) - Math.PI;
agent.group.rotation.y += diff * Math.min(delta * 3, 1);
}
// ── State machine (skip if activity locked or player nearby) ──
if (!playerNearby && !agent.activityLocked) {
agent.stateTimer -= delta;
if (agent.stateTimer <= 0) {
agent.state = pickNextState(agent);
switch (agent.state) {
case AGENT_STATES.IDLE:
agent.stateTimer = 4 + Math.random() * 6;
agent.targetPos.copy(stationWorld);
break;
case AGENT_STATES.PACING:
agent.stateTimer = 8 + Math.random() * 6;
agent.pacingIdx = 0;
break;
case AGENT_STATES.LOOKING:
agent.stateTimer = 4 + Math.random() * 4;
agent.lookAngle = agent.group.rotation.y;
break;
case AGENT_STATES.READING:
agent.stateTimer = 5 + Math.random() * 5;
agent.targetPos.copy(stationWorld);
break;
}
}
// ── Movement per state ──
if (agent.state === AGENT_STATES.PACING) {
const wp = agent.pacingPath[agent.pacingIdx];
const toWp = new THREE.Vector3(wp.x - agent.group.position.x, 0, wp.z - agent.group.position.z);
if (toWp.length() < 0.3) {
agent.pacingIdx = (agent.pacingIdx + 1) % agent.pacingPath.length;
} else {
agent.group.position.addScaledVector(toWp.normalize(), delta * 1.2);
agent.group.rotation.y += (Math.atan2(toWp.x, toWp.z) - agent.group.rotation.y) * Math.min(delta * 4, 1);
}
} else if (agent.state === AGENT_STATES.READING) {
// Face the terminal bank
const toTerminal = new THREE.Vector3(
terminalFacing.x - agent.group.position.x,
0,
terminalFacing.z - agent.group.position.z
);
const targetAngle = Math.atan2(toTerminal.x, toTerminal.z);
agent.group.rotation.y += (targetAngle - agent.group.rotation.y) * Math.min(delta * 2, 1);
agent.group.position.lerp(agent.targetPos, delta * 0.4);
} else if (agent.state === AGENT_STATES.LOOKING) {
// Slow environmental scan left/right
agent.lookAngle += Math.sin(elapsed * agent.lookSpeed + i) * delta * 0.8;
agent.group.rotation.y += (agent.lookAngle - agent.group.rotation.y) * Math.min(delta * 1.5, 1);
agent.group.position.lerp(agent.targetPos, delta * 0.3);
} else {
// IDLE — drift gently back to station
agent.group.position.lerp(agent.targetPos, delta * 0.3);
}
}
// ── Orb & halo animation ──
const bobAmt = agent.activityState === ACTIVITY_STATES.THINKING ? 0.25 : 0.15;
agent.orb.position.y = 3 + Math.sin(elapsed * 2 + i) * bobAmt;
agent.halo.rotation.z = elapsed * 0.5;
agent.halo.scale.setScalar(1 + Math.sin(elapsed * 3 + i) * 0.1);
const baseEmissive = agent.activityState === ACTIVITY_STATES.NONE ? 2 : 3;
agent.orb.material.emissiveIntensity = baseEmissive + Math.sin(elapsed * 4 + i) * 1;
// ── Activity indicator animation ──
if (agent.activityState !== ACTIVITY_STATES.NONE) {
// Floating bob
agent.indicator.group.position.y = 4.2 + Math.sin(elapsed * 2 + i * 1.3) * 0.1;
if (agent.activityState === ACTIVITY_STATES.WAITING) {
const pulse = 0.7 + Math.sin(elapsed * 4 + i) * 0.3;
agent.indicator.waitMesh.scale.setScalar(pulse);
agent.indicator.waitMesh.material.opacity = 0.5 + pulse * 0.35;
} else if (agent.activityState === ACTIVITY_STATES.THINKING) {
agent.indicator.thinkMesh.rotation.y = elapsed * 2.5;
agent.indicator.thinkMesh.rotation.x = elapsed * 1.5;
} else if (agent.activityState === ACTIVITY_STATES.PROCESSING) {
agent.indicator.procMesh.rotation.z = elapsed * 4;
agent.indicator.procMesh.rotation.x = Math.sin(elapsed * 1.2) * 0.5;
}
// Billboard — indicator faces camera
const toCamera = new THREE.Vector3(
camera.position.x - agent.group.position.x,
0,
camera.position.z - agent.group.position.z
);
if (toCamera.length() > 0.01) {
agent.indicator.group.rotation.y = Math.atan2(toCamera.x, toCamera.z);
}
}
});
}
// ═══ AGENT SIMULATION ═══
function simulateAgentThought() {
const agentIds = ['timmy', 'kimi', 'claude', 'perplexity'];