Simple sketch is lagging

[toowren]

Hello,

I have a very simple PixiJS carousel demo with a set of thumbnails constantly traveling from left to right.

But they don't move smoothly, sometimes thumbs jump around as if the system is suspended for a while and that's really strange.

http://isometrika.ru/demo/

http://isometrika.ru/demo/demo.webm

let data = [

    {
        url: "assets/thumb_0.png"
    },
    {
        url: "assets/thumb_1.png"
    },
    {
        url: "assets/thumb_2.png"
    },
    {
        url: "assets/thumb_3.png"
    },
    {
        url: "assets/thumb_4.png"
    },
    {
        url: "assets/thumb_5.png"
    },
    {
        url: "assets/thumb_6.png"
    },
    {
        url: "assets/thumb_7.png"
    },

];

let config = {

    width: 1200,
    height: 768,

    thumbnail: {

        width: 214,
        height: 214,
        y: 384,
        rounded: 10,
        gap: 48,
        offset: 32,
        speed: 2.0

    }

};

let stats, loader = new PIXI.Loader(),
    resources, app, thumbnails = [];

loadTextures();

function loadTextures() {

    data.forEach((d_, i_) => {
        loader.add("thumbnail_" + i_, d_.url);
    })
    loader.load().onComplete.add(function(result_) {
        resources = result_.resources;
        inits();
    });

}

function inits() {

    app = new PIXI.Application({

        width: config.width,
        height: config.height,
        backgroundColor: 0xFFFFFF,
        resolution: window.devicePixelRatio,
        antialias: true

    });

    app.view.style.width = document.getElementById("container").clientWidth + "px";
    app.view.style.height = Math.floor(config.height / config.width * document.getElementById("container").clientWidth) + "px";
    document.getElementById("container").style.height = Math.floor(config.height / config.width * document.getElementById("container").clientWidth) + "px";

    stats = new Stats();
    //stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild(stats.dom);

    generateThumbnails();

    app.ticker.add((delta_) => {

        thumbnails.forEach((t_, i_) => {

            if (t_.x > config.width + config.thumbnail.width) {

                let prev = (i_ - 1) >= 0 ? i_ - 1 : data.length - 1;
                t_.x = thumbnails[prev].x - config.thumbnail.width - config.thumbnail.gap;

            }

            t_.x += config.thumbnail.speed;

        })

        stats.update();

    });

    document.getElementById("container").appendChild(app.view);
    window.addEventListener("resize", onWindowResize);

}

function generateThumbnails() {

    data.forEach((d_, i_) => {

        const thumb = new PIXI.Container();
        thumb.x = config.thumbnail.offset + config.thumbnail.width / 2.0 - config.thumbnail.width * i_ - config.thumbnail.gap * (i_ - 1);
        thumb.y = config.thumbnail.y;
        thumb.name = "thumbnail_" + i_;
        thumb.info = d_.info;

        const thumbMask = new PIXI.Graphics();
        thumbMask.beginFill(0xFFFFFF);
        thumbMask.drawRoundedRect(-config.thumbnail.width / 2.0, -config.thumbnail.height / 2.0, config.thumbnail.width, config.thumbnail.height, config.thumbnail.rounded);
        thumbMask.endFill();
        thumb.addChild(thumbMask);

        thumbIcon = PIXI.Sprite.from(resources["thumbnail_" + i_].texture);
        thumbIcon.width = config.thumbnail.width;
        thumbIcon.height = config.thumbnail.height;
        thumbIcon.anchor.set(0.5, 0.5);
        thumbIcon.mask = thumbMask;
        thumb.addChild(thumbIcon);

        app.stage.addChild(thumb);

        thumbnails.push(thumb);

    });

}

function onWindowResize(event_) {

    app.view.style.width = document.getElementById("container").clientWidth + "px";
    app.view.style.height = Math.floor(config.height / config.width * document.getElementById("container").clientWidth) + "px";
    document.getElementById("container").style.height = Math.floor(config.height / config.width * document.getElementById("container").clientWidth) + "px";

}

 

Any ideas why it's so laggy?

 

Edited November 3, 2022 by toowren

[Exca]

In the thumbnail movement you should calculate the effect of frame delta time. So t_.x += config.thumbnail.speed * delta.