Breaking News: Grepper is joining You.com. Read the official announcement!

анимация жука, bug animation

Massanino Menso's answered on May 25, 2023 Popularity 1/10 Helpfulness 1/10

related анимация жука js, bug animation js

анимация жука, bug animation

Comment

const container = document.getElementById("bug-container");

const makeCockroach = icon => {
    const vspeed = 100;
    const aspeed = 2 * Math.PI;
    let lastT = 0;
    let lastTargetTime = -100;
    let a = 0;
    let x = 0;
    let y = 0;
    let tx = 0;
    let ty = 0;

    const update = t => {
        if (t >= lastTargetTime + 1.5 + Math.random()) {
            const rect = container.getBoundingClientRect();
            tx = Math.random() * rect.width ;
            ty = Math.random() * rect.height;
            lastTargetTime = t;
        }

        const dt = t - lastT;

        const ta = Math.atan2(ty - y, tx - x);
        for (; a < ta; a += 2 * Math.PI) {
        }
        for (; a > ta; a -= 2 * Math.PI) {
        }
        const a2 = a + 2 * Math.PI;
        if (ta - a < a2 - ta) {
            a = Math.min(ta, a + dt * aspeed);
        } else {
            a = Math.max(ta, a2 - dt * aspeed);
        }

        x += dt * vspeed * Math.cos(a);
        y += dt * vspeed * Math.sin(a);
        icon.style.left = x + "px";
        icon.style.top = y + "px";
        icon.style.transform = "rotate(" + (180 * a / Math.PI - 135) + "deg)";
        lastT = t;
    };

    return {'update': update};
};

const cockroaches = Array.prototype.map.call(
    document.getElementsByClassName("bug-icon"),
    makeCockroach
);

const step = () => {
    const t = performance.now() / 1000;
    for (const cockroach of cockroaches) {
        cockroach.update(t);
    }
    window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);

Popularity 1/10 Helpfulness 1/10 Language css

Source: ru.stackoverflow.com

Link to this answer
Share Copy Link

Contributed on May 25 2023

Massanino Menso's

0 Answers Avg Quality 2/10

Closely Related Answers

анимация жука js, bug animation js

Comment

const container = document.getElementById("bug-container");

const makeCockroach = icon => {
    const vspeed = 100;
    const aspeed = 2 * Math.PI;
    let lastT = 0;
    let lastTargetTime = -100;
    let a = 0;
    let x = 0;
    let y = 0;
    let tx = 0;
    let ty = 0;

    const update = t => {
        if (t >= lastTargetTime + 1.5 + Math.random()) {
            const rect = container.getBoundingClientRect();
            tx = Math.random() * rect.width ;
            ty = Math.random() * rect.height;
            lastTargetTime = t;
        }

        const dt = t - lastT;

        const ta = Math.atan2(ty - y, tx - x);
        for (; a < ta; a += 2 * Math.PI) {
        }
        for (; a > ta; a -= 2 * Math.PI) {
        }
        const a2 = a + 2 * Math.PI;
        if (ta - a < a2 - ta) {
            a = Math.min(ta, a + dt * aspeed);
        } else {
            a = Math.max(ta, a2 - dt * aspeed);
        }

        x += dt * vspeed * Math.cos(a);
        y += dt * vspeed * Math.sin(a);
        icon.style.left = x + "px";
        icon.style.top = y + "px";
        icon.style.transform = "rotate(" + (180 * a / Math.PI - 135) + "deg)";
        lastT = t;
    };

    return {'update': update};
};

const cockroaches = Array.prototype.map.call(
    document.getElementsByClassName("bug-icon"),
    makeCockroach
);

const step = () => {
    const t = performance.now() / 1000;
    for (const cockroach of cockroaches) {
        cockroach.update(t);
    }
    window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);

Popularity 1/10 Helpfulness 1/10 Language css

Source: ru.stackoverflow.com

Link to this answer
Share Copy Link

Contributed on May 25 2023

Massanino Menso's

0 Answers Avg Quality 2/10

анимация жука, bug animation

Contents

More Related Answers

анимация жука, bug animation

Closely Related Answers

анимация жука js, bug animation js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.