Gemma 4 31B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Interactive Aquarium</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #001b3d;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            pointer-events: none;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        .instruction {
            font-size: 1.2rem;
            opacity: 0.8;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <div id="ui">
        <h1>Digital Aquarium</h1>
        <p class="instruction">Move your mouse to scare the fish!</p>
    </div>

    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';

        // --- Configuration ---
        const FISH_COUNT = 40;
        const AQUARIUM_SIZE = 20;
        const REPEL_DISTANCE = 4;
        const REPEL_STRENGTH = 0.15;
        const RETURN_SPEED = 0.02;

        let scene, camera, renderer, clock;
        let fishArray = [];
        let mouse = new THREE.Vector2(-1000, -1000);
        let raycaster = new THREE.Raycaster();

        init();
        animate();

        function init() {
            // Scene & Camera
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x001b3d);
            scene.fog = new THREE.Fog(0x001b3d, 10, 50);

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

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.body.appendChild(renderer.domElement);

            clock = new THREE.Clock();

            // Lights
            const ambientLight = new THREE.AmbientLight(0x404040, 2);
            scene.add(ambientLight);

            const pointLight = new THREE.PointLight(0xffffff, 100);
            pointLight.position.set(0, 10, 0);
            scene.add(pointLight);

            const blueLight = new THREE.PointLight(0x00ffff, 50);
            blueLight.position.set(-10, -5, 5);
            scene.add(blueLight);

            // Aquarium Box (Glass effect)
            const boxGeo = new THREE.BoxGeometry(AQUARIUM_SIZE, AQUARIUM_SIZE, AQUARIUM_SIZE);
            const boxMat = new THREE.MeshPhongMaterial({
                color: 0xaaaaff,
                transparent: true,
                opacity: 0.1,
                side: THREE.BackSide
            });
            const aquarium = new THREE.Mesh(boxGeo, boxMat);
            scene.add(aquarium);

            // Sand/Floor
            const floorGeo = new THREE.PlaneGeometry(AQUARIUM_SIZE, AQUARIUM_SIZE);
            const floorMat = new THREE.MeshPhongMaterial({ color: 0xc2b280 });
            const floor = new THREE.Mesh(floorGeo, floorMat);
            floor.rotation.x = -Math.PI / 2;
            floor.position.y = -AQUARIUM_SIZE / 2;
            scene.add(floor);

            // Create Fish
            const colors = [0xff6600, 0xffff00, 0x00ffcc, 0xff00ff, 0xffaa00];
            
            for (let i = 0; i < FISH_COUNT; i++) {
                createFish(colors[Math.floor(Math.random() * colors.length)]);
            }

            window.addEventListener('resize', onWindowResize);
            window.addEventListener('mousemove', onMouseMove);
        }

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

            // Body - Simple elongated sphere/cone
            const bodyGeo = new THREE.ConeGeometry(0.3, 1, 8);
            bodyGeo.rotateX(Math.PI / 2);
            const bodyMat = new THREE.MeshPhongMaterial({ color: color });
            const body = new THREE.Mesh(bodyGeo, bodyMat);
            group.add(body);

            // Tail
            const tailGeo = new THREE.TriangleGeometry(); // Mocked by scaled plane
            const tailMesh = new THREE.Mesh(
                new THREE.PlaneGeometry(0.4, 0.4),
                bodyMat
            );
            tailMesh.position.z = -0.6;
            tailMesh.rotation.y = Math.PI;
            group.add(tailMesh);

            // Random starting position
            group.position.set(
                (Math.random() - 0.5) * (AQUARIUM_SIZE * 0.8),
                (Math.random() - 0.5) * (AQUARIUM_SIZE * 0.8),
                (Math.random() - 0.5) * (AQUARIUM_SIZE * 0.8)
            );

            // Fish Logic
            const fish = {
                mesh: group,
                velocity: new THREE.Vector3(
                    (Math.random() - 0.5) * 0.1,
                    (Math.random() - 0.5) * 0.1,
                    (Math.random() - 0.5) * 0.1
                ),
                targetPos: new THREE.Vector3(
                    (Math.random() - 0.5) * AQUARIUM_SIZE,
                    (Math.random() - 0.5) * AQUARIUM_SIZE,
                    (Math.random() - 0.5) * AQUARIUM_SIZE
                ),
                phase: Math.random() * Math.PI * 2
            };

            scene.add(group);
            fishArray.push(fish);
        }

        function onMouseMove(event) {
            // Normalized device coordinates
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        }

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

        function animate() {
            requestAnimationFrame(animate);
            const time = clock.getElapsedTime();

            // Map mouse to 3D space via raycaster
            raycaster.setFromCamera(mouse, camera);
            const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
            const mouseWorldPos = new THREE.Vector3();
            raycaster.ray.intersectPlane(plane, mouseWorldPos);

            fishArray.forEach(fish => {
                // 1. Natural movement towards target
                const toTarget = new THREE.Vector3().subVectors(fish.targetPos, fish.mesh.position).normalize();
                fish.velocity.addScaledVector(toTarget, 0.001);

                // 2. Repel from mouse
                const distToMouse = fish.mesh.position.distanceTo(mouseWorldPos);
                if (distToMouse < REPEL_DISTANCE) {
                    const repelDir = new THREE.Vector3().subVectors(fish.mesh.position, mouseWorldPos).normalize();
                    const force = (REPEL_DISTANCE - distToMouse) / REPEL_DISTANCE;
                    fish.velocity.addScaledVector(repelDir, force * REPEL_STRENGTH);
                }

                // 3. Boundary check (keep inside aquarium)
                const pos = fish.mesh.position;
                const limit = AQUARIUM_SIZE / 2;
                if (Math.abs(pos.x) > limit) fish.velocity.x *= -1;
                if (Math.abs(pos.y) > limit) fish.velocity.y *= -1;
                if (Math.abs(pos.z) > limit) fish.velocity.z *= -1;

                // 4. Apply physics
                fish.velocity.multiplyScalar(0.98); // friction
                fish.mesh.position.add(fish.velocity);

                // 5. Update rotation to look where it's swimming
                const lookTarget = new THREE.Vector3().addVectors(fish.mesh.position, fish.velocity);
                fish.mesh.lookAt(lookTarget);

                // 6. Tail animation (wobble)
                fish.mesh.children[1].rotation.y = Math.sin(time * 10 + fish.phase) * 0.5;

                // 7. Change target occasionally
                if (Math.random() < 0.01) {
                    fish.targetPos.set(
                        (Math.random() - 0.5) * AQUARIUM_SIZE,
                        (Math.random() - 0.5) * AQUARIUM_SIZE,
                        (Math.random() - 0.5) * AQUARIUM_SIZE
                    );
                }
            });

            renderer.render(scene, camera);
        }
    </script>
</body>
</html>