Make canvas fill viewport initially

[marcus]

This PR updates the project to make the canvas size start off by filling the viewport.

Changes:

1. Canvas Initialization:

   • Changed the canvas initialization to use window.innerWidth and window.innerHeight instead of fixed values
   • Rounded the dimensions to multiples of 4 for better video encoding compatibility

2. Responsive Behavior:

   • Added a window resize event listener that automatically resizes the canvas when the window size changes
   • The resize handler only activates if the canvas is currently at full viewport size
   • When resizing, it updates both the canvas dimensions and the params object values

3. Visualization Updates:

   • Updated the updateCanvasSize function to set the resolution uniform
   • Enhanced the refreshPattern function to ensure it updates the resolution uniform
   • Improved resize event listeners to properly update the WebGL viewport and force redraws

4. CSS Improvements:

   • Added max-height: 100vh to ensure the canvas doesn't exceed the viewport height
   • Added object-fit: contain to maintain the aspect ratio when scaling

These changes ensure that:

• The canvas starts at the exact size of the viewport
• The canvas automatically adjusts when the window is resized
• The shader uniforms are updated with the new resolution when resizing
• The visualization properly updates to match the canvas size

The canvas will now fill the viewport when the page loads, providing a more immersive experience for users. The automatic resizing also makes the application more responsive to different screen sizes and window adjustments.