Gif export format not the same on windows than on mac

[fffiloni]

Hello, their seems to be a bug when exporting Gif on Windows.

Here’s what we get on Chrome running in MacOS: https://upload.cat/1e70d59401a5aee3

Format is respecting the settings i configured.

Here’s what we get on Chrome running on Windows10:

http://goorlik.free.fr/screen33/moblitz-animation.gif

Canvas is in up and left corner, and the export is formatting beyond the boudaries i configured in settings.

You can experience it here : https://solomotion.herokuapp.com

[WenheLI]

I see the problem. Can I have the source code that you capture the screen and transform it into gif? I just want to reproduce the bug.

[fffiloni]

What i have is that :

recorder = p5Gif.capture();
recorder.settings.width = 720*2;
recorder.settings.height = 405*2;

For an unknown reason, i had to initialize the recorder before i create the canvas, otherwise i got a p5 error. This is the error i get, when i initialized recorder after createCanvas:

p5gif.min.js:11099 Uncaught TypeError: this.settings.canvas.getContext is not a function
    at new t (p5gif.min.js:11099)
    at Function.value (p5gif.min.js:11895)
    at setup (sketch.js:103)
    at p5.<anonymous> (p5.js:49458)
    at p5._runIfPreloadsAreDone (p5.js:49407)
    at p5.<anonymous> (p5.js:49393)
    at new p5 (p5.js:49676)
    at _globalInit (p5.js:49079)

maybe the two bugs are related

[fffiloni]

SOLUTION: Detect user platform:

SO on MacOS i have to double the dimensions of the recorder capturing size to be able to capture the entire canvas. On Windows, i don't have to double dimensions.

var platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';

    //Note: Initialize recorder for Gif export
    recorder = p5Gif.capture();
    recorder.settings.width = 720*2;
    recorder.settings.height = 405*2;
    recorder.settings.framerate = 12;

    console.log(os);
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';

    //Note: Initialize recorder for Gif export
    recorder = p5Gif.capture();
    recorder.settings.width = 720;
    recorder.settings.height = 405;
    recorder.settings.framerate = 12;

    console.log(os);
  } 

I hope it can helps !

[WenheLI]

Thanks for your solution to the different platform thing! I will look into it. Previously, @fffiloni mentioned the bug that you need to init the recorder first. Can I have a look of your code snippet? It works fine in my environment to init first.

[meiamsome]

@fffiloni Looks like that might be a case of pixelDensity that's caused by 'retina' displays? does calling pixelDensity(1) in your setup make the platforms behave the same as eachother?

[fffiloni]

@meiamsome Good point! I have no longer time to check this tonight, but i think you are rigth with the pixelDensity();

[fffiloni]

@ WenheLI I just resolved the bug on the init order. My variable canvas was not declared globally. Doing it like this WORKS.

let canvas;
let recorder;

function setup() {
canvas = createCanvas(720, 405);
canvas.parent('canvascontainer');

recorder = p5Gif.capture();
}

[fffiloni]

@meiamsome @WenheLI

Okay i just tried with the pixelDensity(1);and it fixes the problem on being forced to double dimensions. But not everybody will have the hint to think about that MacOS Retina specific thing.

Maybe we should try to prevent it in p5Gif ?

Anyway, i hope that all my discoveries doing mistakes help you to improve the process ! ;)

[WenheLI]

Sure, I will update it later! @fffiloni @meiamsome This is a really helpful discussion!

[WenheLI]

Fix pixelDensity problem by e39403ebed29908e556c47553a84aff75754921c