Zoom In boundries problem with Penrose Tilling App

p5.js Coding Questions
1

with my latest code, it seems as if the boundaries of the space in which the art itself can be in, are smaller then the canvas itself,
how do i know?

Look at the first image:

image
image2518×1279 77.5 KB

this is how the shape looks correctly when you start the app
look at the second image:

image
image2550×1295 102 KB

this is what happened as i try to zoom in, instead of zooming in across all of the entire canvas, even behind where the UI area is correctly, it just zooms in inside a smaller defined space which is not "Fullscreen and takes only about 40% of the entire canvas

What do i want?
-i want the boundaries in which the art is drawn to be bigger than this 40% space area inside the canvas
-i want the boundaries to stretch across 100% of the canvas so when zooming in and out it occurs inside the totality of the canvas size

-it seems there’s a distinction between the canvas itself boundaries, and the boundaries of the space in which the art can be drawn \ generated
-i want the boundaries to be the same, meaning the boundaries of the space in which the art can be drawn, to be as big as the boundaries of the Fullscreen canvas

I can to go where this stems from. any help would be greatly appreciated

1 Like
2

Comment out your initWebGL function. It’s creating problems with p5’s rendering. Your tilingTexture is not rendering with webgl. It might render faster if you use createGraphics( width, height, WEBGL).

The big problem, though, is that your vertex shader is not transforming the aPosition by the modelview and projection matrices.

Replace it with:

const vertShader = `
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
void main() {
    vTexCoord = aTexCoord;
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}`;
3

Thanks a lot friend, you were right. it solved my issue.
ill also try implement your optimization advice.
have a great day ! :100: