Advanced App - A Comprehensive Interactive Web Experience
About this app
Explore the Advanced App with a multitude of features including a Dashboard, Roles, Tasks, Media Players, Gallery, Data Tools and more. Experience interactivity and user-friendly design all in one app!
Dynamic Point Interaction with Fireworks Animation Select Point Color: Red (Problem) Green (Solution) Toggle CPU Mode
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dynamic Point Interaction with Fireworks Animation</title>
<meta name="description" content="Interact with a radar grid where animated SVG points symbolizing problems (red) and solutions (green) coordinate via animations to resolve conflicts.">
<meta name="keywords" content="SVG, animated points, interactive web app, radar, conflict resolution, fireworks animation">
<style>
body {
font-family: 'Roboto', sans-serif;
background: #e0e0e0;
overflow: hidden;
margin: 0;
position: relative;
}
#field {
width: 100vw;
height: 100vh;
background: radial-gradient(circle, #fff 10%, #aaa 70%);
position: relative;
}
.radar {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
margin: -125px 0 0 -125px;
border: 2px dashed rgba(0, 150, 255, 0.7);
border-radius: 50%;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
.point {
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
animation: pulseAnimation 1s infinite;
}
@keyframes pulseAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(1); }
}
.affect {
transition: transform 0.5s;
}
.firework {
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(3); }
}
#controls {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 10px;
border-radius: 8px;
z-index: 10;
}
#colorSelect {
margin-bottom: 10px;
}
#toggleCPU {
margin-top: 10px;
cursor: pointer;
background: #FFA07A;
border: none;
padding: 5px;
border-radius: 5px;
}
.chart {
position: absolute;
top: 400px;
left: 20px;
background: white;
border-radius: 8px;
padding: 10px;
overflow-y: auto;
max-height: 200px;
}
</style>
</head>
<body>
<div id="field">
<div class="radar"></div>
<div id="points-container"></div>
<div id="controls">
<label for="colorSelect">Select Point Color:</label>
<select id="colorSelect">
<option value="red">Red (Problem)</option>
<option value="green">Green (Solution)</option>
</select>
<button id="toggleCPU">Toggle CPU Mode</button>
</div>
<div class="chart" id="log"></div>
</div>
<script>
const points = new Map();
const field = document.getElementById('points-container');
const log = document.getElementById('log');
const colorSelect = document.getElementById('colorSelect');
const toggleCPUButton = document.getElementById('toggleCPU');
let cpuActive = true;
const updatePointsLog = () => {
log.innerHTML = Array.from(points).map(([key, point]) => `<div>[${point.color}] at (${point.x}, ${point.y})</div>`).join('');
};
const addPoint = (event) => {
const { offsetX, offsetY } = event;
const color = colorSelect.value;
const id = Date.now();
const point = createPoint(color, offsetX, offsetY, id);
points.set(id, { color, x: offsetX, y: offsetY, element: point });
field.appendChild(point);
updatePointsLog();
};
const createPoint = (color, x, y, id) => {
const point = document.createElement('div');
point.classList.add('point');
point.style.background = color;
point.style.left = `${x - 10}px`;
point.style.top = `${y - 10}px`;
point.onclick = () => handlePointClick(id);
return point;
};
const handlePointClick = (id) => {
const { color, x, y, element } = points.get(id);
if (color === 'green') {
attackNearestRed(x, y);
}
};
const attackNearestRed = (greenX, greenY) => {
let closestRed = null;
let closestDistance = Infinity;
points.forEach(({ color, element, x, y }, id) => {
if (color === 'red') {
const distance = Math.sqrt(Math.pow(greenX - x, 2) + Math.pow(greenY - y, 2));
if (distance < closestDistance) {
closestDistance = distance;
closestRed = { element, id, x, y, distance };
}
}
});
if (closestRed) {
const targetPoint = closestRed;
const { element, id } = targetPoint;
animatePoint(greenX, greenY, targetPoint).then(() => {
explode(targetPoint.element);
points.set(id, { ...points.get(id), color: 'green' });
element.style.background = 'green';
updatePointsLog();
});
}
};
const animatePoint = (startX, startY, target) => {
const targetX = target.x - 10;
const targetY = target.y - 10;
const pointElement = points.get(target.id).element;
return new Promise((resolve) => {
let duration = 700;
let startTime = null;
function animate(time) {
if (!startTime) startTime = time;
const progress = Math.min((time - startTime) / duration, 1);
const currentX = startX + (targetX - startX) * progress;
const currentY = startY + (targetY - startY) * progress;
pointElement.style.left = `${currentX}px`;
pointElement.style.top = `${currentY}px`;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
resolve();
}
}
requestAnimationFrame(animate);
});
};
const explode = (element) => {
const firework = document.createElement('div');
firework.classList.add('firework');
firework.style.position = 'absolute';
firework.style.left = `${element.offsetLeft}px`;
firework.style.top = `${element.offsetTop}px`;
firework.style.opacity = '0';
field.appendChild(firework);
setTimeout(() => firework.remove(), 1000);
};
const toggleCPU = () => {
cpuActive = !cpuActive;
toggleCPUButton.innerText = cpuActive ? "CPU Mode: ON" : "CPU Mode: OFF";
};
field.addEventListener('click', addPoint);
toggleCPUButton.addEventListener('click', toggleCPU);
</script>
</body>
</html>
NEW APPS
These are apps made by the community!