Update turtles.js (#5044)

Summary

Optimizes window and turtle resizing behavior to feel smoother on high-end devices while preserving performance on lower-end hardware.
The change adapts dynamically based on device capability and avoids introducing overhead where it could cause lag.

Changes
1. Smooth Turtle Decoration Resize (js/turtle.js)

High-end devices (>4 cores):

Turtle decoration resize is animated using a short tween (~200ms) instead of snapping instantly.

Low-end devices:

Retains the original instant resize behavior to avoid performance overhead.

2. Optimized Window Resize Handling (js/turtles.js)

High-end devices:

Window resize events are throttled using requestAnimationFrame, allowing continuous, smooth canvas updates during resize.

Low-end devices:

Keeps the existing 150ms debounce logic so updates occur only after resizing ends.

3. Flicker Handling

An experimental bitmap scaling approach to reduce canvas flicker during resize was reverted.

The current implementation accepts native browser repaint behavior to preserve rendering correctness and simplicity.

Impact

Smoother, more responsive resizing on modern hardware.

No regression or added overhead on lower-end devices.

Improves perceived UI quality without changing existing behavior for beginners or constrained systems.

Author: zealot-zew

js/turtles.js

@@ -1248,15 +1248,32 @@ Turtles.TurtlesView = class {
             __makeBoundary();
         }
 
-        // Debounce the resize event to prevent performance issues
+        // Debounce or throttle the resize event based on device capability
         let resizeTimeout;
+        let ticking = false;
+
         window.addEventListener("resize", () => {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                handleCanvasResize();
-                __makeBoundary();
-                __makeBoundary2();
-            }, 150); // Wait 150ms after the last resize event to execute
+            const isHighEndDevice =
+                navigator.hardwareConcurrency && navigator.hardwareConcurrency >= 4;
+
+            if (isHighEndDevice) {
+                if (!ticking) {
+                    window.requestAnimationFrame(() => {
+                        handleCanvasResize();
+                        __makeBoundary();
+                        __makeBoundary2();
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            } else {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    handleCanvasResize();
+                    __makeBoundary();
+                    __makeBoundary2();
+                }, 150); // Wait 150ms after the last resize event to execute
+            }
         });
 
         return this;