`data/artifacts/0cb3fc06b069/gemma3-12b.html`

122 lines
<!DOCTYPE html>
<html>
<head>
<title>Particle Word</title>
<style>
body { margin: 0; overflow: hidden; background-color: #111; }
canvas { display: block; }
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  let particles = [];
  let word = "HELLO"; // Change this to the desired word
  let fontSize = 50;
  let particleSize = 3;
  let particleColor = "#fff";
  let speedX = 1;
  let speedY = 1;

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  function initParticles() {
    particles = [];
    const wordWidth = ctx.measureText(word).width;

    for (let i = 0; i < word.length * 5 ; i++) { // More particles for density
      particles.push({
        x: canvas.width / 2 - wordWidth / 2 + Math.random() * wordWidth,
        y: canvas.height / 2 + Math.random() * 50,
        dx: (Math.random() - 0.5) * speedX,
        dy: (Math.random() - 0.5) * speedY,
        charIndex: Math.floor(Math.random() * word.length),
      });
    }
  }

  function drawParticle(particle) {
    ctx.fillStyle = particleColor;
    ctx.font = `${fontSize}px sans-serif`;
    ctx.textAlign = "center";
    ctx.fillText(word[particle.charIndex], particle.x, particle.y);
  }

  function updateParticles() {
    particles.forEach(particle => {
      particle.x += particle.dx;
      particle.y += particle.dy;

      if (particle.x < 0 || particle.x > canvas.width) {
        particle.dx = -particle.dx;
      }
      if (particle.y < 0 || particle.y > canvas.height) {
        particle.dy = -particle.dy;
      }
    });
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    particles.forEach(particle => {
      drawParticle(particle);
    });
  }


  let mouseX = 0;
  let mouseY = 0;
  canvas.addEventListener("mousemove", (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  let scatterEnabled = true;

  function scatterParticles() {
      if(scatterEnabled){
        particles.forEach(particle =>{
            const distance = Math.sqrt((mouseX - particle.x)**2 + (mouseY - particle.y)**2);
            if(distance < 100){
                particle.dx = (Math.random() - 0.5) * speedX * 3;
                particle.dy = (Math.random() - 0.5) * speedY * 3;
            }
        });
      }
  }

    let animationFrameId;


  function animate() {
      updateParticles();
      draw();
      scatterParticles();
      animationFrameId = requestAnimationFrame(animate);
  }



  initParticles();
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initParticles();
  });

  animate();


</script>
</body>
</html>