`data/artifacts/097db196034e/gemma3-12b.html`

163 lines
<!DOCTYPE html>
<html>
<head>
<title>AI Constellation</title>
<style>
body { margin: 0; overflow: hidden; background-color: #111; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="constellationCanvas"></canvas>

<script>
window.onload = function() {
  var canvas = document.getElementById('constellationCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');

  let agents = [];
  let connections = [];
  let messageQueue = []; // Array to hold messages for animation

  // Agent class
  class Agent {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.radius = Math.random() * 8 + 4;
      this.velocity = { x: (Math.random() - 0.5) * 0.5, y: (Math.random() - 0.5) * 0.5 }; // Gentle drift
      this.neighbors = [];
      this.highlighted = false;
    }

    draw(ctx) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(50, 205, 228, 0.7)'; // Cyan glow
      ctx.fill();
      ctx.strokeStyle = this.highlighted ? 'rgba(50, 205, 228, 1)' : 'rgba(50, 205, 228, 0.4)';
      ctx.stroke();
    }

    update() {
      this.x += this.velocity.x;
      this.y += this.velocity.y;

      // Bounce off walls (simple)
      if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
        this.velocity.x = -this.velocity.x;
      }
      if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
        this.velocity.y = -this.velocity.y;
      }

    }
  }

  // Connection class
  class Connection {
    constructor(agent1, agent2) {
      this.agent1 = agent1;
      this.agent2 = agent2;
      this.distance = Math.sqrt((agent1.x - agent2.x)**2 + (agent1.y - agent2.y)**2);
      this.thickness = 2;
      this.pulseSize = this.distance / 4; // Pulse size relative to distance
      this.pulseOffset = 0;
    }

    draw(ctx) {
      let x1 = this.agent1.x;
      let y1 = this.agent1.y;
      let x2 = this.agent2.x;
      let y2 = this.agent2.y;

      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineWidth = this.thickness + Math.sin(this.pulseOffset) * this.pulseSize;
      ctx.strokeStyle = 'rgba(50, 205, 228, 0.6)'; // Cyan glow
      ctx.stroke();

    }

     update() {
        this.pulseOffset += 0.1;
     }
  }


  // Initialize agents (random positions)
  for (let i = 0; i < 30; i++) {
    agents.push(new Agent(Math.random() * canvas.width, Math.random() * canvas.height));
  }

  // Connect agents randomly (sparse network)
  for (let i = 0; i < agents.length; i++) {
    for (let j = i + 1; j < agents.length; j++) {
      if (Math.random() < 0.1) { // Adjust probability for density
        connections.push(new Connection(agents[i], agents[j]));
        agents[i].neighbors.push(agents[j]);
        agents[j].neighbors.push(agents[i]);
      }
    }
  }


  function highlightNeighbors(agent) {
    for (let i = 0; i < agents.length; i++) {
      agents[i].highlighted = false;
    }

    if(agent){
        agent.highlighted = true;
    }
  }

  canvas.addEventListener('mousemove', function(event) {
    let mouseX = event.clientX;
    let mouseY = event.clientY;

    let agentUnderMouse = null;
    for (let i = 0; i < agents.length; i++) {
      const distance = Math.sqrt((mouseX - agents[i].x)**2 + (mouseY - agents[i].y)**2);
      if (distance <= agents[i].radius) {
        agentUnderMouse = agents[i];
        break;
      }
    }

    highlightNeighbors(agentUnderMouse);
  });



  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

    for (let i = 0; i < agents.length; i++) {
      agents[i].update();
      agents[i].draw(ctx);
    }


    for (let i = 0; i < connections.length; i++) {
        connections[i].update();
        connections[i].draw(ctx);
    }

    requestAnimationFrame(animate);
  }

  animate();

  window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // Re-initialize agents and connections if needed (e.g., to adapt to new size)
  });
};
</script>
</body>
</html>