@andresclua/perlindom 0.0.1

package/src/js/PerlinDom.js

@@ -0,0 +1,215 @@
+class PerlinDOM {
+    /* ---------- helpers privados y estáticos ---------- */
+    static #mulberry32(a) {
+      return function () {
+        let t = (a += 0x6d2b79f5);
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+      };
+    }
+  
+    static #generatePermutation(seed = 0) {
+      const permutation = Array.from({ length: 256 }, (_, i) => i);
+      const rand = PerlinDOM.#mulberry32(seed);
+      for (let i = 255; i > 0; i--) {
+        const j = Math.floor(rand() * (i + 1));
+        [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
+      }
+      return permutation.concat(permutation);
+    }
+  
+    constructor({
+      element,
+      x = null,
+      y = null,
+      speed = 0.01,
+      seed = 0,
+      lerpSpeed = 0.1
+    }) {
+      this.el = element;
+      this.xRange = x;
+      this.yRange = y;
+      this.speed = speed;
+      this.time = seed;
+      this.isPlaying = true;
+      this.lerpFactor = 1; // 1 = full speed, 0 = paused
+      this.lerpSpeed = lerpSpeed; // How fast to transition between play/pause states
+      this.targetLerpFactor = 1; // Target state (1 = play, 0 = pause)
+      this.lastX = 0;
+      this.lastY = 0;
+  
+      // 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;
+      }
+      
+      this.animate = this.animate.bind(this);
+      
+      this.init(seed);
+    }
+    
+  init(seed) {
+      this.noise = this.#createPerlin(PerlinDOM.#generatePermutation(seed));
+      this.isPlaying = true;
+      this.lerpFactor = 1;
+      this.targetLerpFactor = 1;
+      this.raf = requestAnimationFrame(this.animate);
+      console.log('PerlinDOM initialized');
+    }
+    
+  pause() {
+      if (this.isPlaying) {
+        this.targetLerpFactor = 0; // Target paused state
+        this.isPlaying = false;
+        console.log('PerlinDOM pausing...');
+      }
+    }
+    
+  play() {
+      if (!this.isPlaying) {
+        this.targetLerpFactor = 1; // Target playing state
+        this.isPlaying = true;
+        
+        // Only start a new animation frame if we're completely paused
+        if (this.lerpFactor === 0) {
+          this.raf = requestAnimationFrame(this.animate);
+        }
+        
+        console.log('PerlinDOM playing...');
+      }
+    }
+  
+    #createPerlin(p) {
+      const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
+      const lerp = (t, a, b) => a + t * (b - a);
+      
+      // Enhanced gradient function for 2D
+      const grad2D = (hash, x, y) => {
+        const h = hash & 15;
+        const u = h < 8 ? x : y;
+        const v = h < 4 ? y : (h === 12 || h === 14 ? x : 0);
+        return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+      };
+      
+      // 1D gradient (kept for backward compatibility)
+      const grad1D = (hash, x) => (hash & 1 ? -x : x);
+      
+      return {
+        // Original 1D Perlin noise function
+        perlin1(x) {
+          const X = Math.floor(x) & 255;
+          x -= Math.floor(x);
+          const u = fade(x);
+          return lerp(u, grad1D(p[X], x), grad1D(p[X + 1], x - 1));
+        },
+        
+        // New 2D Perlin noise function
+        perlin2(x, y) {
+          // Integer parts of coordinates
+          const X = Math.floor(x) & 255;
+          const Y = Math.floor(y) & 255;
+          
+          // Fractional parts of coordinates
+          x -= Math.floor(x);
+          y -= Math.floor(y);
+          
+          // Fade curves for x and y
+          const u = fade(x);
+          const v = fade(y);
+          
+          // Hash coordinates of the 4 square corners
+          const A = p[X] + Y;
+          const B = p[X + 1] + Y;
+          const AA = p[A];
+          const AB = p[A + 1];
+          const BA = p[B];
+          const BB = p[B + 1];
+          
+          // Blend the four corner gradients
+          return lerp(
+            v,
+            lerp(
+              u,
+              grad2D(p[AA], x, y),
+              grad2D(p[BA], x - 1, y)
+            ),
+            lerp(
+              u,
+              grad2D(p[AB], x, y - 1),
+              grad2D(p[BB], x - 1, y - 1)
+            )
+          );
+        }
+      };
+    }
+  
+    #lerp(a, b, t) {
+      return a + t * (b - a);
+    }
+  
+    animate = () => {
+      // Update lerp factor towards target
+      if (this.lerpFactor !== this.targetLerpFactor) {
+        this.lerpFactor = this.#lerp(
+          this.lerpFactor, 
+          this.targetLerpFactor, 
+          this.lerpSpeed
+        );
+        
+        // Snap to target if very close
+        if (Math.abs(this.lerpFactor - this.targetLerpFactor) < 0.001) {
+          this.lerpFactor = this.targetLerpFactor;
+        }
+      }
+      
+      // Only update time if not completely paused
+      if (this.lerpFactor > 0) {
+        // Scale time increment by lerp factor for smooth speed transition
+        this.time += this.speed * this.lerpFactor;
+        
+        // Use 2D Perlin noise for more natural movement
+        // We use time for one dimension and a fixed offset for the other
+        // This creates a path through the 2D noise field
+        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
+        if (this.el) {
+          this.el.style.left = `${this.initialX + valX}px`;
+          this.el.style.top = `${this.initialY + valY}px`;
+        }
+      }
+  
+      // Continue animation if not completely paused or still transitioning
+      if (this.lerpFactor > 0 || this.targetLerpFactor > 0) {
+        this.raf = requestAnimationFrame(this.animate);
+      }
+    };
+  
+    #map(n, inMin, inMax, outMin, outMax) {
+      return ((n - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+    }
+  
+    destroy() {
+      cancelAnimationFrame(this.raf);
+    }
+  }
+  export default PerlinDOM;

package/src/js/PerlinSVG.js

@@ -0,0 +1,190 @@
+import PerlinDOM from './PerlinDom.js';
+
+/**
+ * PerlinSVG - Clase para animar paths SVG usando ruido Perlin
+ * 
+ * Esta clase extiende PerlinDOM para proporcionar animaciones orgánicas
+ * a elementos SVG path, creando efectos de ondulación fluidos y naturales.
+ */
+class PerlinSVG extends PerlinDOM {
+  /**
+   * Constructor de PerlinSVG
+   * 
+   * @param {Object} options - Opciones de configuración
+   * @param {Element|Element[]} options.element - El/los elemento(s) SVG path a animar
+   * @param {number} options.numPoints - Número de puntos de control para cada path (más puntos = curvas más detalladas)
+   * @param {number} options.amplitude - Amplitud máxima de la animación (altura de las ondas en píxeles)
+   * @param {boolean} options.isOpen - Estado inicial (true = abierto/visible, false = cerrado/oculto)
+   * @param {number} options.speed - Velocidad de la animación (valores más altos = movimiento más rápido)
+   * @param {number} options.seed - Semilla para el generador de ruido Perlin (misma semilla = mismo patrón)
+   * @param {number} options.lerpSpeed - Velocidad de interpolación entre estados (valores más altos = transiciones más rápidas)
+   * @param {number} options.delayPointsMax - Retraso máximo aleatorio para cada punto (crea efectos de cascada)
+   * @param {number} options.delayPerPath - Retraso entre capas/paths consecutivos (crea efecto escalonado)
+   */
+  constructor({
+    element,                // El/los elemento(s) SVG path a animar
+    numPoints = 10,         // Número de puntos de control (más puntos = curvas más detalladas)
+    amplitude = 100,        // Amplitud máxima de la animación (altura de las ondas)
+    isOpen = false,         // Estado inicial (true = abierto/visible, false = cerrado/oculto)
+    speed = 0.01,           // Velocidad de la animación (valores más altos = movimiento más rápido)
+    seed = 0,               // Semilla para el generador de ruido Perlin (misma semilla = mismo patrón)
+    lerpSpeed = 0.1,        // Velocidad de interpolación entre estados
+    delayPointsMax = 0.3,   // Retraso máximo aleatorio para cada punto (crea efectos de cascada)
+    delayPerPath = 0.25     // Retraso entre capas/paths consecutivos (crea efecto escalonado)
+  }) {
+    // Call parent constructor with null element
+    // since we'll handle the SVG differently
+    super({
+      element: null,
+      speed: speed,
+      seed: seed,
+      lerpSpeed: lerpSpeed
+    });
+    
+    // SVG specific properties
+    this.svgElement = element;
+    this.paths = Array.isArray(element) ? element : [element];
+    this.numPoints = numPoints;
+    this.amplitude = amplitude;
+    this.isOpen = isOpen;
+    this.delayPointsMax = delayPointsMax;
+    this.delayPerPath = delayPerPath;
+    this.isAnimating = false;
+    
+    // Arrays to store points and delays
+    this.allPoints = [];
+    this.pointsDelay = [];
+    
+    // Initialize points and delays
+    this.initPoints();
+    
+    // Add click event
+    if (this.paths.length > 0 && this.paths[0].ownerSVGElement) {
+      this.paths[0].ownerSVGElement.addEventListener('click', () => this.toggle());
+    }
+  }
+  
+  // Initialize points for all paths
+  initPoints() {
+    // Initialize delays for points
+    for (let i = 0; i < this.numPoints; i++) {
+      this.pointsDelay[i] = Math.random() * this.delayPointsMax;
+    }
+    
+    // Initialize points for each path
+    for (let i = 0; i < this.paths.length; i++) {
+      let points = [];
+      this.allPoints.push(points);
+      
+      for (let j = 0; j < this.numPoints; j++) {
+        points.push(this.isOpen ? 0 : this.amplitude);
+      }
+    }
+    
+    // Render initial paths
+    this.render();
+  }
+  
+  // Toggle between open/closed states
+  toggle() {
+    if (this.isAnimating) return;
+    
+    this.isOpen = !this.isOpen;
+    this.isAnimating = true;
+    
+    // Schedule animations for each point with Perlin noise-based delays
+    const startTime = performance.now();
+    const animate = (timestamp) => {
+      const elapsed = timestamp - startTime;
+      let stillAnimating = false;
+      
+      // Update all points
+      for (let i = 0; i < this.paths.length; i++) {
+        const pathDelay = this.delayPerPath * 1000 * (this.isOpen ? i : (this.paths.length - i - 1));
+        
+        for (let j = 0; j < this.numPoints; j++) {
+          const pointDelay = this.pointsDelay[j] * 1000; // Convert to ms
+          const totalDelay = pointDelay + pathDelay;
+          
+          if (elapsed > totalDelay) {
+            // Calculate animation progress
+            const animProgress = Math.min(1, (elapsed - totalDelay) / (1000 * this.lerpSpeed * 5));
+            
+            // Target value
+            const targetValue = this.isOpen ? 0 : this.amplitude;
+            
+            // Interpolate towards target
+            if (Math.abs(this.allPoints[i][j] - targetValue) > 0.1) {
+              // Use Perlin noise to add natural variation
+              const noiseValue = this.noise.perlin2(j * 0.1, i * 0.1 + this.time);
+              const variation = noiseValue * 2; // Small variation
+              
+              // Use our own lerp function since we can't access the private one
+              this.allPoints[i][j] = this.lerp(
+                this.allPoints[i][j],
+                targetValue + (this.isOpen ? 0 : variation), // Only add variation in closed state
+                animProgress
+              );
+              
+              stillAnimating = true;
+            } else {
+              this.allPoints[i][j] = targetValue;
+            }
+          } else {
+            stillAnimating = true;
+          }
+        }
+      }
+      
+      // Update the display
+      this.render();
+      
+      // Continue animation if needed
+      if (stillAnimating) {
+        this.raf = requestAnimationFrame(animate);
+      } else {
+        this.isAnimating = false;
+      }
+      
+      // Update time for Perlin noise
+      this.time += this.speed;
+    };
+    
+    // Start animation
+    this.raf = requestAnimationFrame(animate);
+  }
+  
+  // Render SVG paths
+  render() {
+    for (let i = 0; i < this.paths.length; i++) {
+      const path = this.paths[i];
+      const points = this.allPoints[i];
+      
+      let d = "";
+      d += this.isOpen ? `M 0 0 V ${points[0]} C` : `M 0 ${points[0]} C`;
+      
+      for (let j = 0; j < this.numPoints - 1; j++) {
+        let p = (j + 1) / (this.numPoints - 1) * 100;
+        let cp = p - (1 / (this.numPoints - 1) * 100) / 2;
+        d += ` ${cp} ${points[j]} ${cp} ${points[j+1]} ${p} ${points[j+1]}`;
+      }
+      
+      d += this.isOpen ? ` V 100 H 0` : ` V 0 H 0`;
+      path.setAttribute("d", d);
+    }
+  }
+  
+  // Override parent's animate method
+  // so it doesn't interfere with our custom animation
+  animate = () => {
+    // We don't do anything here, as we handle animation in toggle()
+    this.raf = requestAnimationFrame(this.animate);
+  };
+  
+  // Our own lerp function since we can't access the private one from PerlinDOM
+  lerp(a, b, t) {
+    return a + t * (b - a);
+  }
+}
+
+export default PerlinSVG;

package/src/js/animated-button.js

@@ -0,0 +1,40 @@
+// Example 7: Animated Button with Circles
+import PerlinDOM from './PerlinDom.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all the circle elements inside the button
+  const circleElements = document.querySelectorAll('.animated-button .circle');
+  
+  // Create an array to store the animation instances
+  let circleAnimations = [];
+  
+  // Function to initialize animations
+  function initCircleAnimations() {
+    // Clear any existing animations
+    circleAnimations.forEach(anim => anim.destroy());
+    circleAnimations = [];
+    
+    // Create new animations for each circle
+    circleElements.forEach((el, index) => {
+      const animation = new PerlinDOM({
+        element: el,
+        x: { min: -15, max: 15 },
+        y: { min: -15, max: 15 },
+        speed: 0.007,
+        seed: index * 1000,
+        lerpSpeed: 0.2 * index
+      });
+      circleAnimations.push(animation);
+    });
+  }
+  
+  // Add event listeners to the button
+  document.querySelector('.animated-button')?.addEventListener('mouseenter', () => {
+    initCircleAnimations();
+    circleAnimations.forEach(anim => anim.play());
+  });
+  
+  document.querySelector('.animated-button')?.addEventListener('mouseleave', () => {
+    circleAnimations.forEach(anim => anim.pause());
+  });
+});

package/src/js/basic-examples.js

@@ -0,0 +1,43 @@
+// Examples 1-4: Basic PerlinDOM Examples
+import PerlinDOM from './PerlinDom.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Example 1: Basic Animation
+  const basicAnimation = new PerlinDOM({
+    element: document.querySelector('.basic-element'),
+    x: { min: -50, max: 50 },
+    y: { min: -50, max: 50 },
+    speed: 0.01,
+    seed: 123
+  });
+  
+  // Example 2: Horizontal Only
+  const horizontalAnimation = new PerlinDOM({
+    element: document.querySelector('.horizontal-element'),
+    x: { min: -100, max: 100 },
+    y: null, // No vertical movement
+    speed: 0.02
+  });
+  
+  // Example 3: Multiple Elements
+  document.querySelectorAll('.particle').forEach((el, index) => {
+    new PerlinDOM({
+      element: el,
+      x: { min: -100, max: 100 + index * 20 }, // Slightly wider range for each element
+      y: { min: -100, max: 120}, // Random vertical range
+      speed: index * 0.001, // Slightly different speed for each element
+      seed: index * 16700 // Different seed for each element
+    });
+  });
+  
+  // Example 4: Background Effect
+  document.querySelectorAll('.bg-element').forEach(el => {
+    new PerlinDOM({
+      element: el,
+      x: { min: -110, max: 110 },
+      y: { min: -110, max: 110 },
+      speed: 0.002, // Very slow movement
+      seed: Math.random() * 2000
+    });
+  });
+});

package/src/js/index.js

@@ -0,0 +1,13 @@
+import PerlinDOM from "./PerlinDom";
+console.log('PerlinDOM loaded');
+
+const elements = document.querySelectorAll('.box');
+elements.forEach(el =>
+  new PerlinDOM({
+    element: el,
+    x: { min: -120, max: 120 },
+    y: { min: 0, max: 120 },
+    speed: 0.001,
+    seed: 1
+  })
+);

package/src/js/interactive-controls.js

@@ -0,0 +1,43 @@
+// Example 6: Interactive Controls
+import PerlinDOM from './PerlinDom.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  let interactiveAnimation;
+  
+  function initInteractiveAnimation() {
+    // Destroy previous instance if it exists
+    if (interactiveAnimation) {
+      interactiveAnimation.destroy();
+    }
+    
+    // Get current values
+    const xRange = parseInt(document.getElementById('x-range').value);
+    const yRange = parseInt(document.getElementById('y-range').value);
+    const speed = parseFloat(document.getElementById('speed').value);
+    const seed = parseInt(document.getElementById('seed').value);
+    
+    // Create new instance
+    interactiveAnimation = new PerlinDOM({
+      element: document.querySelector('.interactive-element'),
+      x: { min: -xRange, max: xRange },
+      y: { min: -yRange, max: yRange },
+      speed: speed,
+      seed: seed
+    });
+    
+    // Update displays
+    document.querySelector('#x-range + .value-display').textContent = `-${xRange} to ${xRange}`;
+    document.querySelector('#y-range + .value-display').textContent = `-${yRange} to ${yRange}`;
+    document.querySelector('#speed + .value-display').textContent = speed.toFixed(3);
+    document.querySelector('#seed + .value-display').textContent = seed;
+  }
+  
+  // Initialize
+  initInteractiveAnimation();
+  
+  // Add event listeners
+  document.getElementById('x-range')?.addEventListener('input', initInteractiveAnimation);
+  document.getElementById('y-range')?.addEventListener('input', initInteractiveAnimation);
+  document.getElementById('speed')?.addEventListener('input', initInteractiveAnimation);
+  document.getElementById('seed')?.addEventListener('input', initInteractiveAnimation);
+});

package/src/js/pause-play.js

@@ -0,0 +1,33 @@
+// Example 5: Pause and Play with Mouse Events
+import PerlinDOM from './PerlinDom.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Create the animation
+  const pausePlayAnimation = new PerlinDOM({
+    element: document.querySelector('.pause-play-element'),
+    x: { min: -80, max: 80 },
+    y: { min: -180, max: 80 },
+    speed: 0.01,
+    seed: 42,
+    lerpSpeed: 0.05 // Controls how smooth the transition is
+  });
+  
+  // Pause on mouse leave
+  document.querySelector('.pause-play-container')?.addEventListener('mouseleave', () => {
+    pausePlayAnimation.pause();
+    document.querySelector('.status-indicator').textContent = 'Pausing...';
+  });
+  
+  // Play on mouse enter
+  document.querySelector('.pause-play-container')?.addEventListener('mouseenter', () => {
+    pausePlayAnimation.play();
+    document.querySelector('.status-indicator').textContent = 'Playing...';
+  });
+  
+  // Update lerpSpeed when slider changes
+  document.getElementById('lerp-speed')?.addEventListener('input', (e) => {
+    const newSpeed = parseFloat(e.target.value);
+    pausePlayAnimation.lerpSpeed = newSpeed;
+    document.querySelector('.lerp-value').textContent = newSpeed.toFixed(2);
+  });
+});

package/src/js/triangle-animation.js

@@ -0,0 +1,48 @@
+// Example 8: ClipPath Triangle with Animated Vertex
+import PerlinDOM from './PerlinDom.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Get the polygon element
+  const trianglePath = document.getElementById('trianglePath');
+  
+  if (!trianglePath) return;
+  
+  // Store the original points
+  const originalPoints = {
+    x1: 150, y1: 50,  // Top vertex
+    x2: 250, y2: 250, // Bottom right
+    x3: 50,  y3: 250  // Bottom left
+  };
+  
+  // Create a custom animation function
+  function animateTriangle() {
+    // Create a PerlinDOM instance for the top vertex
+    const topVertexAnimation = new PerlinDOM({
+      element: null, // We're not moving a DOM element directly
+      x: { min: -30, max: 30 },
+      y: { min: -20, max: 20 },
+      speed: 0.005,
+      seed: 42
+    });
+    
+    // Animation function
+    function updateTriangle() {
+      // Get the current noise values
+      const offsetX = topVertexAnimation.lastX;
+      const offsetY = topVertexAnimation.lastY;
+      
+      // Update the polygon points
+      const newPoints = `${originalPoints.x1 + offsetX},${originalPoints.y1 + offsetY} ${originalPoints.x2},${originalPoints.y2} ${originalPoints.x3},${originalPoints.y3}`;
+      trianglePath.setAttribute('points', newPoints);
+      
+      // Continue animation
+      requestAnimationFrame(updateTriangle);
+    }
+    
+    // Start the animation
+    updateTriangle();
+  }
+  
+  // Initialize the animation
+  animateTriangle();
+});

package/src/scss/style.scss

@@ -0,0 +1,20 @@
+.spacer{
+  padding:120px;
+  border:1px solid red;
+  position:relative;
+  overflow: hidden;
+}
+
+
+.box{
+  width:120px;
+  height:120px;
+  border-radius: 50%;
+  background-color: blue;
+  position:absolute;
+  left:0;
+  top:-20%;
+  filter: blur(40px) drop-shadow(0 0 20px rgba(0, 0, 255, 0.5)); 
+
+  
+}

package/vite.config.js

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+const root = resolve(__dirname, 'src');
+const outDir = resolve(__dirname, 'dist');
+const entryPath = resolve(__dirname, 'src/js/PerlinDOM.js');
+
+export default defineConfig({
+    root,
+    publicDir: 'public',
+    plugins: [], 
+    build: {
+      lib: {
+        entry: entryPath,
+        name: 'PerlinDOM', // Library name as : Counter | etc
+        formats: ['es', 'umd'], // Output formats as : es | umd, es is for modern browsers, umd is for older browsers
+        fileName: (format,name) => `PerlinDOM.${format}.js`, // File naming as : reveal-it | collapsify | etc
+      },
+      outDir, 
+      emptyOutDir: true, 
+      // rollupOptions: {
+      
+      //   output: {
+      //     name: 'Validate',
+      //   },
+      // },
+    },
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, './src'),
+        '@js': resolve(__dirname, './src/js'),
+        '@scss': resolve(__dirname, './src/scss'),
+        '@assets': resolve(__dirname, './src/assets'),
+      },
+    },
+});