57bf47f724
- Implement Nostr event stream visualization - Add js/nostr-event-visualizer.js with particle visualization - Add docs/nostr-event-visualizer.md with documentation - Add script to index.html Addresses issue #874: [NEXUS] Implement Nostr Event Stream Visualization Features: 1. Connect to Nostr relay via WebSocket 2. Subscribe to event stream 3. Visualize events as colored particles 4. Color-coded by event type (text_note, recommend_server, etc.) 5. Animated particle system with turbulence 6. Reconnect on disconnect Event types visualized: - text_note: Blue particles - recommend_server: Gold particles - contact_list: Cyan particles - encrypted_direct_message: Pink particles Components: - NostrEventVisualizer: Main visualization class - Particle system: Three.js points - Color manager: Event type colors - Animation engine: Particle movement and pulsing
456 lines
14 KiB
JavaScript
456 lines
14 KiB
JavaScript
/**
|
|
* Nostr Event Stream Visualization
|
|
* Issue #874: [NEXUS] Implement Nostr Event Stream Visualization
|
|
*
|
|
* Visualize incoming Nostr events as data streams or particles flowing through
|
|
* the Nexus, representing the agent's connection to the wider mesh.
|
|
*/
|
|
|
|
class NostrEventVisualizer {
|
|
constructor(options = {}) {
|
|
this.relayUrl = options.relayUrl || 'wss://relay.nostr.info';
|
|
this.maxEvents = options.maxEvents || 100;
|
|
this.particleCount = options.particleCount || 50;
|
|
this.streamSpeed = options.streamSpeed || 1.0;
|
|
this.particleSize = options.particleSize || 0.5;
|
|
|
|
this.ws = null;
|
|
this.events = [];
|
|
this.particles = [];
|
|
this.scene = null;
|
|
this.camera = null;
|
|
this.renderer = null;
|
|
|
|
this.isConnected = false;
|
|
this.reconnectAttempts = 0;
|
|
this.maxReconnectAttempts = 5;
|
|
|
|
// Callbacks
|
|
this.onEvent = options.onEvent || (() => {});
|
|
this.onConnect = options.onConnect || (() => {});
|
|
this.onDisconnect = options.onDisconnect || (() => {});
|
|
this.onError = options.onError || console.error;
|
|
|
|
// Event types to visualize
|
|
this.eventTypes = options.eventTypes || [
|
|
'text_note',
|
|
'recommend_server',
|
|
'contact_list',
|
|
'encrypted_direct_message'
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Initialize the visualization
|
|
*/
|
|
init(scene, camera, renderer) {
|
|
this.scene = scene;
|
|
this.camera = camera;
|
|
this.renderer = renderer;
|
|
|
|
// Create particle system for event visualization
|
|
this.createParticleSystem();
|
|
|
|
console.log('[NostrVisualizer] Initialized');
|
|
}
|
|
|
|
/**
|
|
* Create particle system for event visualization
|
|
*/
|
|
createParticleSystem() {
|
|
// Create geometry for particles
|
|
const geometry = new THREE.BufferGeometry();
|
|
const positions = new Float32Array(this.particleCount * 3);
|
|
const colors = new Float32Array(this.particleCount * 3);
|
|
const sizes = new Float32Array(this.particleCount);
|
|
|
|
// Initialize particles
|
|
for (let i = 0; i < this.particleCount; i++) {
|
|
// Random position in a sphere
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(2 * Math.random() - 1);
|
|
const r = 50 + Math.random() * 50;
|
|
|
|
positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
|
|
positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
|
|
positions[i * 3 + 2] = r * Math.cos(phi);
|
|
|
|
// Color based on event type
|
|
colors[i * 3] = 0.3; // R
|
|
colors[i * 3 + 1] = 0.8; // G
|
|
colors[i * 3 + 2] = 1.0; // B
|
|
|
|
sizes[i] = this.particleSize;
|
|
|
|
// Store particle data
|
|
this.particles.push({
|
|
index: i,
|
|
x: positions[i * 3],
|
|
y: positions[i * 3 + 1],
|
|
z: positions[i * 3 + 2],
|
|
vx: (Math.random() - 0.5) * 0.1,
|
|
vy: (Math.random() - 0.5) * 0.1,
|
|
vz: (Math.random() - 0.5) * 0.1,
|
|
color: { r: 0.3, g: 0.8, b: 1.0 },
|
|
size: this.particleSize,
|
|
event: null
|
|
});
|
|
}
|
|
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
|
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
|
|
|
|
// Create material
|
|
const material = new THREE.PointsMaterial({
|
|
size: this.particleSize,
|
|
vertexColors: true,
|
|
transparent: true,
|
|
opacity: 0.8,
|
|
blending: THREE.AdditiveBlending
|
|
});
|
|
|
|
// Create points
|
|
this.particleSystem = new THREE.Points(geometry, material);
|
|
this.scene.add(this.particleSystem);
|
|
|
|
console.log('[NostrVisualizer] Particle system created');
|
|
}
|
|
|
|
/**
|
|
* Connect to Nostr relay
|
|
*/
|
|
connect() {
|
|
if (this.isConnected) {
|
|
console.warn('[NostrVisualizer] Already connected');
|
|
return;
|
|
}
|
|
|
|
console.log(`[NostrVisualizer] Connecting to ${this.relayUrl}...`);
|
|
|
|
try {
|
|
this.ws = new WebSocket(this.relayUrl);
|
|
|
|
this.ws.onopen = () => {
|
|
console.log('[NostrVisualizer] Connected to Nostr relay');
|
|
this.isConnected = true;
|
|
this.reconnectAttempts = 0;
|
|
|
|
// Subscribe to events
|
|
this.subscribe();
|
|
|
|
// Call connect callback
|
|
this.onConnect();
|
|
};
|
|
|
|
this.ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
this.handleEvent(data);
|
|
} catch (error) {
|
|
console.error('[NostrVisualizer] Failed to parse event:', error);
|
|
}
|
|
};
|
|
|
|
this.ws.onclose = () => {
|
|
console.log('[NostrVisualizer] Disconnected from Nostr relay');
|
|
this.isConnected = false;
|
|
|
|
// Call disconnect callback
|
|
this.onDisconnect();
|
|
|
|
// Attempt reconnect
|
|
this.scheduleReconnect();
|
|
};
|
|
|
|
this.ws.onerror = (error) => {
|
|
console.error('[NostrVisualizer] WebSocket error:', error);
|
|
this.onError(error);
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error('[NostrVisualizer] Failed to connect:', error);
|
|
this.onError(error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Subscribe to Nostr events
|
|
*/
|
|
subscribe() {
|
|
if (!this.isConnected || !this.ws) {
|
|
console.warn('[NostrVisualizer] Not connected');
|
|
return;
|
|
}
|
|
|
|
// Create subscription for recent events
|
|
const subscription = {
|
|
"REQ": "nexus-stream",
|
|
"filters": [{
|
|
"kinds": [1, 2, 3, 4], // text_note, recommend_server, contact_list, encrypted_direct_message
|
|
"limit": 50
|
|
}]
|
|
};
|
|
|
|
this.ws.send(JSON.stringify(subscription));
|
|
console.log('[NostrVisualizer] Subscribed to Nostr events');
|
|
}
|
|
|
|
/**
|
|
* Handle incoming Nostr event
|
|
*/
|
|
handleEvent(data) {
|
|
// Skip subscription confirmation
|
|
if (data[0] === 'EVENT' && data[1] === 'nexus-stream') {
|
|
const event = data[2];
|
|
|
|
// Check if event type should be visualized
|
|
if (this.eventTypes.includes(this.getEventType(event.kind))) {
|
|
this.visualizeEvent(event);
|
|
this.onEvent(event);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get event type name from kind
|
|
*/
|
|
getEventType(kind) {
|
|
const types = {
|
|
1: 'text_note',
|
|
2: 'recommend_server',
|
|
3: 'contact_list',
|
|
4: 'encrypted_direct_message'
|
|
};
|
|
return types[kind] || 'unknown';
|
|
}
|
|
|
|
/**
|
|
* Visualize an event as a particle
|
|
*/
|
|
visualizeEvent(event) {
|
|
// Add event to queue
|
|
this.events.push({
|
|
event: event,
|
|
timestamp: Date.now(),
|
|
visualized: false
|
|
});
|
|
|
|
// Limit queue size
|
|
if (this.events.length > this.maxEvents) {
|
|
this.events.shift();
|
|
}
|
|
|
|
// Update particle for this event
|
|
this.updateParticleForEvent(event);
|
|
}
|
|
|
|
/**
|
|
* Update particle for an event
|
|
*/
|
|
updateParticleForEvent(event) {
|
|
// Find a particle to update
|
|
const particle = this.particles.find(p => !p.event);
|
|
|
|
if (!particle) {
|
|
// All particles are in use, recycle oldest
|
|
const oldest = this.particles.reduce((a, b) =>
|
|
(a.event && a.event.timestamp < b.event.timestamp) ? a : b
|
|
);
|
|
this.resetParticle(oldest);
|
|
this.updateParticleWithEvent(oldest, event);
|
|
} else {
|
|
this.updateParticleWithEvent(particle, event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update particle with event data
|
|
*/
|
|
updateParticleWithEvent(particle, event) {
|
|
// Set event data
|
|
particle.event = event;
|
|
|
|
// Set color based on event type
|
|
const colors = {
|
|
'text_note': { r: 0.3, g: 0.8, b: 1.0 }, // Blue
|
|
'recommend_server': { r: 1.0, g: 0.8, b: 0.3 }, // Gold
|
|
'contact_list': { r: 0.3, g: 1.0, b: 0.8 }, // Cyan
|
|
'encrypted_direct_message': { r: 1.0, g: 0.3, b: 0.8 } // Pink
|
|
};
|
|
|
|
const eventType = this.getEventType(event.kind);
|
|
particle.color = colors[eventType] || { r: 0.5, g: 0.5, b: 0.5 };
|
|
|
|
// Update geometry
|
|
this.updateParticleGeometry(particle);
|
|
|
|
console.log(`[NostrVisualizer] Visualized ${eventType} event`);
|
|
}
|
|
|
|
/**
|
|
* Reset particle to default state
|
|
*/
|
|
resetParticle(particle) {
|
|
particle.event = null;
|
|
particle.color = { r: 0.3, g: 0.8, b: 1.0 };
|
|
particle.size = this.particleSize;
|
|
|
|
// Random position
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(2 * Math.random() - 1);
|
|
const r = 50 + Math.random() * 50;
|
|
|
|
particle.x = r * Math.sin(phi) * Math.cos(theta);
|
|
particle.y = r * Math.sin(phi) * Math.sin(theta);
|
|
particle.z = r * Math.cos(phi);
|
|
|
|
this.updateParticleGeometry(particle);
|
|
}
|
|
|
|
/**
|
|
* Update particle geometry
|
|
*/
|
|
updateParticleGeometry(particle) {
|
|
if (!this.particleSystem) return;
|
|
|
|
const geometry = this.particleSystem.geometry;
|
|
const positions = geometry.attributes.position.array;
|
|
const colors = geometry.attributes.color.array;
|
|
const sizes = geometry.attributes.size.array;
|
|
|
|
// Update position
|
|
positions[particle.index * 3] = particle.x;
|
|
positions[particle.index * 3 + 1] = particle.y;
|
|
positions[particle.index * 3 + 2] = particle.z;
|
|
|
|
// Update color
|
|
colors[particle.index * 3] = particle.color.r;
|
|
colors[particle.index * 3 + 1] = particle.color.g;
|
|
colors[particle.index * 3 + 2] = particle.color.b;
|
|
|
|
// Update size
|
|
sizes[particle.index] = particle.size;
|
|
|
|
// Mark attributes as needing update
|
|
geometry.attributes.position.needsUpdate = true;
|
|
geometry.attributes.color.needsUpdate = true;
|
|
geometry.attributes.size.needsUpdate = true;
|
|
}
|
|
|
|
/**
|
|
* Update visualization
|
|
*/
|
|
update(deltaTime) {
|
|
if (!this.particleSystem) return;
|
|
|
|
// Update particle positions
|
|
for (const particle of this.particles) {
|
|
// Move particle
|
|
particle.x += particle.vx * this.streamSpeed * deltaTime;
|
|
particle.y += particle.vy * this.streamSpeed * deltaTime;
|
|
particle.z += particle.vz * this.streamSpeed * deltaTime;
|
|
|
|
// Add some turbulence
|
|
particle.vx += (Math.random() - 0.5) * 0.01;
|
|
particle.vy += (Math.random() - 0.5) * 0.01;
|
|
particle.vz += (Math.random() - 0.5) * 0.01;
|
|
|
|
// Limit velocity
|
|
const maxVel = 0.5;
|
|
particle.vx = Math.max(-maxVel, Math.min(maxVel, particle.vx));
|
|
particle.vy = Math.max(-maxVel, Math.min(maxVel, particle.vy));
|
|
particle.vz = Math.max(-maxVel, Math.min(maxVel, particle.vz));
|
|
|
|
// Keep particles in bounds
|
|
const maxDist = 100;
|
|
if (Math.abs(particle.x) > maxDist) particle.vx *= -0.5;
|
|
if (Math.abs(particle.y) > maxDist) particle.vy *= -0.5;
|
|
if (Math.abs(particle.z) > maxDist) particle.vz *= -0.5;
|
|
|
|
// Update geometry
|
|
this.updateParticleGeometry(particle);
|
|
}
|
|
|
|
// Pulse particles with events
|
|
const time = Date.now() * 0.001;
|
|
for (const particle of this.particles) {
|
|
if (particle.event) {
|
|
// Pulse size for particles with events
|
|
particle.size = this.particleSize * (1 + 0.2 * Math.sin(time * 3 + particle.index));
|
|
this.updateParticleGeometry(particle);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Schedule reconnection
|
|
*/
|
|
scheduleReconnect() {
|
|
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
|
|
console.error('[NostrVisualizer] Max reconnect attempts reached');
|
|
return;
|
|
}
|
|
|
|
const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
|
|
|
|
console.log(`[NostrVisualizer] Reconnecting in ${delay / 1000}s...`);
|
|
|
|
setTimeout(() => {
|
|
this.reconnectAttempts++;
|
|
this.connect();
|
|
}, delay);
|
|
}
|
|
|
|
/**
|
|
* Disconnect from Nostr relay
|
|
*/
|
|
disconnect() {
|
|
console.log('[NostrVisualizer] Disconnecting...');
|
|
|
|
if (this.ws) {
|
|
this.ws.close();
|
|
this.ws = null;
|
|
}
|
|
|
|
this.isConnected = false;
|
|
|
|
// Clear particles
|
|
for (const particle of this.particles) {
|
|
this.resetParticle(particle);
|
|
}
|
|
|
|
console.log('[NostrVisualizer] Disconnected');
|
|
}
|
|
|
|
/**
|
|
* Get visualization status
|
|
*/
|
|
getStatus() {
|
|
return {
|
|
connected: this.isConnected,
|
|
relayUrl: this.relayUrl,
|
|
eventCount: this.events.length,
|
|
particleCount: this.particles.length,
|
|
activeParticles: this.particles.filter(p => p.event).length,
|
|
reconnectAttempts: this.reconnectAttempts
|
|
};
|
|
}
|
|
}
|
|
|
|
// Export for use in other modules
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = NostrEventVisualizer;
|
|
}
|
|
|
|
// Global instance for browser use
|
|
if (typeof window !== 'undefined') {
|
|
window.NostrEventVisualizer = NostrEventVisualizer;
|
|
|
|
// Auto-initialize when scene is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// This would be called when Three.js scene is initialized
|
|
// window.nostrVisualizer = new NostrEventVisualizer();
|
|
// window.nostrVisualizer.init(scene, camera, renderer);
|
|
});
|
|
} |