Spaces:

ninjacricket
/

cat

Running

cat

File size: 23,214 Bytes

83974c5
f031718

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wavy Portal Effect - Pulsing Lines</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0; /* Light background similar to image */
      }

      #myCanvas {
        background-color: #e6e6e6; /* Slight off-white for the background */
        display: block;
      }

      #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(255,255,255,0.8);
        padding: 10px;
        border-radius: 5px;
        z-index: 100;
        max-width: 300px;
      }
      #controls fieldset {
        margin-bottom: 10px;
        border: 1px solid #ccc;
      }
      #controls label {
        display: block;
        margin: 5px 0;
      }
      #controls input[type="range"] {
        width: 100%;
      }
      #textOverlay {
        position: absolute;
        color: #000;
        font-family: sans-serif;
        font-size: 2em;
        text-align: center;
        user-select: none; /* Prevent text selection */
        pointer-events: none; /* Allow mouse events to pass through to canvas */
      }
    </style>
  </head>
  <body>
    <div id="controls">
      <fieldset>
        <legend>Text Settings</legend>
        <label>Text Line 1: <input type="text" id="textLine1" value="The portal has closed,"></label>
        <label>Text Line 2: <input type="text" id="textLine2" value="see you on the other side"></label>
        <label>Font Family: 
          <select id="fontFamily">
            <option value="sans-serif">Sans-serif</option>
            <option value="serif">Serif</option>
            <option value="monospace">Monospace</option>
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
          </select>
        </label>
        <label>Font Size: <input type="range" id="fontSize" min="10" max="100" value="32"></label>
        <label>Text Color: <input type="color" id="textColor" value="#000000"></label>
      </fieldset>

      <fieldset>
        <legend>Background</legend>
        <label>Color: <input type="color" id="bgColor" value="#f0f0f0"></label>
        <label>Vignette Strength: <input type="range" id="vignetteStrength" min="0" max="2" step="0.1" value="0.5"></label>
        <label>Pattern Type:
          <select id="patternType">
            <option value="none">None</option>
            <option value="grid">Grid</option>
            <option value="dots">Dots</option>
            <option value="lines">Lines</option>
          </select>
        </label>
        <label>Pattern Scale: <input type="range" id="patternScale" min="10" max="200" value="50"></label>
      </fieldset>

      <fieldset>
        <legend>Animation/LFO</legend>
        <label>Animate Radius: <input type="checkbox" id="animateRadius"></label>
        <label>Radius Speed: <input type="range" id="radiusSpeed" min="0" max="0.1" step="0.001" value="0.02"></label>
        <label>Animate Wave Amp: <input type="checkbox" id="animateWaveAmp"></label>
        <label>Wave Amp Speed: <input type="range" id="waveAmpSpeed" min="0" max="0.1" step="0.001" value="0.03"></label>
      </fieldset>

      <fieldset>
        <legend>Circle Settings</legend>
        <label>Radius: <input type="range" id="circleRadius" min="100" max="800" step="10" value="450"></label>
        <label>Border Color: <input type="color" id="borderColor" value="#b7a48"></label>
      </fieldset>

      <fieldset>
        <legend>Line Settings</legend>
        <label>Color: <input type="color" id="lineColor" value="#0059"></label>
        <label>Number: <input type="range" id="numLines" min="10" max="1000" step="10" value="400"></label>
        <label>Max Length: <input type="range" id="maxLineLength" min="100" max="1000" step="10" value="500"></label>
      </fieldset>

      <fieldset>
        <legend>Line Width</legend>
        <label>Base: <input type="range" id="lineWidthBase" min="0.1" max="5" step="0.1" value="2.5"></label>
        <label>Amplitude: <input type="range" id="lineWidthAmplitude" min="0" max="3" step="0.1" value="1.5"></label>
        <label>Frequency: <input type="range" id="lineWidthFrequency" min="0" max="0.5" step="0.01" value="0.1"></label>
        <label>Min: <input type="range" id="lineWidthMin" min="0.1" max="2" step="0.1" value="0.5"></label>
      </fieldset>

      <fieldset>
        <legend>Wave Settings</legend>
        <label>Amplitude: <input type="range" id="waveAmplitude" min="0" max="50" step="1" value="15"></label>
        <label>Frequency: <input type="range" id="waveFrequency" min="0" max="0.2" step="0.001" value="0.04"></label>
        <label>Speed: <input type="range" id="waveSpeed" min="0" max="0.2" step="0.001" value="0.05"></label>
        <label>Phase Spread: <input type="range" id="wavePhaseSpread" min="0" max="6.28" step="0.1" value="6.28"></label>
      </fieldset>
    </div>

    <canvas id="myCanvas"></canvas>
    <div id="textOverlay"></div>

    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      const textOverlay = document.getElementById('textOverlay');

      let mouseX = 0;
      let mouseY = 0;
      let animationTime = 0; // Global time for animation

      // --- Configuration Object ---
      // All adjustable parameters are now grouped here for easier access
      const config = {
        circleRadius: 450, // Radius of the central circle
        text: {
          line1: "The portal has closed,",
          line2: "see you on the other side",
          fontFamily: "sans-serif",
          fontSize: 32,
          color: "#000000"
        },
        background: {
          color: "#f0f0f0",
          vignetteStrength: 0.5,
          patternType: "none",
          patternScale: 50
        },
        animation: {
          radius: {
            enabled: false,
            speed: 0.02
          },
          waveAmplitude: {
            enabled: false,
            speed: 0.03
          }
        },
        lineColor: '#0059', // Dark blue
        borderColor: '#b7a48', // Brown border
        lineWidth: {
          base: 2.5, // Base line width
          amplitude: 1.5, // Max variation from base
          frequency: 0.1, // How fast the line width pulses
          min: 0.5, // Minimum allowed line width
        },
        numLines: 400, // Number of field lines
        lineSegmentLength: 5, // Length of each small step
        maxLineLength: 500, // Max distance lines will extend

        // Wave Effect Parameters
        waveAmplitude: 15, // Max sideways displacement of the wave
        waveFrequency: 0.04, // How many waves per unit length (lower is more spread out)
        waveSpeed: 0.05, // Speed at which waves travel along lines
        wavePhaseSpread: Math.PI * 2, // How much to offset waves for adjacent lines

        // Define "poles" on the circle's edge for complex field lines
        poles: [
          // Original poles from previous versions
          // { angle: Math.PI * 0.1, type: 'repel', strength: 0.8 },
          // { angle: Math.PI * 0.4, type: 'attract', strength: 0.6 },
          // { angle: Math.PI * 0.6, type: 'repel', strength: 0.7 },
          // { angle: Math.PI * 1.1, type: 'attract', strength: 0.5 },
          // { angle: Math.PI * 1.6, type: 'repel', strength: 0.9 },
          // { angle: Math.PI * 1.9, type: 'attract', strength: 0.7 },
          //
          // New pole configurations based on the image
          { angle: Math.PI * 0, type: 'repel', strength: 1.8 },
          { angle: Math.PI * 0.8, type: 'attract', strength: 1.6 },
          { angle: Math.PI * 0.6, type: 'repel', strength: 7.7 },
          { angle: Math.PI * 0.9, type: 'attract', strength: 0.5 },
          { angle: Math.PI * 1.6, type: 'repel', strength: 2.9 },
          { angle: Math.PI * 1.9, type: 'attract', strength: 0.7 },
        ],
      };

      // --- Canvas Sizing ---
      function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // Position text overlay
        updateTextOverlay();
        textOverlay.style.left = `${(canvas.width - textOverlay.offsetWidth) / 2}px`;
        textOverlay.style.top = `${(canvas.height - textOverlay.offsetHeight) / 2}px`;
      }
      window.addEventListener('resize', resizeCanvas);
      resizeCanvas(); // Initial resize

      // --- Mouse Tracking ---
      canvas.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

      // --- Drawing Functions ---
      function drawBackground() {
        // Solid background
        ctx.fillStyle = config.background.color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Geometric patterns
        if (config.background.patternType !== "none") {
          ctx.save();
          ctx.globalAlpha = 0.2;
          const scale = config.background.patternScale;
          
          if (config.background.patternType === "grid") {
            ctx.strokeStyle = "#000000";
            ctx.lineWidth = 1;
            for (let x = 0; x < canvas.width; x += scale) {
              ctx.beginPath();
              ctx.moveTo(x, 0);
              ctx.lineTo(x, canvas.height);
              ctx.stroke();
            }
            for (let y = 0; y < canvas.height; y += scale) {
              ctx.beginPath();
              ctx.moveTo(0, y);
              ctx.lineTo(canvas.width, y);
              ctx.stroke();
            }
          } else if (config.background.patternType === "dots") {
            ctx.fillStyle = "#000000";
            for (let x = 0; x < canvas.width; x += scale) {
              for (let y = 0; y < canvas.height; y += scale) {
                ctx.beginPath();
                ctx.arc(x, y, 1, 0, Math.PI * 2);
                ctx.fill();
              }
            }
          } else if (config.background.patternType === "lines") {
            ctx.strokeStyle = "#000000";
            ctx.lineWidth = 1;
            for (let x = 0; x < canvas.width; x += scale) {
              ctx.beginPath();
              ctx.moveTo(x, 0);
              ctx.lineTo(x + scale/2, canvas.height);
              ctx.stroke();
            }
          }
          ctx.restore();
        }

        // Vignette effect
        if (config.background.vignetteStrength > 0) {
          const gradient = ctx.createRadialGradient(
            canvas.width/2, canvas.height/2, 0,
            canvas.width/2, canvas.height/2, Math.max(canvas.width, canvas.height)/2
          );
          gradient.addColorStop(0, 'rgba(0,0,0,0)');
          gradient.addColorStop(1, `rgba(0,0,0,${config.background.vignetteStrength})`);
          
          ctx.fillStyle = gradient;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
      }

      function drawCircle() {
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        ctx.beginPath();
        ctx.arc(centerX, centerY, config.circleRadius, 0, Math.PI * 2);
        ctx.fillStyle = '#fff'; // White interior
        ctx.fill();
        ctx.strokeStyle = config.borderColor;
        ctx.lineWidth = 1;
        ctx.stroke();
      }

      function drawFieldLines(time) {
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        ctx.strokeStyle = config.lineColor;

        // Calculate pulsing line width
        const pulsingWidth =
          config.lineWidth.base +
          Math.sin(time * config.lineWidth.frequency) *
            config.lineWidth.amplitude;
        ctx.lineWidth = Math.max(config.lineWidth.min, pulsingWidth); // Ensure it doesn't go below minimum

        for (let i = 0; i < config.numLines; i++) {
          const startAngle = (i / config.numLines) * Math.PI * 2;
          let currentX = centerX + config.circleRadius * Math.cos(startAngle);
          let currentY = centerY + config.circleRadius * Math.sin(startAngle);

          ctx.beginPath();
          ctx.moveTo(currentX, currentY);

          let distanceTraveled = 0;
          // Per-line phase offset for waves to make them appear staggered
          const lineWavePhaseOffset = (i / config.numLines) * config.wavePhaseSpread;

          // Store the previous segment's direction to help calculate the perpendicular for waves
          let prevDx = 0;
          let prevDy = 0;

          // Simulate line path
          while (distanceTraveled < config.maxLineLength) {
            let dx = 0;
            let dy = 0;

            // 1. Repulsion from circle center (makes lines go outwards)
            const distFromCenter = Math.sqrt(
              (currentX - centerX) ** 2 + (currentY - centerY) ** 2,
            );
            if (distFromCenter > 0) {
              dx += ((currentX - centerX) / distFromCenter) * 0.5;
              dy += ((currentY - centerY) / distFromCenter) * 0.5;
            }

            // 2. Influence from fixed poles
            config.poles.forEach((pole) => {
              const poleX = centerX + config.circleRadius * Math.cos(pole.angle);
              const poleY = centerY + config.circleRadius * Math.sin(pole.angle);
              const vecX = currentX - poleX;
              const vecY = currentY - poleY;
              const distToPole = Math.sqrt(vecX ** 2 + vecY ** 2);

              if (distToPole > 10) {
                // Avoid division by zero/large forces at exact pole
                const forceMagnitude = pole.strength / distToPole;
                if (pole.type === 'attract') {
                  dx -= vecX * forceMagnitude;
                  dy -= vecY * forceMagnitude;
                } else {
                  // Repel
                  dx += vecX * forceMagnitude;
                  dy += vecY * forceMagnitude;
                }
              }
            });

            // 3. Influence from mouse position
            const mouseVecX = currentX - mouseX;
            const mouseVecY = currentY - mouseY;
            const distToMouse = Math.sqrt(mouseVecX ** 2 + mouseVecY ** 2);

            if (distToMouse > 5) {
              // Mouse acts as an attractor (you can change this to repel)
              const mouseForceMagnitude = 50 / distToMouse ** 1.5; // Inverse square or similar
              dx -= mouseVecX * mouseForceMagnitude;
              dy -= mouseVecY * mouseForceMagnitude;
            }

            // Normalize the direction vector before adding wave effect
            let totalMagnitude = Math.sqrt(dx * dx + dy * dy);
            if (totalMagnitude === 0) {
              if (prevDx === 0 && prevDy === 0) break;
              totalMagnitude = 1; // Prevent division by zero, will be normalized by prevDx/Dy
              dx = prevDx;
              dy = prevDy;
            }

            let unitDx = dx / totalMagnitude;
            let unitDy = dy / totalMagnitude;

            // --- Apply Wave Effect ---
            // Calculate a vector perpendicular to the current line direction
            const perpDx = -unitDy;
            const perpDy = unitDx;

            // Calculate the wave displacement using sine function
            // The `distanceTraveled` makes the wave appear along the line
            // `time` makes the wave travel, and `lineWavePhaseOffset` staggers lines
            const waveDisplacement =
              config.waveAmplitude *
              Math.sin(
                config.waveFrequency * distanceTraveled +
                  lineWavePhaseOffset +
                  time * config.waveSpeed,
              );

            // Add the wave displacement to the current direction
            dx += perpDx * waveDisplacement;
            dy += perpDy * waveDisplacement;

            // Recalculate totalMagnitude after adding wave for the final step
            const totalMagnitudeAfterWave = Math.sqrt(dx * dx + dy * dy);
            if (totalMagnitudeAfterWave === 0) break;

            const stepX = (dx / totalMagnitudeAfterWave) * config.lineSegmentLength;
            const stepY = (dy / totalMagnitudeAfterWave) * config.lineSegmentLength;

            currentX += stepX;
            currentY += stepY;
            distanceTraveled += config.lineSegmentLength;

            // Store for next iteration if the line becomes stationary
            prevDx = stepX;
            prevDy = stepY;

            // Stop if line gets too close to the circle center again
            const currentDistFromCenter = Math.sqrt(
              (currentX - centerX) ** 2 + (currentY - centerY) ** 2,
            );
            if (currentDistFromCenter < config.circleRadius - 5) {
              break;
            }

            ctx.lineTo(currentX, currentY);
          }
          ctx.stroke();
        }
      }

      // --- Control Panel Setup ---
      function updateTextOverlay() {
        textOverlay.innerHTML = `${config.text.line1}<br />${config.text.line2}`;
        textOverlay.style.fontFamily = config.text.fontFamily;
        textOverlay.style.fontSize = `${config.text.fontSize}px`;
        textOverlay.style.color = config.text.color;
      }

      function setupControls() {
        // Text controls
        document.getElementById('textLine1').addEventListener('input', (e) => {
          config.text.line1 = e.target.value;
          updateTextOverlay();
        });
        document.getElementById('textLine2').addEventListener('input', (e) => {
          config.text.line2 = e.target.value;
          updateTextOverlay();
        });
        document.getElementById('fontFamily').addEventListener('change', (e) => {
          config.text.fontFamily = e.target.value;
          updateTextOverlay();
        });
        document.getElementById('fontSize').addEventListener('input', (e) => {
          config.text.fontSize = e.target.value;
          updateTextOverlay();
        });
        document.getElementById('textColor').addEventListener('input', (e) => {
          config.text.color = e.target.value;
          updateTextOverlay();
        });

        // Background controls
        document.getElementById('bgColor').addEventListener('input', (e) => {
          config.background.color = e.target.value;
        });
        document.getElementById('vignetteStrength').addEventListener('input', (e) => {
          config.background.vignetteStrength = Number(e.target.value);
        });
        document.getElementById('patternType').addEventListener('change', (e) => {
          config.background.patternType = e.target.value;
        });
        document.getElementById('patternScale').addEventListener('input', (e) => {
          config.background.patternScale = Number(e.target.value);
        });

        // Animation controls
        document.getElementById('animateRadius').addEventListener('change', (e) => {
          config.animation.radius.enabled = e.target.checked;
        });
        document.getElementById('radiusSpeed').addEventListener('input', (e) => {
          config.animation.radius.speed = Number(e.target.value);
        });
        document.getElementById('animateWaveAmp').addEventListener('change', (e) => {
          config.animation.waveAmplitude.enabled = e.target.checked;
        });
        document.getElementById('waveAmpSpeed').addEventListener('input', (e) => {
          config.animation.waveAmplitude.speed = Number(e.target.value);
        });

        document.getElementById('circleRadius').addEventListener('input', (e) => {
          config.circleRadius = Number(e.target.value);
        });
        document.getElementById('borderColor').addEventListener('input', (e) => {
          config.borderColor = e.target.value;
        });
        document.getElementById('lineColor').addEventListener('input', (e) => {
          config.lineColor = e.target.value;
        });
        document.getElementById('numLines').addEventListener('input', (e) => {
          config.numLines = Number(e.target.value);
        });
        document.getElementById('maxLineLength').addEventListener('input', (e) => {
          config.maxLineLength = Number(e.target.value);
        });
        
        // Line width controls
        document.getElementById('lineWidthBase').addEventListener('input', (e) => {
          config.lineWidth.base = Number(e.target.value);
        });
        document.getElementById('lineWidthAmplitude').addEventListener('input', (e) => {
          config.lineWidth.amplitude = Number(e.target.value);
        });
        document.getElementById('lineWidthFrequency').addEventListener('input', (e) => {
          config.lineWidth.frequency = Number(e.target.value);
        });
        document.getElementById('lineWidthMin').addEventListener('input', (e) => {
          config.lineWidth.min = Number(e.target.value);
        });
        
        // Wave controls
        document.getElementById('waveAmplitude').addEventListener('input', (e) => {
          config.waveAmplitude = Number(e.target.value);
        });
        document.getElementById('waveFrequency').addEventListener('input', (e) => {
          config.waveFrequency = Number(e.target.value);
        });
        document.getElementById('waveSpeed').addEventListener('input', (e) => {
          config.waveSpeed = Number(e.target.value);
        });
        document.getElementById('wavePhaseSpread').addEventListener('input', (e) => {
          config.wavePhaseSpread = Number(e.target.value);
        });
      }
      setupControls();

      // --- Animation Loop ---
      function animate() {
        animationTime += 0.05; // Increment time for animation, adjust speed here
        
        // Apply LFO animations
        if (config.animation.radius.enabled) {
          config.circleRadius = 450 + Math.sin(animationTime * config.animation.radius.speed) * 100;
        }
        if (config.animation.waveAmplitude.enabled) {
          config.waveAmplitude = 15 + Math.sin(animationTime * config.animation.waveAmplitude.speed) * 10;
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
        drawBackground();
        drawCircle();
        drawFieldLines(animationTime); // Pass current time to drawing function
        requestAnimationFrame(animate);
      }

      // Start the animation
      animate();
    </script>
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ninjacricket/cat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>