"Passing Shader Uniforms" example

[JetStarBlues]

Actual Behaviour

In the "Passing Shader Uniforms" example, the generated image is off-center.

Expected Behaviour

Image is centered.

I think somewhere along the way, the original values got lost.

Would you like to work on the issue?

Yes

[aferriss]

@JetStarBlues What browser are you using? Everything looks correct on my screen.

[JetStarBlues]

Interesting!

I tried it on Windows 10

• Chrome Version 90.0.4430.85 (Official Build) (64-bit)

• Firefox 88.0 (64-bit)

I got similar results on Ubuntu 20.04

• Chrome - Version 90.0.4430.72 (Official Build) (64-bit)
• Firefox - 87.0 (64-bit)

[JetStarBlues]

@aferriss Hey, the screenshot you posted failed to upload... Also curious which browser you were using.

[aferriss]

@JetStarBlues Oops! Re-uploaded. I was using chrome 90, but I also checked in firefox (v88) and safari (v14.03) and it was looking fine in all of those as well. I'm on OSX 10.15 (Catalina)

[JetStarBlues]

(visible confusion)
If you are running on a 64-bit machine, then the only difference is the OS...

I tried opening the site on my phone (Android) on both Chrome and Firefox, and the current code looks slightly off-center...

[JetStarBlues]

@aferriss Curious, how do the following look on you screen (I do not have access to a Mac for testing)

• tweaked version (as per pull request)
• matrix aware version (with values tweaked as per pull request)

Thanks for your time!

[JetStarBlues]

• the matrix aware version renders properly centered on my phone

[aferriss]

Hmm, I'm seeing very different things than you are.

We can skirt the issue entirely by not relying on the resolution values to calculate the shape's position. Here's an updated example that should work the same on every platform

https://editor.p5js.org/aferriss/sketches/uxphKm8AK

[JetStarBlues]

We can skirt the issue entirely by not relying on the resolution values to calculate the shape's position

Oh, I see! Thank you for pinpointing the problem! 🎉🎉

I'm seeing very different things than you are.

I was expecting the results you got. (The matrix-aware version centers correctly on your screen.) But I was mistaken as to why! (Has nothing to do with use of matrix, but rather use of resolution independent calculations as you have pointed out!)

[JetStarBlues]

The new version of the code only works with a 1:1 aspect ratio. Otherwise, the shape is stretched.

• One possible solution is to change the canvas size used in the example from the default of 710x400 to 400x400.

• Another possible solution is to tweak the code to consider the canvas's aspect ratio and use it to scale the uv coordinates. This approach however, has the downside of not working well with matrix-aware coordinates.

  // move the coordinates to where we want to draw the shape
  vec2 pos = vec2(x,y) - coord;
  
  // force 1:1 ratio...
  float ax = resolution.x / resolution.y;
  float ay = resolution.y / resolution.x;
  if ( ax > ay )
  {
    pos.x *= ax;
  }
  if ( ay > ax )
  {
    pos.y *= ay;
  }

[JetStarBlues]

I have update the linked PR accordingly.

[aferriss]

Ah yea, good catch on the scaling!