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