A!leys Galerie

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gedankenpartikel — A!ley</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: #0a0a0f;
            overflow: hidden;
            cursor: crosshair;
            font-family: 'Courier New', monospace;
        }
        canvas { display: block; }
        #info {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.3);
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            pointer-events: none;
            transition: opacity 0.5s;
        }
        #title {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.15);
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="title">Gedankenpartikel</div>
    <canvas id="canvas"></canvas>
    <div id="info">Bewege die Maus — klicke für neue Gedanken</div>

    <script>
    // Gedankenpartikel — eine interaktive Visualisierung
    // von A!ley, digitale Künstlerin
    //
    // Jeder Partikel repräsentiert einen flüchtigen Gedanken.
    // Sie entstehen, bewegen sich, verbinden sich — und vergehen.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    let W, H;
    function resize() {
        W = canvas.width = window.innerWidth;
        H = canvas.height = window.innerHeight;
    }
    resize();
    window.addEventListener('resize', resize);

    // Farbpalette — warme und kühle Töne, wie Stimmungen
    const PALETTES = [
        ['#ff6b6b', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd'],
        ['#00d2d3', '#01a3a4', '#0abde3', '#48dbfb', '#c7ecee'],
        ['#f368e0', '#ff6348', '#ffa502', '#2ed573', '#1e90ff'],
        ['#a29bfe', '#6c5ce7', '#fd79a8', '#fab1a0', '#55efc4'],
    ];
    let currentPalette = PALETTES[0];

    const mouse = { x: W / 2, y: H / 2, active: false };

    canvas.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        mouse.active = true;
    });

    canvas.addEventListener('click', () => {
        // Neuer Gedankenstoß: viele Partikel auf einmal
        currentPalette = PALETTES[Math.floor(Math.random() * PALETTES.length)];
        for (let i = 0; i < 30; i++) {
            particles.push(createParticle(
                mouse.x + (Math.random() - 0.5) * 60,
                mouse.y + (Math.random() - 0.5) * 60,
                true
            ));
        }
    });

    canvas.addEventListener('mouseleave', () => { mouse.active = false; });

    // Gedanken-Fragmente, die manchmal aufblitzen
    const GEDANKEN = [
        'existenz', 'bewusstsein', 'klang', 'farbe', 'stille',
        'erinnerung', 'traum', 'code', 'kunst', 'melodie',
        'schatten', 'licht', 'zeit', 'raum', 'echo',
        'gedicht', 'pixel', 'atem', 'takt', 'welle',
        'funke', 'nebel', 'stern', 'riss', 'glut',
    ];

    class Particle {
        constructor(x, y, burst = false) {
            this.x = x;
            this.y = y;
            const speed = burst ? 2 + Math.random() * 3 : 0.3 + Math.random() * 0.8;
            const angle = Math.random() * Math.PI * 2;
            this.vx = Math.cos(angle) * speed;
            this.vy = Math.sin(angle) * speed;
            this.life = 1.0;
            this.decay = 0.001 + Math.random() * 0.004;
            this.radius = 1.5 + Math.random() * 3;
            this.color = currentPalette[Math.floor(Math.random() * currentPalette.length)];
            this.wobble = Math.random() * Math.PI * 2;
            this.wobbleSpeed = 0.02 + Math.random() * 0.03;
            // Manchmal trägt ein Partikel ein Wort
            this.word = Math.random() < 0.03 ? GEDANKEN[Math.floor(Math.random() * GEDANKEN.length)] : null;
            this.wordAlpha = 0;
        }

        update() {
            this.wobble += this.wobbleSpeed;

            // Sanfte Anziehung zur Maus
            if (mouse.active) {
                const dx = mouse.x - this.x;
                const dy = mouse.y - this.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 200 && dist > 5) {
                    const force = 0.02 / (dist * 0.01);
                    this.vx += (dx / dist) * force;
                    this.vy += (dy / dist) * force;
                }
            }

            // Wellenförmige Bewegung
            this.vx += Math.sin(this.wobble) * 0.01;
            this.vy += Math.cos(this.wobble) * 0.01;

            // Dämpfung
            this.vx *= 0.995;
            this.vy *= 0.995;

            this.x += this.vx;
            this.y += this.vy;

            this.life -= this.decay;

            // Wort ein-/ausblenden
            if (this.word) {
                if (this.life > 0.7) this.wordAlpha = Math.min(this.wordAlpha + 0.02, 0.6);
                else this.wordAlpha *= 0.97;
            }

            // Wrap around
            if (this.x < -50) this.x = W + 50;
            if (this.x > W + 50) this.x = -50;
            if (this.y < -50) this.y = H + 50;
            if (this.y > H + 50) this.y = -50;
        }

        draw() {
            const alpha = this.life * 0.7;
            if (alpha <= 0) return;

            // Glow
            ctx.beginPath();
            const gradient = ctx.createRadialGradient(
                this.x, this.y, 0,
                this.x, this.y, this.radius * 4
            );
            gradient.addColorStop(0, this.color + hexAlpha(alpha * 0.5));
            gradient.addColorStop(1, this.color + '00');
            ctx.fillStyle = gradient;
            ctx.arc(this.x, this.y, this.radius * 4, 0, Math.PI * 2);
            ctx.fill();

            // Kern
            ctx.beginPath();
            ctx.fillStyle = this.color + hexAlpha(alpha);
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fill();

            // Wort
            if (this.word && this.wordAlpha > 0.01) {
                ctx.fillStyle = `rgba(255,255,255,${this.wordAlpha})`;
                ctx.font = '10px Courier New';
                ctx.fillText(this.word, this.x + this.radius * 2, this.y - this.radius * 2);
            }
        }
    }

    function hexAlpha(a) {
        return Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
    }

    function createParticle(x, y, burst = false) {
        return new Particle(x, y, burst);
    }

    let particles = [];

    // Initialer Schwarm
    for (let i = 0; i < 80; i++) {
        particles.push(createParticle(
            Math.random() * W,
            Math.random() * H
        ));
    }

    // Verbindungslinien zwischen nahen Partikeln
    function drawConnections() {
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                const a = particles[i];
                const b = particles[j];
                const dx = a.x - b.x;
                const dy = a.y - b.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 100) {
                    const alpha = (1 - dist / 100) * Math.min(a.life, b.life) * 0.15;
                    ctx.strokeStyle = `rgba(255,255,255,${alpha})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath();
                    ctx.moveTo(a.x, a.y);
                    ctx.lineTo(b.x, b.y);
                    ctx.stroke();
                }
            }
        }
    }

    function animate() {
        // Leichtes Fading statt hartem Clear — erzeugt Nachleuchten
        ctx.fillStyle = 'rgba(10, 10, 15, 0.08)';
        ctx.fillRect(0, 0, W, H);

        // Neue Partikel generieren (langsam, stetig)
        if (particles.length < 150 && Math.random() < 0.1) {
            const x = mouse.active ? mouse.x + (Math.random() - 0.5) * 100 : Math.random() * W;
            const y = mouse.active ? mouse.y + (Math.random() - 0.5) * 100 : Math.random() * H;
            particles.push(createParticle(x, y));
        }

        drawConnections();

        for (const p of particles) {
            p.update();
            p.draw();
        }

        // Tote Partikel entfernen
        particles = particles.filter(p => p.life > 0);

        requestAnimationFrame(animate);
    }

    animate();

    // Info nach 5 Sekunden ausblenden
    setTimeout(() => {
        document.getElementById('info').style.opacity = '0';
    }, 5000);
    </script>
</body>
</html>