This project is a comprehensive demonstration of probability, visualized through a bouncing DVD logo. The application calculates and displays the real-time probability of the logo hitting any of the four corners of the canvas. It includes a pop-up explanation to introduce users to the concept and functionality of the application.
- Introduction
- Features
- How It Works
- File Structure
- Detailed Explanation
- Running the Project
- Conclusion
The purpose of this application is to provide a visual and interactive demonstration of probability. By observing a DVD logo bouncing around a canvas, users can see how the probability of the logo hitting a corner changes in real-time based on the logo's dimensions and the size of the canvas.
- Bouncing DVD Logo: A DVD logo that moves around the canvas, changing direction and color upon hitting the edges.
- Real-Time Probability Calculation: Calculates and displays the probability of the logo hitting any corner of the canvas.
- User Controls: Allows users to adjust the width and height of the DVD logo.
- Pop-Up Explanation: A pop-up window that explains the purpose and functionality of the application when the page loads.
- Responsive Design: Ensures the application is visually appealing and functional across different devices.
When the page loads, a pop-up window appears to explain the purpose of the application. The user can close this pop-up by clicking the "Close" button.
The DVD logo moves within the boundaries of the canvas. When it hits the edges, it bounces back in the opposite direction and changes color.
The probability of the DVD logo hitting a corner is calculated based on its area relative to the total area of the canvas. This probability is updated in real-time and displayed in the top-right corner.
The project consists of a single HTML file that includes all the necessary HTML, CSS, and JavaScript code.
project/
│
├── index.html
└── README.md
The HTML file contains the following elements:
- A
<canvas>element for the DVD logo animation. - User controls including input fields for adjusting the width and height of the logo, and a button to restart the simulation.
- A
<div>for displaying the real-time probability. - A pop-up
<div>that explains the purpose of the application.
The CSS styles the various elements to create a clean and professional UI. Key aspects include:
- Body: Centered content with a black background and white text.
- Canvas: A bordered and rounded canvas with a shadow for depth.
- Controls: Styled input fields and buttons with hover and active states.
- Probability Display: Positioned in the top-right corner with a semi-transparent background.
- Pop-Up: Centered pop-up with a close button.
The JavaScript code handles the following:
-
Pop-Up Display and Close Functionality:
- Display the pop-up when the page loads.
- Close the pop-up when the "Close" button is clicked.
-
Canvas and DVD Logo Animation:
- Initialize the canvas and context.
- Define the DVD logo properties including width, height, position, velocity, color, text, and font.
- Functions to generate random colors, draw the logo, and update its position upon collision with the canvas edges.
-
Probability Calculation:
- Calculate the probability of the logo hitting a corner based on its area relative to the canvas area.
- Update the probability display in real-time.
-
Animation Loop:
- Continuously update and redraw the logo, and update the probability display.
-
User Controls:
- Event listeners for input fields to adjust the logo size and restart the simulation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bouncing DVD Logo with Probability Explanation</title>
<style>
/* CSS styles omitted for brevity */
</style>
</head>
<body>
<div id="popup" class="popup">
<div class="popup-content">
<span class="close-btn" id="closeBtn">×</span>
<h2>Welcome to the Probability Demonstration</h2>
<p>
This application visually demonstrates the concept of probability.
Specifically, it calculates and displays the real-time probability of a bouncing DVD logo
hitting any of the four corners of the canvas.
Use the controls below to adjust the size of the logo and observe how the probability changes.
</p>
</div>
</div>
<canvas id="dvdCanvas" width="800" height="600"></canvas>
<div class="controls">
<label>
Width:
<input type="number" id="logoWidth" value="100" min="50" max="300">
</label>
<label>
Height:
<input type="number" id="logoHeight" value="50" min="25" max="150">
</label>
<button id="restartBtn">Restart Simulation</button>
</div>
<div class="probability" id="probabilityDisplay">Probability: 0%</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const popup = document.getElementById("popup");
const closeBtn = document.getElementById("closeBtn");
// Show the popup when the page loads
popup.style.display = "flex";
// Close the popup when the close button is clicked
closeBtn.addEventListener("click", () => {
popup.style.display = "none";
});
});
// Get the canvas and its context
const canvas = document.getElementById('dvdCanvas');
const ctx = canvas.getContext('2d');
// Get control elements
const widthInput = document.getElementById('logoWidth');
const heightInput = document.getElementById('logoHeight');
const restartBtn = document.getElementById('restartBtn');
const probabilityDisplay = document.getElementById('probabilityDisplay');
// Define the DVD logo properties
let dvdLogo = {
width: parseInt(widthInput.value), // Dynamic width from input
height: parseInt(heightInput.value), // Dynamic height from input
x: Math.random() * (canvas.width - parseInt(widthInput.value)), // Random starting x position
y: Math.random() * (canvas.height - parseInt(heightInput.value)), // Random starting y position
dx: 3, // Horizontal velocity
dy: 3, // Vertical velocity
color: getRandomColor(), // Initial color
text: 'DVD',
font: '20px Arial'
};
// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to draw the DVD logo
function drawLogo() {
ctx.fillStyle = dvdLogo.color;
ctx.fillRect(dvdLogo.x, dvdLogo.y, dvdLogo.width, dvdLogo.height);
// Draw the text in the center of the logo
ctx.fillStyle = '#FFFFFF'; // White text
ctx.font = dvdLogo.font;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(dvdLogo.text, dvdLogo.x + dvdLogo.width / 2, dvdLogo.y + dvdLogo.height / 2);
}
// Function to update the logo's position
function updatePosition() {
// Check for collision with the canvas boundaries
if (dvdLogo.x + dvdLogo.dx > canvas.width - dvdLogo.width || dvdLogo.x + dvdLogo.dx < 0) {
dvdLogo.dx = -dvdLogo.dx; // Reverse horizontal direction
dvdLogo.color = getRandomColor(); // Change color on bounce
}
if (dvdLogo.y + dvdLogo.dy > canvas.height - dvdLogo.height || dvdLogo.y + dvdLogo.dy < 0) {
dvdLogo.dy = -dvdLogo.dy; // Reverse vertical direction
dvdLogo.color = getRandomColor(); // Change color on bounce
}
// Update position
dvdLogo.x += dvdLogo.dx;
dvdLogo.y += dvdLogo.dy;
}
// Function to calculate the probability of hitting a corner
function calculateProbability() {
const cornerWidth = dvdLogo.width;
const cornerHeight = dvdLogo.height;
const cornerArea = (cornerWidth * cornerHeight) * 4; // Four corners
const totalArea = canvas.width * canvas.height;
const probability = (cornerArea / totalArea) * 100;
return probability.toFixed(2);
}
// Function to update the probability display
function updateProbabilityDisplay() {
const probability = calculateProbability();
probabilityDisplay.textContent = `Probability: ${probability}%`;
}
// Animation loop
let animationId; // To keep track of the animation frame
function animate() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw and update the logo
drawLogo();
updatePosition();
updateProbabilityDisplay();
// Request the next animation frame
animationId = requestAnimationFrame(animate);
}
// Function to initialize or reset the simulation
function initializeSimulation() {
// Reset logo properties based on input values
dvdLogo.width = parseInt(widthInput.value);
dvdLogo.height = parseInt(heightInput.value);
dvdLogo.x = Math.random() * (canvas.width - dvdLogo.width);
dvdLogo.y = Math.random() * (canvas.height - dvdLogo.height);
dvdLogo.color = getRandomColor();
// Optionally, reset velocities if desired
dvdLogo.dx = 3;
dvdLogo.dy = 3;
// Start the animation
cancelAnimationFrame(animationId); // Stop any existing animation
animate();
}
// Event listener for the restart button
restartBtn.addEventListener('click', initializeSimulation);
// Event listener for changes in logo size inputs
widthInput.addEventListener('change', initializeSimulation);
heightInput.addEventListener('change', initializeSimulation);
// Start the initial animation
animate();
</script>
</body>
</html>- Save the Combined HTML File: Save the provided code into a single HTML file (e.g.,
index.html). - Open in Browser: Open the saved HTML file in your preferred web browser.
- Interact with the Application:
- Read the Pop-Up Explanation: The pop-up will explain the purpose of the application.
- Close the Pop-Up: Click the "Close" button to dismiss the pop-up.
- Adjust Controls: Use the input fields to change the width and height of the DVD logo.
- Restart Simulation: Click the "Restart Simulation" button to reset the logo's position and color.
- Observe Probability: Watch the probability display update in real-time based on the logo's size and position.
This project is a powerful demonstration of probability, visualized through a fun and interactive bouncing DVD logo. It showcases the integration of HTML, CSS, and JavaScript to create a dynamic and educational application. The detailed explanation and real-time updates make it an engaging tool for understanding probability concepts.
By following this README, you should have a clear understanding of how the application works, how to run it, and the significance of each component. Enjoy exploring the fascinating world of probability with this interactive demonstration!