drawingContext.drawImage causes offset of element on mobile

p5.js Coding Questions
1

Dear all,

I’m working on some of Tim Rodenbrökers code involving a copy() function (Processing-Tutorial: Kinetic Typography 1 • tim rodenbröker creative coding), expanding it and making it ready for web.
This involves replacing the copy() function with drawingContext.drawImage() for performance increase (found here: P5.js copy function slow performance since version 0.10.0).

Doing this works great for desktop; on mobile, however, the pgraphics element (centered on the canvas, usually), moves position. Using the regular copy() function centeres it correctly. The positioning varies according to mobile screen size, I can’t seem to figure out the exact behavior to fix. It’s not the font size, I’ve tried adapting the position to screen.size and document.documentElement.clientWidth, no luck.

let font;
let pg;
//let pgwidth = innerWidth;
//let pgheight = innerHeight;

function setup() {
    font = loadFont("./assets/FGrotesk-Regular.otf");
    createCanvas(innerWidth, innerHeight);
    pg = createGraphics(innerWidth, innerHeight, P2D);
    //framerate could somehow be adapted according to computer performance, somehow?
    frameRate(60);
    pixelDensity(1);
}

function draw() {
    background(0);

    //    pg.beginDraw();
    pg.background(0);
    pg.fill(255);
    pg.textFont(font);
    pg.textSize(380);
    pg.push();
    pg.translate(innerWidth / 2, innerHeight / 2);
    pg.textAlign(CENTER, CENTER);
    pg.text("Enrico", 0, -50);
    pg.text("Gisana", 0, 50);
    pg.pop();
    //    pg.endDraw();

    //tiles could somehow be adapted according to computer performance, somehow?
    let tilesX = 400;
    let tilesY = 20;

    let tileW = int(width / tilesX);
    let tileH = int(height / tilesY);

    for (y = 0; y < tilesY; y++) {
        for (x = 0; x < tilesX; x++) {

            // WARP

            let wave_x = int(sin(frameCount * 0.02 + (x * y) * 0.07) * 100) - (mouseY / 2);
            let wave_y = int(sin(frameCount * 0.02 + (x * y) * 0.07) * 100) - (mouseY / 2);

            //tileW = mouseY / 2;

            if (mouseX - (width / 2) >= 0) {
               wave_x = int(sin(frameCount * 0.02 + ((x / 0.8) * (y/0.2)) * 0.04) * (-1 * (mouseX - (width / 2)) / 30));
            } else {
                wave_x = int(sin(frameCount * 0.02 + ((x / 0.8) * (y/0.2)) * 0.04) * (-1 * (mouseX - (width / 2)) / 30));
            }

            if (mouseY - (height / 2) >= 0) {
                wave_y = int(sin(frameCount * 0.02 + ((x / 0.2) * (y/0.8)) * 0.04) * ((mouseY - (height / 2)) / 30));
            } else {
                wave_y = int(sin(frameCount * 0.02 + ((x / 0.2) * (y/0.8)) * 0.04) * ((mouseY - (height / 2)) / 30));
            }

            // SOURCE
            let sx = x * tileW + wave_x;
            // + wave should be added here 
            let sy = y * tileH - wave_y;
            let sw = tileW;
            let sh = tileH;


            // DESTINATION
            let dx = x * tileW;
            let dy = y * tileH;
            let dw = tileW;
            let dh = tileH;

            drawingContext.drawImage(pg.elt, sx, sy, sw, sh, dx, dy, dw, dh);
        }
    }
}

mobile
mobile379×673 8.32 KB