Animasi Spidey Web menggunakan JavaScript agar mengikuti gerakan mouse/cursor secara real-time. Hubungkan posisi cursor dengan sistem partikel dan objek laba-laba.

var spider = sim.spider(new Vec2(width / 2, -300));

spiderweb.drawParticles = function (ctx, composite) {
    var i;

    for (i in composite.particles) {
        var point = composite.particles[i];

        ctx.beginPath();
        ctx.arc(
            point.pos.x,
            point.pos.y,
            1.3,
            0,
            2 * Math.PI
        );

        ctx.fillStyle = "#7AAA";
        ctx.fill();
    }
};

Tambahkan kode berikut ke script.js. Kode ini merekam posisi cursor, memperhalus pergerakannya, dan menyediakan koordinat target yang dapat digunakan oleh sistem animasi Spidey Web.

const cursor = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2,
    targetX: window.innerWidth / 2,
    targetY: window.innerHeight / 2
};

// Ambil posisi mouse
window.addEventListener("mousemove", (event) => {
    cursor.targetX = event.clientX;
    cursor.targetY = event.clientY;
});

// Dukungan layar sentuh
window.addEventListener("touchmove", (event) => {
    const touch = event.touches[0];

    if (touch) {
        cursor.targetX = touch.clientX;
        cursor.targetY = touch.clientY;
    }
}, { passive: true });

// Pergerakan yang lebih halus
function updateCursor() {
    cursor.x += (cursor.targetX - cursor.x) * 0.12;
    cursor.y += (cursor.targetY - cursor.y) * 0.12;

    requestAnimationFrame(updateCursor);
}

updateCursor();