Spaces:

IRRbert
/

irr

Running

App Files Files Community

irr / index.html

IRRbert

lass mich das netz mit der Maus bewegen!

b58fde2 verified 4 months ago

raw

history blame contribute delete

12.5 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Neural Network Visualization</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background-color: #000;
	}
	#canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
	}
	.title {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #00f3ff;
	font-family: 'Arial', sans-serif;
	font-size: 3rem;
	text-align: center;
	text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
	opacity: 0.9;
	}
	.subtitle {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-family: 'Arial', sans-serif;
	font-size: 1.5rem;
	text-align: center;
	opacity: 0.7;
	}
	.controls {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-family: 'Arial', sans-serif;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	border-radius: 10px;
	}
	</style>
	</head>
	<body>
	<div id="canvas-container"></div>
	<div class="overlay">
	<div class="title">GENETIC NEURAL NETWORK</div>
	<div class="subtitle">DYNAMIC PATHWAY ACTIVATION</div>
	<div class="controls">Broadcast Visualization</div>
	</div>

	<script>
	// Main Three.js variables
	let scene, camera, renderer;
	let nodes = [];
	let connections = [];
	let connectionLines = [];
	let nodeMeshes = [];
	let lightningGroup = new THREE.Group();
	let networkGroup = new THREE.Group();

	// Configuration
	const NODE_COUNT = 80;
	const CONNECTION_DENSITY = 0.15;
	const NODE_RADIUS = 0.2;
	const CONNECTION_WIDTH = 0.03;
	const ROTATION_SPEED = 0.001;
	const PULSE_SPEED = 0.02;
	const LIGHTNING_CHANCE = 0.005;
	let currentCameraAngle = 0;
	let cameraRadius = 25;
	let targetCameraRadius = 25;

	// Initialize Three.js
	function init() {
	// Create scene
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x000011);
	scene.fog = new THREE.Fog(0x000011, 15, 30);

	// Create camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 25);

	// Create renderer
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);
	document.getElementById('canvas-container').appendChild(renderer.domElement);

	// Add groups to scene
	scene.add(networkGroup);
	scene.add(lightningGroup);

	// Create neural network
	createNodes();
	createConnections();

	// Add ambient light
	const ambientLight = new THREE.AmbientLight(0x222255);
	scene.add(ambientLight);

	// Add directional light
	const directionalLight = new THREE.DirectionalLight(0x00aaff, 1);
	directionalLight.position.set(5, 5, 5);
	scene.add(directionalLight);

	// Add point lights for more dynamic lighting
	const pointLight1 = new THREE.PointLight(0xff00ff, 1, 100);
	pointLight1.position.set(10, 10, 10);
	scene.add(pointLight1);

	const pointLight2 = new THREE.PointLight(0x00ffff, 1, 100);
	pointLight2.position.set(-10, -10, -10);
	scene.add(pointLight2);

	// Handle window resize
	window.addEventListener('resize', onWindowResize);

	// Start animation loop
	animate();
	}

	function createNodes() {
	// Create nodes in a spherical distribution
	for (let i = 0; i < NODE_COUNT; i++) {
	const phi = Math.acos(-1 + (2 * i) / NODE_COUNT);
	const theta = Math.sqrt(NODE_COUNT * Math.PI) * phi;

	const x = 10 * Math.cos(theta) * Math.sin(phi);
	const y = 10 * Math.sin(theta) * Math.sin(phi);
	const z = 10 * Math.cos(phi);

	nodes.push(new THREE.Vector3(x, y, z));

	// Create node mesh
	const geometry = new THREE.SphereGeometry(NODE_RADIUS, 16, 16);
	const material = new THREE.MeshPhongMaterial({
	color: 0x00ffff,
	emissive: 0x0066aa,
	emissiveIntensity: 0.5,
	transparent: true,
	opacity: 0.8
	});

	const nodeMesh = new THREE.Mesh(geometry, material);
	nodeMesh.position.copy(nodes[i]);
	nodeMesh.userData.originalScale = 1;
	nodeMesh.userData.pulsePhase = Math.random() * Math.PI * 2;
	nodeMeshes.push(nodeMesh);
	networkGroup.add(nodeMesh);
	}
	}

	function createConnections() {
	// Create connections between nodes
	for (let i = 0; i < NODE_COUNT; i++) {
	for (let j = i + 1; j < NODE_COUNT; j++) {
	// Randomly create connections based on density
	if (Math.random() < CONNECTION_DENSITY) {
	connections.push([i, j]);

	// Create connection line
	const material = new THREE.LineBasicMaterial({
	color: 0x00aaff,
	transparent: true,
	opacity: 0.3
	});

	const points = [
	nodes[i].clone(),
	nodes[j].clone()
	];

	const geometry = new THREE.BufferGeometry().setFromPoints(points);
	const line = new THREE.Line(geometry, material);
	line.userData.nodes = [i, j];
	line.userData.active = false;
	line.userData.intensity = 0;
	connectionLines.push(line);
	networkGroup.add(line);
	}
	}
	}
	}

	function animateLightning() {
	// Randomly activate connections
	connectionLines.forEach(line => {
	if (Math.random() < LIGHTNING_CHANCE && !line.userData.active) {
	line.userData.active = true;
	line.userData.intensity = 1;
	line.material.color.set(0xffffff);
	line.material.opacity = 1;
	}

	// Animate active connections
	if (line.userData.active) {
	line.userData.intensity -= 0.02;
	line.material.opacity = line.userData.intensity;

	// Add lightning effect
	if (Math.random() < 0.3) {
	line.material.color.set(0xffff00);
	} else {
	line.material.color.set(0xffffff);
	}

	// Deactivate when animation complete
	if (line.userData.intensity <= 0) {
	line.userData.active = false;
	line.material.color.set(0x00aaff);
	line.material.opacity = 0.3;
	}
	}
	});
	}

	function animateNodes() {
	// Pulsing animation for nodes
	const time = Date.now() * 0.001;

	nodeMeshes.forEach((mesh, index) => {
	const pulse = Math.sin(time * PULSE_SPEED + mesh.userData.pulsePhase) * 0.2 + 0.8;
	mesh.scale.set(pulse, pulse, pulse);

	// Color cycling
	const hue = (time * 0.1 + index * 0.01) % 1;
	const color = new THREE.Color().setHSL(hue, 1, 0.5);
	mesh.material.emissive = color;
	});
	}

	function animateNetwork() {
	// Rotate the entire network
	networkGroup.rotation.x += ROTATION_SPEED * 0.5;
	networkGroup.rotation.y += ROTATION_SPEED;

	// Scale pulsing effect for growing/shrinking
	const time = Date.now() * 0.001;
	const scale = Math.sin(time * 0.5) * 0.3 + 0.7;
	networkGroup.scale.set(scale, scale, scale);

	// Dynamic camera movement
	currentCameraAngle += 0.002;
	targetCameraRadius = 20 + Math.sin(time * 0.3) * 5;
	cameraRadius += (targetCameraRadius - cameraRadius) * 0.05;

	camera.position.x = cameraRadius * Math.sin(currentCameraAngle);
	camera.position.z = cameraRadius * Math.cos(currentCameraAngle);
	camera.position.y = Math.sin(time * 0.4) * 5;
	camera.lookAt(scene.position);
	}

	function animate() {
	requestAnimationFrame(animate);

	animateLightning();
	animateNodes();
	animateNetwork();

	renderer.render(scene, camera);
	}
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	// Mouse interaction variables
	let isDragging = false;
	let previousMousePosition = { x: 0, y: 0 };

	// Mouse event handlers
	function onMouseDown(event) {
	isDragging = true;
	previousMousePosition = {
	x: event.clientX,
	y: event.clientY
	};
	}

	function onMouseMove(event) {
	if (!isDragging) return;

	const deltaX = event.clientX - previousMousePosition.x;
	const deltaY = event.clientY - previousMousePosition.y;

	networkGroup.rotation.y += deltaX * 0.01;
	networkGroup.rotation.x += deltaY * 0.01;

	previousMousePosition = {
	x: event.clientX,
	y: event.clientY
	};
	}

	function onMouseUp() {
	isDragging = false;
	}

	// Add mouse event listeners
	function addMouseControls() {
	renderer.domElement.addEventListener('mousedown', onMouseDown, false);
	renderer.domElement.addEventListener('mousemove', onMouseMove, false);
	renderer.domElement.addEventListener('mouseup', onMouseUp, false);
	renderer.domElement.addEventListener('mouseleave', onMouseUp, false);

	// Change cursor style
	renderer.domElement.style.cursor = 'grab';
	}

	// Initialize the visualization
	init();
	addMouseControls();
	</script>
	</body>
	</html>