Problem with x-coordinate of the subsection of the source image in image() on safari. P5JS

p5.js
1

Hi, I have a problem with my work. On all browsers it works correctly only not on safari. I noticed that the error occurs (only on safari) if sx in image() in line 66 is different than 0.

Does anyone have an idea why this is happening?

https://editor.p5js.org/kalwas/sketches/lf5wAAImI

Thanks a lot in advance

2

Oof, that is some surprisingly different behavior. Apparently Safari is not able to draw ranges of an image that are outside of the bounds of the image. So when you use an sx that is negative, or an sx that is positive such that sx + sw is greater than the width of the source image, it blows up and draws nothing :pensive:. As a work around here is some alternate image drawing code that ensures the source range is always within the range of the source image:

      if (sx < 0) {
        // Since the source is left of zero we want to take this content and
        // shift it to the right, we do this by using a source x of 0 and
        // increasing the destination x by -sx
        image(
          pg,
          dx - sx,
          dy,
          dw + sx,
          dh,
          0,
          sy,
          sw + sx,
          sh
        );
      } else {
        // when sx is positive we just need to make sure the source width
        // isn't too big
        image(
          pg,
          dx,
          dy,
          dw - sx,
          dh,
          sx,
          sy,
          sw - sx,
          sh
        );
      }

Note: this works fine with only 1 horizontal tile. it would need more work with multiple.

3

Thanks a lot for your help. I’ve been thinking about this a lot