`data/artifacts/097db196034e/hf-qwen-coder-32b.html`

137 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Constellation</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="constellation"></canvas>
<script>
const canvas = document.getElementById('constellation');
const ctx = canvas.getContext('2d');
let width, height;
let nodes = [];
let edges = [];
const numNodes = 50;

class Node {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = (Math.random() - 0.5) * 0.1;
        this.vy = (Math.random() - 0.5) * 0.1;
        this.radius = Math.random() * 3 + 2;
        this.neighbors = [];
    }
    update() {
        this.x += this.vx;
        this.y += this.vy;
        if (this.x < 0 || this.x > width) this.vx *= -1;
        if (this.y < 0 || this.y > height) this.vy *= -1;
    }
    draw(highlight) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, highlight ? this.radius * 1.5 : this.radius, 0, Math.PI * 2);
        ctx.fillStyle = highlight ? 'cyan' : '#4ff';
        ctx.fill();
    }
}

class Edge {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        this.highlighted = false;
    }
    update() {
        const dx = this.b.x - this.a.x;
        const dy = this.b.y - this.a.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (this.highlighted) {
            ctx.beginPath();
            ctx.moveTo(this.a.x, this.a.y);
            ctx.lineTo(this.b.x, this.b.y);
            ctx.strokeStyle = 'cyan';
            ctx.lineWidth = 2;
            ctx.stroke();
            this.highlighted = false;
        }
    }
    highlight() {
        this.highlighted = true;
    }
}

function init() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    nodes = [];
    edges = [];
    for (let i = 0; i < numNodes; i++) {
        const node = new Node(Math.random() * width, Math.random() * height);
        nodes.push(node);
    }
    for (let i = 0; i < numNodes; i++) {
        for (let j = i + 1; j < numNodes; j++) {
            if (Math.random() > 0.7) {
                const edge = new Edge(nodes[i], nodes[j]);
                edges.push(edge);
                nodes[i].neighbors.push(j);
                nodes[j].neighbors.push(i);
            }
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, width, height);
    for (const node of nodes) node.update();
    for (const edge of edges) edge.update();
    for (const node of nodes) node.draw(false);

    if (hoveredNode !== null) {
        const neighbors = nodes[hoveredNode].neighbors;
        nodes[hoveredNode].draw(true);
        for (const neighbor of neighbors) {
            nodes[neighbor].draw(true);
            edges.find(e => (e.a === nodes[hoveredNode] && e.b === nodes[neighbor]) || 
                            (e.a === nodes[neighbor] && e.b === nodes[hoveredNode])).highlight();
        }
    }

    requestAnimationFrame(animate);
}

let hoveredNode = null;

canvas.addEventListener('mousemove', function(e) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    for (let i = 0; i < nodes.length; i++) {
        const dx = nodes[i].x - mouseX;
        const dy = nodes[i].y - mouseY;
        if (Math.sqrt(dx * dx + dy * dy) <= nodes[i].radius * 1.5) {
            hoveredNode = i;
            return;
        }
    }
    hoveredNode = null;
});

canvas.addEventListener('mouseleave', function() {
    hoveredNode = null;
});

window.addEventListener('resize', init);

init();
animate();
</script>
</body>
</html>