Spaces:

ninjacricket
/

cat

Running

App Files Files Community

ninjacricket commited on Jun 22

Commit

f031718

verified ·

1 Parent(s): 83974c5

Can you add gardient effect over the lines and increase the effects of the border? I also want to be able to add fill out the white center. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +563 -18

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cat
-emoji: 🦀
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cat
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,564 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!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>