Hiệu Ứng Đối Tượng Bám Theo Đối Tượng Di Chuyển Trên Lưới

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: Hiệu Ứng Đối Tượng Bám Theo Đối Tượng Di Chuyển Trên Lưới

By me a coffee

<body>

@polyxgo

PolyXGO

Tính năng này tạo ra một đối tượng “nhện” với các chân có thể bám vào các điểm xung quanh trên lưới khi di chuyển theo một đối tượng mục tiêu. Các chân hiển thị hiệu ứng phát sáng giống tia sét, uốn cong và giật tự nhiên khi “nhện” di chuyển, tạo ra hiệu ứng trực quan sống động. Code cho phép tùy chỉnh hành vi của chân, cường độ phát sáng và bán kính di chuyển.

HTML

CSS

JavaScript

Preview: Hiệu Ứng Đối Tượng Bám Theo Đối Tượng Di Chuyển Trên Lưới

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Hiệu Ứng Đối Tượng Bám Theo Đối Tượng Di Chuyển Trên Lưới

Login

Register