p5 WebGL - Origin not at center

[JordanMcn]

Hello @raphaelameaume !

I tried to use p5 in WebGL mode (export let rendering = 'p5-webgl';)

In the p5 editor, when I create a box(), it places that box directly at the center of the canvas : https://editor.p5js.org/JordanMcn/sketches/Rdn3uvluj

But in Fragment, it places the top-right corner of the box to the top-right corner of the canvas:

Any ideas why it's happening ? Thanks !

[raphaelameaume]

Hello @JordanMcn! Glad you're trying out Fragment :)

I ported your example to a sample sketch but I'm not able to reproduce your issue, which version of Fragment are you using? You can run fragment -v to print the version.

Here's my sketch with your example:

import p5 from "p5";

export let props = {};

/**
 * @param {object} params
 * @param {HTMLCanvasElement} params.canvas
 * @param {p5} params.p
 * @param {number} params.width
 * @param {number} params.height
 * @param {number} params.pixelRatio
 */
export function setup({ p, width, height }) {}

/**
 * @param {object} params
 * @param {HTMLCanvasElement} params.canvas
 * @param {p5} params.p
 * @param {number} params.width
 * @param {number} params.height
 * @param {number} params.pixelRatio
 * @param {number} params.time
 * @param {number} params.deltaTime
 * @param {number} params.frame
 * @param {number} params.playhead
 * @param {number} params.playcount
 */
export function draw({ p, width, height, time }) {
    p.ortho();
    p.background(5, 22, 47);
    p.fill("white");
    p.box(100);
}

export let rendering = "p5-webgl";

And the result I'm getting which, from my understanding is the expected behaviour?

Can you provide more information about your working environment (browser version, fragment version, OS...) ?

Thanks!

[JordanMcn]

Hey @raphaelameaume ! :)

I thought npx was always taking the latest version but actually it was using v0.1.16 😅

I did npx fragment-tools@latest and it suggested to update it to v0.1.17 !

Now, with the latest version, it's working accurately !

Thanks 🙌

[raphaelameaume]

That's great, thanks!