| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <title>Rotating Arrows System</title> |
| | <style> |
| | body { |
| | margin: 0; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | min-height: 100vh; |
| | background: #1a1a1a; |
| | font-family: Arial, sans-serif; |
| | color: white; |
| | } |
| | |
| | #container { |
| | position: relative; |
| | text-align: center; |
| | } |
| | |
| | .screen { |
| | display: none; |
| | margin-bottom: 20px; |
| | } |
| | |
| | .active { |
| | display: block; |
| | } |
| | |
| | .arrow-config { |
| | background: rgba(255, 255, 255, 0.1); |
| | padding: 15px; |
| | margin: 10px; |
| | border-radius: 8px; |
| | } |
| | |
| | button { |
| | padding: 10px 20px; |
| | margin: 5px; |
| | font-size: 16px; |
| | background: #4a90e2; |
| | border: none; |
| | border-radius: 5px; |
| | color: white; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | button:hover { |
| | background: #357abd; |
| | transform: translateY(-2px); |
| | } |
| | |
| | input { |
| | width: 60px; |
| | padding: 5px; |
| | margin: 5px; |
| | border: none; |
| | border-radius: 3px; |
| | background: rgba(255, 255, 255, 0.2); |
| | color: white; |
| | } |
| | |
| | input:focus { |
| | outline: none; |
| | background: rgba(255, 255, 255, 0.3); |
| | } |
| | |
| | canvas { |
| | background: #333; |
| | border-radius: 8px; |
| | margin-top: 20px; |
| | } |
| | |
| | #resetBtn { |
| | position: fixed; |
| | top: 20px; |
| | right: 20px; |
| | background: #e74c3c; |
| | } |
| | |
| | #resetBtn:hover { |
| | background: #c0392b; |
| | } |
| | |
| | .controls { |
| | margin-top: 20px; |
| | } |
| | |
| | h2 { |
| | color: #4a90e2; |
| | margin-bottom: 20px; |
| | } |
| | |
| | .arrow-config label { |
| | display: inline-block; |
| | width: 60px; |
| | text-align: right; |
| | margin-right: 10px; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <button id="resetBtn" onclick="reset()" style="display: none;">Reset</button> |
| |
|
| | <div id="container"> |
| | <div id="startScreen" class="screen active"> |
| | <h2>Select Number of Arrows</h2> |
| | <div> |
| | <button onclick="selectArrows(2)">2 Arrows</button> |
| | <button onclick="selectArrows(3)">3 Arrows</button> |
| | <button onclick="selectArrows(4)">4 Arrows</button> |
| | <button onclick="selectArrows(5)">5 Arrows</button> |
| | </div> |
| | </div> |
| |
|
| | <div id="configScreen" class="screen"> |
| | <h2>Configure Arrows</h2> |
| | <div id="arrowConfigs"></div> |
| | <button onclick="startAnimation()">Start Animation</button> |
| | </div> |
| |
|
| | <canvas id="canvas" width="800" height="600" style="display: none;"></canvas> |
| | </div> |
| |
|
| | <script> |
| | let arrows = []; |
| | let animationId = null; |
| | let canvas, ctx; |
| | let pathPoints = []; |
| | |
| | class Arrow { |
| | constructor(length, speed) { |
| | this.length = length * 50; |
| | this.speed = speed; |
| | this.angle = 0; |
| | } |
| | } |
| | |
| | function selectArrows(num) { |
| | document.getElementById('startScreen').classList.remove('active'); |
| | document.getElementById('configScreen').classList.add('active'); |
| | document.getElementById('resetBtn').style.display = 'block'; |
| | |
| | const configsDiv = document.getElementById('arrowConfigs'); |
| | configsDiv.innerHTML = ''; |
| | |
| | for(let i = 0; i < num; i++) { |
| | const speed = (Math.random() * 4 + 1).toFixed(1); |
| | const length = (Math.random() * 4 + 1).toFixed(1); |
| | |
| | const config = document.createElement('div'); |
| | config.className = 'arrow-config'; |
| | config.innerHTML = ` |
| | <h3>Arrow ${i + 1}</h3> |
| | <div> |
| | <label>Speed:</label> |
| | <input type="number" min="0.1" max="5" step="0.1" value="${speed}" id="speed${i}"> |
| | </div> |
| | <div> |
| | <label>Length:</label> |
| | <input type="number" min="0.1" max="5" step="0.1" value="${length}" id="length${i}"> |
| | </div> |
| | `; |
| | configsDiv.appendChild(config); |
| | } |
| | } |
| | |
| | function startAnimation() { |
| | arrows = []; |
| | const inputs = document.querySelectorAll('.arrow-config input'); |
| | for(let i = 0; i < inputs.length/2; i++) { |
| | const speed = parseFloat(document.getElementById(`speed${i}`).value); |
| | const length = parseFloat(document.getElementById(`length${i}`).value); |
| | arrows.push(new Arrow(length, speed)); |
| | } |
| | |
| | document.getElementById('configScreen').classList.remove('active'); |
| | |
| | canvas = document.getElementById('canvas'); |
| | canvas.style.display = 'block'; |
| | ctx = canvas.getContext('2d'); |
| | |
| | pathPoints = []; |
| | if(animationId) cancelAnimationFrame(animationId); |
| | animate(); |
| | } |
| | |
| | function animate() { |
| | |
| | ctx.fillStyle = '#333'; |
| | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| | |
| | |
| | let x = canvas.width / 2; |
| | let y = canvas.height / 2; |
| | let totalAngle = 0; |
| | |
| | |
| | for(let i = 0; i < arrows.length; i++) { |
| | const arrow = arrows[i]; |
| | arrow.angle += arrow.speed * 0.02; |
| | totalAngle += arrow.angle; |
| | |
| | |
| | ctx.beginPath(); |
| | ctx.moveTo(x, y); |
| | const endX = x + Math.cos(totalAngle) * arrow.length; |
| | const endY = y + Math.sin(totalAngle) * arrow.length; |
| | ctx.lineTo(endX, endY); |
| | ctx.strokeStyle = '#4a90e2'; |
| | ctx.lineWidth = 3; |
| | ctx.stroke(); |
| | |
| | |
| | ctx.beginPath(); |
| | ctx.arc(x, y, 5, 0, Math.PI * 2); |
| | ctx.fillStyle = '#2ecc71'; |
| | ctx.fill(); |
| | |
| | |
| | x = endX; |
| | y = endY; |
| | |
| | |
| | if(i === arrows.length - 1) { |
| | pathPoints.push({x, y}); |
| | if(pathPoints.length > 200) pathPoints.shift(); |
| | } |
| | } |
| | |
| | |
| | if(pathPoints.length > 1) { |
| | ctx.beginPath(); |
| | ctx.moveTo(pathPoints[0].x, pathPoints[0].y); |
| | for(let i = 1; i < pathPoints.length; i++) { |
| | const point = pathPoints[i]; |
| | ctx.lineTo(point.x, point.y); |
| | } |
| | ctx.strokeStyle = '#e74c3c'; |
| | ctx.lineWidth = 2; |
| | ctx.stroke(); |
| | } |
| | |
| | animationId = requestAnimationFrame(animate); |
| | } |
| | |
| | function reset() { |
| | if(animationId) { |
| | cancelAnimationFrame(animationId); |
| | animationId = null; |
| | } |
| | |
| | arrows = []; |
| | pathPoints = []; |
| | |
| | document.getElementById('startScreen').classList.add('active'); |
| | document.getElementById('configScreen').classList.remove('active'); |
| | document.getElementById('canvas').style.display = 'none'; |
| | document.getElementById('resetBtn').style.display = 'none'; |
| | |
| | const configsDiv = document.getElementById('arrowConfigs'); |
| | configsDiv.innerHTML = ''; |
| | } |
| | |
| | |
| | window.onload = () => { |
| | canvas = document.getElementById('canvas'); |
| | ctx = canvas.getContext('2d'); |
| | }; |
| | </script> |
| | </body> |
| | </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |
