Spiders Following Moving Objects Animation Using HTML, CSS, and JavaScript

HTML

CSS

JavaScript

class PolySpiders {
    static canvas;
    static ctx;
    static w = 0;
    static h = 0;
    static spiders = [];
    static targets = [];
    static targetsConfig = [];
    static targetRadius = 26;
    static targetBorderWidth = 3;
    static spiderColor = "#ffffff";
    static initInterval = 100;
    static targetSpeed = { min: 1, max: 6 };
    static animationFrameId;

static init(config) {
        PolySpiders.canvas = document.getElementById(config.element);
        PolySpiders.ctx = PolySpiders.canvas.getContext("2d");
        PolySpiders.resizeCanvas();

PolySpiders.targetsConfig = config.targets || [];
        PolySpiders.numSpiders = config.spiders?.number || 1;
        PolySpiders.numLegs = config.spiders?.leg || 3;
        PolySpiders.targetSpeed = config.speed || { min: 1, max: 6 };

PolySpiders.clear();
        PolySpiders.initializeTargets();
        PolySpiders.initializeSpiders();
        PolySpiders.animate();
    }

static clear() {
        if (PolySpiders.animationFrameId) {
            cancelAnimationFrame(PolySpiders.animationFrameId);
        }
        PolySpiders.spiders = [];
        PolySpiders.targets = [];
    }

static resizeCanvas() {
        PolySpiders.w = PolySpiders.canvas.width = window.innerWidth;
        PolySpiders.h = PolySpiders.canvas.height = window.innerHeight;
    }

static initializeSpiders() {
        PolySpiders.spiders = [];
        for (let i = 0; i < PolySpiders.numSpiders; i++) {
            PolySpiders.spiders.push(PolySpiders.spawnSpider());
        }
    }

static initializeTargets() {
        PolySpiders.targetsConfig.forEach((config) => {
            PolySpiders.targets.push({
                x: PolySpiders.rnd(PolySpiders.w - 2 * (PolySpiders.targetRadius + PolySpiders.targetBorderWidth)) + PolySpiders.targetRadius + PolySpiders.targetBorderWidth,
                y: PolySpiders.rnd(PolySpiders.h - 2 * (PolySpiders.targetRadius + PolySpiders.targetBorderWidth)) + PolySpiders.targetRadius + PolySpiders.targetBorderWidth,
                dx: PolySpiders.rnd(-2, 2),
                dy: PolySpiders.rnd(-2, 2),
                speed: PolySpiders.rnd(PolySpiders.targetSpeed.max - PolySpiders.targetSpeed.min) + PolySpiders.targetSpeed.min,
                color: config.color,
                title: config.title,
                borderColor: config.borderColor
            });
        });
    }

static spawnSpider() {
        const pts = PolySpiders.many(333, () => ({
            x: PolySpiders.rnd(PolySpiders.w),
            y: PolySpiders.rnd(PolySpiders.h),
            len: 0,
            r: 0,
        }));

const pts2 = PolySpiders.many(PolySpiders.numLegs, (i) => ({
            x: Math.cos((i / PolySpiders.numLegs) * Math.PI * 2),
            y: Math.sin((i / PolySpiders.numLegs) * Math.PI * 2),
        }));

let seed = PolySpiders.rnd(100);
        let x = PolySpiders.rnd(PolySpiders.w);
        let y = PolySpiders.rnd(PolySpiders.h);
        let kx = PolySpiders.rnd(0.5, 0.5);
        let ky = PolySpiders.rnd(0.5, 0.5);
        let walkRadius = PolySpiders.pt(PolySpiders.rnd(50, 50), PolySpiders.rnd(50, 50));
        let r = PolySpiders.w / PolySpiders.rnd(100, 150);

// Assign a random label to each spider
        const labels = ["PolyDev", "PolyXGO", "PolyUtilities"];
        const label = labels[Math.floor(Math.random() * labels.length)];

function paintPt(pt) {
            pts2.forEach((pt2) => {
                if (!pt.len) return;
                PolySpiders.drawLine(
                    PolySpiders.lerp(x + pt2.x * r, pt.x, pt.len * pt.len),
                    PolySpiders.lerp(y + pt2.y * r, pt.y, pt.len * pt.len),
                    x + pt2.x * r,
                    y + pt2.y * r
                );
            });
            PolySpiders.drawCircle(pt.x, pt.y, pt.r, PolySpiders.spiderColor);
        }

return {
            label: label,
            tick(t) {
                const closestTarget = PolySpiders.findClosestTarget(x, y);
                const speedFactor = closestTarget.speed * 0.3;
                const selfMoveX = Math.cos(t * kx + seed) * walkRadius.x * speedFactor;
                const selfMoveY = Math.sin(t * ky + seed) * walkRadius.y * speedFactor;
                let fx = closestTarget.x + selfMoveX;
                let fy = closestTarget.y + selfMoveY;

x += Math.min(PolySpiders.w / 100, (fx - x) / 20);
                y += Math.min(PolySpiders.h / 100, (fy - y) / 20);

let i = 0;
                pts.forEach((pt) => {
                    const dx = pt.x - x,
                        dy = pt.y - y;
                    const len = Math.hypot(dx, dy);
                    let r = Math.min(2, PolySpiders.w / len / 5);
                    pt.t = 0;
                    const increasing = len < PolySpiders.w / 10 && i++ < 8;
                    let dir = increasing ? 0.1 : -0.1;
                    if (increasing) r *= 1.5;
                    pt.r = r;
                    pt.len = Math.max(0, Math.min(pt.len + dir, 1));
                    paintPt(pt);
                });

// Draw label if it exists
                if (this.label) {
                    PolySpiders.ctx.fillStyle = "#ffffff";
                    PolySpiders.ctx.font = "10px Arial";
                    PolySpiders.ctx.textAlign = "center";
                    PolySpiders.ctx.fillText(this.label, x, y - 15);
                }
            },
        };
    }

static findClosestTarget(x, y) {
        let closest = null;
        let minDistance = Infinity;
        PolySpiders.targets.forEach((target) => {
            const distance = Math.hypot(target.x - x, target.y - y);
            if (distance < minDistance) {
                minDistance = distance;
                closest = target;
            }
        });
        return closest;
    }

static animate() {
        PolySpiders.ctx.fillStyle = "#000";
        PolySpiders.ctx.fillRect(0, 0, PolySpiders.w, PolySpiders.h);

PolySpiders.targets.forEach(PolySpiders.updateTargetPosition);
        PolySpiders.targets.forEach(PolySpiders.drawTargetCircle);

PolySpiders.drawLabels();

let t = performance.now() / 1000;
        PolySpiders.spiders.forEach((spider) => spider.tick(t));

PolySpiders.animationFrameId = requestAnimationFrame(PolySpiders.animate.bind(this));
    }

static updateTargetPosition(target) {
        target.x += target.dx * target.speed;
        target.y += target.dy * target.speed;
        const boundaryOffset = PolySpiders.targetRadius + PolySpiders.targetBorderWidth;

if (target.x <= boundaryOffset || target.x >= PolySpiders.w - boundaryOffset) {
            target.dx *= -1;
            target.speed = PolySpiders.rnd(PolySpiders.targetSpeed.max - PolySpiders.targetSpeed.min) + PolySpiders.targetSpeed.min;
            target.x = Math.max(boundaryOffset, Math.min(target.x, PolySpiders.w - boundaryOffset));
        }
        if (target.y <= boundaryOffset || target.y >= PolySpiders.h - boundaryOffset) {
            target.dy *= -1;
            target.speed = PolySpiders.rnd(PolySpiders.targetSpeed.max - PolySpiders.targetSpeed.min) + PolySpiders.targetSpeed.min;
            target.y = Math.max(boundaryOffset, Math.min(target.y, PolySpiders.h - boundaryOffset));
        }
    }

static drawTargetCircle(target) {
        PolySpiders.drawCircle(target.x, target.y, PolySpiders.targetRadius, target.color);
        PolySpiders.ctx.strokeStyle = target.borderColor;
        PolySpiders.ctx.lineWidth = PolySpiders.targetBorderWidth;
        PolySpiders.ctx.setLineDash([5, 3]);
        PolySpiders.ctx.lineDashOffset -= 1;
        PolySpiders.ctx.beginPath();
        PolySpiders.ctx.arc(target.x, target.y, PolySpiders.targetRadius + PolySpiders.targetBorderWidth, 0, 2 * Math.PI);
        PolySpiders.ctx.stroke();

PolySpiders.ctx.fillStyle = "#ffffff";
        PolySpiders.ctx.font = "10px Arial";
        PolySpiders.ctx.textAlign = "center";
        PolySpiders.ctx.textBaseline = "middle";
        PolySpiders.ctx.fillText(target.title, target.x, target.y);
    }

static drawLabels() {
        PolySpiders.ctx.font = "12px Arial";
        PolySpiders.ctx.textAlign = "left";
        PolySpiders.ctx.textBaseline = "top";
        let yPosition = 10;

PolySpiders.targets.forEach((target) => {
            PolySpiders.ctx.fillStyle = "#ffffff";
            PolySpiders.ctx.fillRect(10, yPosition, 140, 20);

PolySpiders.ctx.fillStyle = "#000000";
            const speedText = `${target.title}: ${(target.speed * 15).toFixed(0)} km/h`;
            PolySpiders.ctx.fillText(speedText, 15, yPosition + 5);

yPosition += 25;
        });
    }

static rnd(x = 1, dx = 0) {
        return Math.random() * x + dx;
    }

static drawCircle(x, y, r, color) {
        PolySpiders.ctx.fillStyle = color;
        PolySpiders.ctx.beginPath();
        PolySpiders.ctx.ellipse(x, y, r, r, 0, 0, Math.PI * 2);
        PolySpiders.ctx.fill();
    }

static drawLine(x0, y0, x1, y1) {
        PolySpiders.ctx.beginPath();
        PolySpiders.ctx.moveTo(x0, y0);
        PolySpiders.many(100, (i) => {
            i = (i + 1) / 100;
            let x = PolySpiders.lerp(x0, x1, i);
            let y = PolySpiders.lerp(y0, y1, i);
            let k = PolySpiders.noise(x / 5 + x0, y / 5 + y0) * 2;
            PolySpiders.ctx.lineTo(x + k, y + k);
        });
        PolySpiders.ctx.strokeStyle = PolySpiders.spiderColor;
        PolySpiders.ctx.stroke();
    }

static many(n, f) {
        return [...Array(n)].map((_, i) => f(i));
    }

static lerp(a, b, t) {
        return a + (b - a) * t;
    }

static noise(x, y, t = 101) {
        let w0 = Math.sin(0.3 * x + 1.4 * t + 2.0 + 2.5 * Math.sin(0.4 * y - 1.3 * t + 1.0));
        let w1 = Math.sin(0.2 * y + 1.5 * t + 2.8 + 2.3 * Math.sin(0.5 * x - 1.2 * t + 0.5));
        return w0 + w1;
    }

static pt(x, y) {
        return { x, y };
    }
}

let _targets = [
    { color: "#ff0000", title: "Tiền Điện", borderColor: "#00ff00" },
    { color: "#ff0000", title: "Tiền Nước", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Internet", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Ăn", borderColor: "#ffff00" },
    { color: "#ff0000", title: "Tiền Cafe", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Nhà", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Cưới", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Xăng", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Nợ", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền 4G", borderColor: "#ff00ff" },
    { color: "#ff0000", title: "Tiền Tà Tữa", borderColor: "#ff00ff" }
];

let _spiders = { number: 1, leg: 4 };

function reinitializePolySpiders() {
    PolySpiders.init({
        element: 'polydev',
        targets: _targets,
        spiders: _spiders,
        speed: { min: 1, max: 6 }
    });
}

window.addEventListener('resize', () => {
    reinitializePolySpiders();
});
reinitializePolySpiders();

Preview: Spiders Following Moving Objects Animation Using HTML, CSS, and JavaScript

By me a coffee

<body>

@polyxgo

PolyXGO

Lớp PolySpiders mô phỏng tương tác dạng các đối tượng “con nhện” ảo di chuyển và nhắm mục tiêu trong một môi trường canvas HTML5. Đây là mô hình mô phỏng đồ họa, trong đó các con nhện di chuyển xung quanh và đuổi theo các mục tiêu đã đặt sẵn trên màn hình. Các thuộc tính và phương thức, cho phép cấu hình các thông số tùy ý.

Ứng dụng có thể sử dụng để phát triển các modules, plugins có tính năng yêu cầu các phần tử theo sau các phần tử khác.

Cấu trúc và Các Tính Năng Chính

Cấu hình Canvas và các Thuộc tính Cơ bản:
- canvas: Đối tượng canvas HTML5, nơi hiển thị tất cả đồ họa.
- ctx: Bối cảnh (context) 2D của canvas để vẽ các hình và hiệu ứng.
- w và h: Chiều rộng và chiều cao của canvas, thay đổi khi kích thước cửa sổ thay đổi.
- spiders và targets: Danh sách các “con nhện” và “mục tiêu” trong canvas.
- targetRadius và targetBorderWidth: Cấu hình bán kính và độ rộng đường viền cho các mục tiêu.
Khởi tạo và Cấu hình Mục tiêu và Nhện:
- init(config): Phương thức khởi tạo, nhận cấu hình và thiết lập các đối tượng như canvas, số lượng nhện, số chân mỗi con nhện, và tốc độ di chuyển của mục tiêu.
- initializeTargets(): Thiết lập vị trí và đặc điểm của mỗi mục tiêu (màu sắc, tiêu đề, tốc độ, viền).
- initializeSpiders(): Tạo các đối tượng nhện với vị trí ngẫu nhiên và hiệu ứng chuyển động chân.
Hoạt động của Nhện và Tương Tác với Mục tiêu:
- spawnSpider(): Tạo mới một con nhện với các tham số về vị trí và kiểu di chuyển. Các nhện được đặt tên ngẫu nhiên từ danh sách như “PolyDev”, “PolyXGO”, “PolyUtilities”.
- findClosestTarget(x, y): Tìm mục tiêu gần nhất với nhện để nhện đuổi theo.
- tick(t): Cập nhật vị trí nhện dựa trên vị trí của mục tiêu gần nhất.
Vẽ và Hiệu ứng Đồ họa:
- animate(): Chạy vòng lặp hoạt hình liên tục, cập nhật vị trí của các mục tiêu và nhện, đồng thời vẽ lại canvas.
- drawCircle() và drawLine(): Vẽ các vòng tròn và đường nối để tạo hiệu ứng chuyển động cho các chân nhện.
- drawTargetCircle(target): Vẽ vòng tròn cho mỗi mục tiêu và hiển thị tiêu đề của mục tiêu đó.
Xử lý Tương tác với Người Dùng và Thay đổi Kích thước:
- Khi cửa sổ thay đổi kích thước, sự kiện resize sẽ được kích hoạt, gọi lại reinitializePolySpiders() để cập nhật kích thước canvas.
- reinitializePolySpiders(): Tái khởi tạo đối tượng PolySpiders với cấu hình mới.

HTML

CSS

JavaScript

Preview: Spiders Following Moving Objects Animation Using HTML, CSS, and JavaScript

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Spiders Following Moving Objects Animation Using HTML, CSS, and JavaScript

Cấu trúc và Các Tính Năng Chính

Login

Register