@andresclua/perlindom 0.0.1 → 0.0.3

package/src/index.html

@@ -59,8 +59,8 @@
               background-color: #3498db;
               border-radius: 50%;
               position: absolute;
-              left: calc(50% - 40px); /* 50% - half width */
-              top: calc(50% - 40px); /* 50% - half height */
+              left: calc(50% - 40px);
+              top: calc(50% - 40px);
               filter: blur(5px);
             }
             
@@ -86,6 +86,32 @@
               filter: blur(10px);
             }
             
+            /* Positioning for particles - these are initial positions, PerlinDOM will animate from here */
+            .particle:nth-child(1) {
+              left: 30%;
+              top: 30%;
+            }
+            
+            .particle:nth-child(2) {
+              left: 50%;
+              top: 50%;
+            }
+            
+            .particle:nth-child(3) {
+              left: 70%;
+              top: 70%;
+            }
+            
+            .particle:nth-child(4) {
+              left: 30%;
+              top: 70%;
+            }
+            
+            .particle:nth-child(5) {
+              left: 70%;
+              top: 30%;
+            }
+            
             /* Example 4: Background Effect */
             .bg-container {
               background-color: #34495e;
@@ -403,11 +429,11 @@
           });
         </div>
         <div class="example-container">
-          <div class="particle" style="left: 30%; top: 30%"></div>
-          <div class="particle" style="left: 50%; top: 50%"></div>
-          <div class="particle" style="left: 70%; top: 70%"></div>
-          <div class="particle" style="left: 30%; top: 70%"></div>
-          <div class="particle" style="left: 70%; top: 30%"></div>
+          <div class="particle"></div>
+          <div class="particle"></div>
+          <div class="particle"></div>
+          <div class="particle"></div>
+          <div class="particle"></div>
         </div>
         
         <!-- Example 4: Background Effect -->
@@ -644,6 +670,96 @@
           </div>
         </div>
 
+        <!-- Example 9: Pixel vs. Percentage Values -->
+        <h2>9. Pixel vs. Percentage Values</h2>
+        <div class="code-block">
+          // Pixel-based animation (fixed size)<br>
+          const pixelAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.pixel-element'),<br>
+          &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
+          &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 123<br>
+          });<br><br>
+          
+          // Percentage-based animation (responsive)<br>
+          const percentageAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.percentage-element'),<br>
+          &nbsp;&nbsp;x: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;y: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 123<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="display: flex; justify-content: space-between; height: 100%;">
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Pixel Values (Fixed)</div>
+              <div class="pixel-element" style="width: 80px; height: 80px; background-color: #3498db; border-radius: 50%; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); filter: blur(5px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Resize your browser window - animation range stays the same</div>
+            </div>
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Percentage Values (Responsive)</div>
+              <div class="percentage-element" style="width: 80px; height: 80px; background-color: #e74c3c; border-radius: 50%; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); filter: blur(5px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Resize your browser window - animation range adapts</div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Example 10: Resizable Container with Percentage Values -->
+        <h2>10. Resizable Container with Percentage Values</h2>
+        <div class="code-block">
+          const responsiveAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.responsive-element'),<br>
+          &nbsp;&nbsp;x: { min: '-25%', max: '25%' },<br>
+          &nbsp;&nbsp;y: { min: '-25%', max: '25%' },<br>
+          &nbsp;&nbsp;speed: 0.008,<br>
+          &nbsp;&nbsp;seed: 456<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="height: 100%; position: relative; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; resize: both; min-width: 200px; min-height: 200px; background-color: #f0f0f0;">
+            <div class="responsive-element" style="width: 60px; height: 60px; background-color: #9b59b6; border-radius: 50%; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+            <div style="position: absolute; bottom: 10px; right: 10px; font-size: 12px; color: #7f8c8d;">↘️ Drag this corner to resize the container</div>
+          </div>
+        </div>
+        
+        <!-- Example 11: Mixed Pixel and Percentage Values -->
+        <h2>11. Mixed Pixel and Percentage Values</h2>
+        <div class="code-block">
+          // Horizontal percentage, vertical pixel<br>
+          const horizontalPercentAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.horizontal-percent-element'),<br>
+          &nbsp;&nbsp;x: { min: '-30%', max: '30%' },<br>
+          &nbsp;&nbsp;y: { min: -40, max: 40 },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 789<br>
+          });<br><br>
+          
+          // Horizontal pixel, vertical percentage<br>
+          const verticalPercentAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.vertical-percent-element'),<br>
+          &nbsp;&nbsp;x: { min: -80, max: 80 },<br>
+          &nbsp;&nbsp;y: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 789<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="display: flex; justify-content: space-between; height: 100%;">
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Horizontal % / Vertical px</div>
+              <div class="horizontal-percent-element" style="width: 60px; height: 60px; background-color: #f39c12; border-radius: 10px; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Horizontal movement adapts to width, vertical is fixed</div>
+            </div>
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Horizontal px / Vertical %</div>
+              <div class="vertical-percent-element" style="width: 60px; height: 60px; background-color: #f39c12; border-radius: 10px; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Horizontal movement is fixed, vertical adapts to height</div>
+            </div>
+          </div>
+        </div>
+
         <!-- Load all scripts -->
         <script type="module" src="./js/index.js"></script>
         <script type="module" src="./js/basic-examples.js"></script>
@@ -651,5 +767,51 @@
         <script type="module" src="./js/interactive-controls.js"></script>
         <script type="module" src="./js/animated-button.js"></script>
         <script type="module" src="./js/triangle-animation.js"></script>
+        <script type="module">
+          import PerlinDOM from './js/PerlinDom.js';
+          
+          // Example 9: Pixel vs. Percentage Values
+          const pixelAnimation = new PerlinDOM({
+            element: document.querySelector('.pixel-element'),
+            x: { min: -50, max: 50 },
+            y: { min: -50, max: 50 },
+            speed: 0.01,
+            seed: 123
+          });
+          
+          const percentageAnimation = new PerlinDOM({
+            element: document.querySelector('.percentage-element'),
+            x: { min: '-20%', max: '20%' },
+            y: { min: '-20%', max: '20%' },
+            speed: 0.01,
+            seed: 123
+          });
+          
+          // Example 10: Resizable Container
+          const responsiveAnimation = new PerlinDOM({
+            element: document.querySelector('.responsive-element'),
+            x: { min: '-25%', max: '25%' },
+            y: { min: '-25%', max: '25%' },
+            speed: 0.008,
+            seed: 456
+          });
+          
+          // Example 11: Mixed Values
+          const horizontalPercentAnimation = new PerlinDOM({
+            element: document.querySelector('.horizontal-percent-element'),
+            x: { min: '-30%', max: '30%' },
+            y: { min: -40, max: 40 },
+            speed: 0.01,
+            seed: 789
+          });
+          
+          const verticalPercentAnimation = new PerlinDOM({
+            element: document.querySelector('.vertical-percent-element'),
+            x: { min: -80, max: 80 },
+            y: { min: '-20%', max: '20%' },
+            speed: 0.01,
+            seed: 789
+          });
+        </script>
     </body>
 </html>

package/src/js/PerlinDom.js

@@ -18,6 +18,18 @@ class PerlinDOM {
       }
       return permutation.concat(permutation);
     }
+
+    // Helper to check if a value is a percentage string
+    static #isPercentage(value) {
+      return typeof value === 'string' && value.endsWith('%');
+    }
+
+    // Helper to convert percentage to pixels
+    static #percentToPixels(percentage, dimension) {
+      if (!PerlinDOM.#isPercentage(percentage)) return percentage;
+      const value = parseFloat(percentage);
+      return (value / 100) * dimension;
+    }
   
     constructor({
       element,
@@ -38,14 +50,33 @@ class PerlinDOM {
       this.targetLerpFactor = 1; // Target state (1 = play, 0 = pause)
       this.lastX = 0;
       this.lastY = 0;
+      
+      // Check if we have percentage values
+      this.hasPercentages = false;
+      if (x && (PerlinDOM.#isPercentage(x.min) || PerlinDOM.#isPercentage(x.max)) ||
+          y && (PerlinDOM.#isPercentage(y.min) || PerlinDOM.#isPercentage(y.max))) {
+        this.hasPercentages = true;
+      }
   
       // Solo inicializar estas propiedades si el elemento no es null
       if (element) {
-        this.initialX = element.offsetLeft;
-        this.initialY = element.offsetTop;
-      } else {
-        this.initialX = 0;
-        this.initialY = 0;
+        // Ensure element has positioning for transform to work properly
+        const computedStyle = window.getComputedStyle(element);
+        if (computedStyle.position === 'static') {
+          element.style.position = 'relative';
+        }
+        
+        // Initialize transform if it doesn't exist
+        const currentTransform = computedStyle.transform;
+        if (!currentTransform || currentTransform === 'none') {
+          element.style.transform = 'translate3d(0px, 0px, 0px)';
+        }
+        
+        // If using percentages, add resize listener
+        if (this.hasPercentages) {
+          this.handleResize = this.handleResize.bind(this);
+          window.addEventListener('resize', this.handleResize);
+        }
       }
       
       this.animate = this.animate.bind(this);
@@ -62,6 +93,15 @@ class PerlinDOM {
       console.log('PerlinDOM initialized');
     }
     
+  // Handle window resize for percentage-based values
+  handleResize() {
+      // Only recalculate if we're using percentages
+      if (this.hasPercentages && this.el) {
+        // Force a recalculation on next animation frame
+        this.needsRecalculation = true;
+      }
+    }
+    
   pause() {
       if (this.isPlaying) {
         this.targetLerpFactor = 0; // Target paused state
@@ -178,23 +218,72 @@ class PerlinDOM {
         const noiseX = this.noise.perlin2(this.time, 0);
         const noiseY = this.noise.perlin2(this.time, 100); // Different slice of the noise field
     
-        const valX = this.xRange
-          ? this.#map(noiseX, -1, 1, this.xRange.min, this.xRange.max)
-          : 0;
-    
-        const valY = this.yRange
-          ? this.#map(noiseY, -1, 1, this.yRange.min, this.yRange.max)
-          : 0;
-        
-        // Store current values for interpolation
-        this.lastX = valX;
-        this.lastY = valY;
-    
-        // Update position using left/top instead of transform
-        // Solo actualizar el elemento si existe
+        // Only process if we have an element
         if (this.el) {
-          this.el.style.left = `${this.initialX + valX}px`;
-          this.el.style.top = `${this.initialY + valY}px`;
+          let minX, maxX, minY, maxY;
+          
+          // Get parent dimensions for percentage calculations if needed
+          if (this.hasPercentages) {
+            const parent = this.el.parentElement || document.body;
+            const parentWidth = parent.clientWidth;
+            const parentHeight = parent.clientHeight;
+            
+            // Convert percentage values to pixels if needed
+            if (this.xRange) {
+              minX = PerlinDOM.#isPercentage(this.xRange.min) 
+                ? PerlinDOM.#percentToPixels(this.xRange.min, parentWidth)
+                : this.xRange.min;
+              
+              maxX = PerlinDOM.#isPercentage(this.xRange.max)
+                ? PerlinDOM.#percentToPixels(this.xRange.max, parentWidth)
+                : this.xRange.max;
+            }
+            
+            if (this.yRange) {
+              minY = PerlinDOM.#isPercentage(this.yRange.min)
+                ? PerlinDOM.#percentToPixels(this.yRange.min, parentHeight)
+                : this.yRange.min;
+              
+              maxY = PerlinDOM.#isPercentage(this.yRange.max)
+                ? PerlinDOM.#percentToPixels(this.yRange.max, parentHeight)
+                : this.yRange.max;
+            }
+          } else {
+            // Use the original values if not using percentages
+            minX = this.xRange?.min;
+            maxX = this.xRange?.max;
+            minY = this.yRange?.min;
+            maxY = this.yRange?.max;
+          }
+          
+          // Calculate the actual pixel values
+          const valX = this.xRange
+            ? this.#map(noiseX, -1, 1, minX, maxX)
+            : 0;
+      
+          const valY = this.yRange
+            ? this.#map(noiseY, -1, 1, minY, maxY)
+            : 0;
+          
+          // Store current values for interpolation
+          this.lastX = valX;
+          this.lastY = valY;
+      
+          // Update position using transform for better performance
+          this.el.style.transform = `translate3d(${valX}px, ${valY}px, 0)`;
+        } else {
+          // If no element, just calculate and store the values
+          const valX = this.xRange
+            ? this.#map(noiseX, -1, 1, this.xRange.min, this.xRange.max)
+            : 0;
+      
+          const valY = this.yRange
+            ? this.#map(noiseY, -1, 1, this.yRange.min, this.yRange.max)
+            : 0;
+          
+          // Store current values for interpolation
+          this.lastX = valX;
+          this.lastY = valY;
         }
       }
   
@@ -210,6 +299,11 @@ class PerlinDOM {
   
     destroy() {
       cancelAnimationFrame(this.raf);
+      
+      // Remove resize listener if it was added
+      if (this.hasPercentages) {
+        window.removeEventListener('resize', this.handleResize);
+      }
     }
   }
   export default PerlinDOM;