Lightning Spider Leg Effect Following a Moving Target on a Grid

HTML

CSS

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let animationFrameId; // Track the current animation frame ID

// Set canvas dimensions to 100% width and height of the viewport
function setCanvasSize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

// Initial setting of canvas size
setCanvasSize();

// Adjust canvas size on window resize and reset entities if needed
window.addEventListener('resize', () => {
  setCanvasSize();
  initializeEntities();
  startAnimation();  // Restart animation with new canvas size
});

// Global configuration variables
const numParticles = 1000;               // Number of white points on the grid
const numLegs = 8;                      // Number of legs for Entity A (Spider)
const numEntitiesA = 5;                 // Giới hạn số lượng Entity A tối đa để tránh treo trình duyệt
const batchSize = 2;                     // Number of Entity A to create per batch
const minDistanceBetweenA = 80;          // Minimum distance between Entity A instances (calculated from the central point only)
const orbitRadius = 4;                   // Orbit radius for Entity A around Entity B
const orbitSpeed = 0.05;                 // Orbit speed for Entity A around Entity B
const legAttachmentRadius = 200;         // Radius within which legs attach to surrounding white points
const entityBWidth = 20;                 // Width of square for Entity B
const entityBHeight = 20;                // Height of square for Entity B
const entityBColor = 'red';              // Color of square for Entity B
const entityARadius = 8;                 // Radius of circle for Entity A
const entityAColor = 'white';            // Color for Entity A (circle and legs)
const legSegments = 20;                  // Number of segments per leg for Entity A
const legSegmentJitterMin = 5;           // Minimum jitter for each segment to create lightning effect
const legSegmentJitterMax = 20;          // Maximum jitter for each segment to create lightning effect
const legGlowIntensity = 15;             // Glow intensity for legs
const legGlowColor = 'rgba(255, 255, 255, 0.8)'; // Glow color for legs (white)
const fps = 60;                          // Frame rate limit

let lastRender = 0; // Stores last frame render timestamp

// Arrays to store particles and entities
let particles = [];
let entitiesA = [];
let entityB;

// Create random white points on the black canvas background
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

draw() {
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
    ctx.fill();
  }
}

// Create square-shaped Entity B
class EntityB {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

move() {
    const directions = [
      { dx: 10, dy: 0 },
      { dx: -10, dy: 0 },
      { dx: 0, dy: 10 },
      { dx: 0, dy: -10 }
    ];

// Choose random direction to move
    const direction = directions[Math.floor(Math.random() * directions.length)];
    this.x = (this.x + direction.dx + canvas.width) % canvas.width;
    this.y = (this.y + direction.dy + canvas.height) % canvas.height;
  }

draw() {
    ctx.fillStyle = entityBColor;
    ctx.fillRect(this.x - entityBWidth / 2, this.y - entityBHeight / 2, entityBWidth, entityBHeight);
  }
}

// Create lightning-like effect by splitting leg into multiple segments
function drawLightningLeg(startX, startY, endX, endY) {
  const dx = (endX - startX) / legSegments;
  const dy = (endY - startY) / legSegments;

let currentX = startX;
  let currentY = startY;

ctx.beginPath();
  ctx.moveTo(startX, startY);

for (let i = 0; i < legSegments; i++) {
    // Add random jitter to each segment within the specified min and max range
    const offsetX = (Math.random() - 0.5) * (Math.random() * (legSegmentJitterMax - legSegmentJitterMin) + legSegmentJitterMin);
    const offsetY = (Math.random() - 0.5) * (Math.random() * (legSegmentJitterMax - legSegmentJitterMin) + legSegmentJitterMin);

// Calculate the next point position
    const nextX = currentX + dx + offsetX;
    const nextY = currentY + dy + offsetY;

ctx.lineTo(nextX, nextY);

// Update current position
    currentX = nextX;
    currentY = nextY;
  }

// Connect to the final endpoint
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

// Create "spider" Entity A with neon glow effect and jagged legs
class EntityA {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.angle = Math.random() * Math.PI * 2; // Initial angle to orbit around Entity B
    this.legs = Array.from({ length: numLegs }, () => ({ x: x, y: y, target: null }));
  }

update(targetX, targetY, particles) {
    const distanceToTarget = Math.hypot(targetX - this.x, targetY - this.y);

if (distanceToTarget < orbitRadius * 2) {
      // When close to Entity B, orbit around it
      this.angle += orbitSpeed;
      this.x = targetX + orbitRadius * Math.cos(this.angle);
      this.y = targetY + orbitRadius * Math.sin(this.angle);
    } else {
      // Move toward Entity B if further than orbit radius
      this.x += (targetX - this.x) * 0.05;
      this.y += (targetY - this.y) * 0.05;
    }

// Find white points within attachment radius for legs
    const nearbyParticles = particles.filter(particle => 
      Math.hypot(particle.x - this.x, particle.y - this.y) <= legAttachmentRadius
    );

// Update legs to attach to nearby points within the radius
    this.legs.forEach((leg, index) => {
      const closestParticle = nearbyParticles[index % nearbyParticles.length];
      if (closestParticle) {
        leg.x += (closestParticle.x - leg.x) * 0.2;
        leg.y += (closestParticle.y - leg.y) * 0.2;
      }
    });
  }

draw() {
    // Draw spider body with neon glow effect
    ctx.shadowColor = 'rgba(255, 255, 255, 0.8)';
    ctx.shadowBlur = 10;
    ctx.fillStyle = entityAColor;
    ctx.beginPath();
    ctx.arc(this.x, this.y, entityARadius, 0, Math.PI * 2);
    ctx.fill();

// Disable glow for body, enable glow for legs
    ctx.shadowColor = legGlowColor;
    ctx.shadowBlur = legGlowIntensity;
    ctx.strokeStyle = entityAColor;
    ctx.lineWidth = 1;
    
    // Draw legs with lightning effect
    this.legs.forEach(leg => {
      drawLightningLeg(this.x, this.y, leg.x, leg.y);
    });

// Disable glow after drawing legs
    ctx.shadowBlur = 0;
  }
}

// Calculate distance between two points (used for central points of Entity A only)
function distance(x1, y1, x2, y2) {
  return Math.hypot(x2 - x1, y2 - y1);
}

// Generate a unique position for each Entity A, ensuring they are not too close
function generateUniquePosition(existingEntities, minDistance) {
  let validPosition;
  let attempts = 0;
  do {
    validPosition = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height
    };
    attempts++;
  } while (existingEntities.some(entity => distance(entity.x, entity.y, validPosition.x, validPosition.y) < minDistance) && attempts < 100);
  return validPosition;
}

// Function to initialize entities in batches
function initializeEntitiesBatch(startIndex) {
  for (let i = 0; i < batchSize && startIndex + i < numEntitiesA; i++) {
    const position = generateUniquePosition(entitiesA, minDistanceBetweenA);
    entitiesA.push(new EntityA(position.x, position.y));
  }

if (entitiesA.length < numEntitiesA) {
    setTimeout(() => initializeEntitiesBatch(entitiesA.length), 100); // Delay between batches
  }
}

// Initialize or reset entities and particles
function initializeEntities() {
  particles = Array.from({ length: numParticles }, () => new Particle(
    Math.random() * canvas.width,
    Math.random() * canvas.height
  ));

entitiesA = []; // Clear previous instances
  initializeEntitiesBatch(0); // Start batch initialization for Entity A

entityB = new EntityB(Math.random() * canvas.width, Math.random() * canvas.height);
}

// Start or restart the animation
function startAnimation() {
  if (animationFrameId) cancelAnimationFrame(animationFrameId); // Cancel any previous animation frames
  animate();  // Start new animation loop
}

// Animation loop function
function animate(timestamp) {
  if (timestamp - lastRender < 1000 / fps) {
    animationFrameId = requestAnimationFrame(animate);
    return;
  }
  lastRender = timestamp;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach(particle => particle.draw());
  entityB.move();
  entityB.draw();

entitiesA.forEach(entityA => {
    entityA.update(entityB.x, entityB.y, particles);
    entityA.draw();
  });

animationFrameId = requestAnimationFrame(animate);
}

// Initialize entities and start the animation initially
initializeEntities();
startAnimation();

Preview: Lightning Spider Leg Effect Following a Moving Target on a Grid

By me a coffee

<body>

@polyxgo

PolyXGO

This feature creates a “spider” entity with legs that attach to surrounding points on a grid as it follows a designated target. Each leg has a glowing effect, bending and flickering naturally like lightning as the “spider” moves. The code allows customization of leg behavior, glow intensity, and movement radius.

HTML

CSS

JavaScript

Preview: Lightning Spider Leg Effect Following a Moving Target on a Grid

Login

Register