Advanced Radar Display

Range:

Gain:

Sea Clutter:

body { margin: 0; padding: 0; background-color: #000; color: #4cc9f0; font-family: 'Courier New', monospace; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .radar-container { position: relative; padding: 20px; background-color: #000814; border: 1px solid #1a5a7a; border-radius: 5px; box-shadow: 0 0 20px rgba(76, 201, 240, 0.2); } #radar { display: block; margin: 0 auto; } .controls { margin-top: 20px; padding: 15px; background-color: #001f3f; border-radius: 5px; display: flex; gap: 20px; flex-wrap: wrap; } .control-group { display: flex; align-items: center; gap: 10px; } label { font-size: 14px; } select, input[type="range"] { background-color: #000814; border: 1px solid #1a5a7a; color: #4cc9f0; padding: 5px; border-radius: 3px; } input[type="range"] { width: 120px; } .target { animation: pulse 2s infinite alternate; } @keyframes pulse { from { r: 6; opacity: 0.8; } to { r: 10; opacity: 1; } } document.addEventListener('DOMContentFrameLoaded', () => { const radar = document.getElementById('radar'); const scanBeam = document.getElementById('scanBeam'); const scanLine = document.getElementById('scanLine'); const beam = document.getElementById('beam'); const racon = document.getElementById('racon'); const targets = document.querySelectorAll('.target'); const history = document.getElementById('history'); const rangeSelect = document.getElementById('range'); const gainControl = document.getElementById('gain'); const seaClutterControl = document.getElementById('seaClutter'); let angle = 0; let scanSpeed = 2; let beamWidth = 10; let lastRaconFlash = 0; let targetHistory = []; // Initialize targets with random movement patterns targets.forEach((target, index) => { target.dataset.speed = (Math.random() * 0.5 + 0.5).toFixed(2); target.dataset.direction = Math.random() * Math.PI * 2; target.dataset.x = target.cx.baseVal.value; target.dataset.y = target.cy.baseVal.value; // Add initial history points for (let i = 0; i < 5; i++) { targetHistory.push({ x: target.cx.baseVal.value, y: target.cy.baseVal.value, time: Date.now() - i * 1000, target: index }); } }); function updateRadar() { // Update scan beam angle = (angle + scanSpeed) % 360; const radians = angle * Math.PI / 180; const endX = 400 + Math.sin(radians) * 350; const endY = 400 - Math.cos(radians) * 350; scanLine.setAttribute('x2', endX); scanLine.setAttribute('y2', endY); // Update beam sweep area const beamRadians = beamWidth * Math.PI / 180; const beamEndX = 400 + Math.sin(radians + beamRadians) * 350; const beamEndY = 400 - Math.cos(radians + beamRadians) * 350; beam.setAttribute('d', `M400,400 L400,50 A350,350 0 0,1 ${beamEndX},${beamEndY} Z`); // Flash racon when beam passes (every full rotation) if (angle % 360 < scanSpeed && Date.now() - lastRaconFlash > 1000) { lastRaconFlash = Date.now(); racon.style.opacity = '1'; racon.style.filter = 'url(#glow)'; setTimeout(() => { racon.style.opacity = '0.7'; racon.style.filter = 'none'; }, 200); } // Update targets targets.forEach((target, index) => { // Move target const speed = parseFloat(target.dataset.speed); let direction = parseFloat(target.dataset.direction); let x = parseFloat(target.dataset.x); let y = parseFloat(target.dataset.y); // Random direction changes if (Math.random() < 0.01) { direction += (Math.random() - 0.5) * Math.PI / 4; target.dataset.direction = direction; } // Update position x += Math.cos(direction) * speed; y += Math.sin(direction) * speed; // Boundary check const distanceFromCenter = Math.sqrt(Math.pow(x - 400, 2) + Math.pow(y - 400, 2)); if (distanceFromCenter > 340) { direction = Math.atan2(400 - y, 400 - x); target.dataset.direction = direction; } target.dataset.x = x; target.dataset.y = y; target.setAttribute('cx', x); target.setAttribute('cy', y); // Add to history targetHistory.push({ x: x, y: y, time: Date.now(), target: index }); }); // Update history trails updateHistoryTrails(); // Remove old history points const now = Date.now(); targetHistory = targetHistory.filter(point => now - point.time < 10000); requestAnimationFrame(updateRadar); } function updateHistoryTrails() { // Clear old trails while (history.firstChild) { history.removeChild(history.firstChild); } // Group history points by target const targetGroups = {}; targetHistory.forEach(point => { if (!targetGroups[point.target]) { targetGroups[point.target] = []; } targetGroups[point.target].push(point); }); // Create trails for each target Object.values(targetGroups).forEach((points, targetIndex) => { if (points.length < 2) return; // Create path let pathData = `M${points[0].x},${points[0].y}`; for (let i = 1; i < points.length; i++) { pathData += ` L${points[i].x},${points[i].y}`; } const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', pathData); path.setAttribute('stroke', '#f72585'); path.setAttribute('stroke-width', '2'); path.setAttribute('fill', 'none'); path.setAttribute('opacity', '0.5'); path.setAttribute('stroke-dasharray', '5,3'); history.appendChild(path); // Add time markers for (let i = 0; i < points.length; i += 10) { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', points[i].x); circle.setAttribute('cy', points[i].y); circle.setAttribute('r', '2'); circle.setAttribute('fill', '#f72585'); circle.setAttribute('opacity', '0.7'); history.appendChild(circle); } }); } // Control handlers rangeSelect.addEventListener('change', (e) => { const range = parseInt(e.target.value); document.querySelectorAll('#radar circle[stroke="#4cc9f0"]').forEach((circle, index) => { const radius = range * (1 - index * 0.2); circle.setAttribute('r', radius); }); // Update range labels document.querySelectorAll('.radar-container text').forEach((text, index) => { if (index < 5) { text.textContent = `${range * (1 - index * 0.2)}nm`; } }); }); gainControl.addEventListener('input', (e) => { const gain = parseInt(e.target.value); const opacity = gain / 100; document.querySelectorAll('.target').forEach(target => { target.style.opacity = opacity; }); }); seaClutterControl.addEventListener('input', (e) => { const clutter = parseInt(e.target.value); const noiseLevel = clutter / 200; // Clear existing noise document.querySelectorAll('.noise').forEach(el => el.remove()); // Add random noise based on clutter level for (let i = 0; i < clutter; i++) { const noise = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 350; noise.setAttribute('cx', 400 + Math.sin(angle) * distance); noise.setAttribute('cy', 400 - Math.cos(angle) * distance); noise.setAttribute('r', Math.random() * 3); noise.setAttribute('fill', '#4cc9f0'); noise.setAttribute('opacity', Math.random() * noiseLevel); noise.classList.add('noise'); radar.appendChild(noise); } }); // Start radar updateRadar(); });