Spaces:
Running
Running
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
f031718
verified
| <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> |