Skip to content

Commit dfbb93b

Browse files
king04amanking04aman
committed
add project: analog clock
1 parent 01fc433 commit dfbb93b

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎Analogue-Clock/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Analogue Clock
2+
_A simple JavaScript-based analogue clock. This project draws an analogue clock using HTML5 Canvas and JavaScript. The clock face, numbers, and hands update in real time, with smooth animations thanks to modern JavaScript techniques._
3+
4+
## Functionalities
5+
- Clock Rendering: Draws the clock face, numbers, and the clock hands (hour, minute, and second) using the HTML5 Canvas API.
6+
- Real-Time Updates: Updates the clock hands every second in sync with the system’s time using requestAnimationFrame for smooth animation.
7+
- Responsive Layout: The clock is centered on the screen using modern CSS (flexbox), and the canvas is dynamically resized.
8+
9+
## Description
10+
_The project demonstrates how to create a functional analogue clock using JavaScript and the Canvas API. The clock continuously updates based on the system's current time and renders three hands: the hour, minute, and second hands. `requestAnimationFrame()` is used to ensure that the clock updates smoothly in sync with the browser’s rendering, optimizing performance compared to traditional methods like `setInterval()`._
11+
12+
## Key Concepts:
13+
14+
- Canvas API: Used for drawing the clock face and hands.
15+
- JavaScript Timing: Time is managed using the Date object to calculate angles for the clock hands.
16+
- Animation: `requestAnimationFrame()` provides smooth, efficient animations, improving upon the more commonly used `setInterval()`.
17+
18+
## Edge Cases & Assumptions:
19+
20+
- The canvas size is fixed at 600x600 pixels for this example. If adapting for a different screen size or aspect ratio, further modifications would be required.
21+
- The clock assumes a 12-hour format, and no additional timezone or daylight-saving logic is included.
22+
23+
## Prerequisites
24+
No additional libraries are required as the project uses native JavaScript and HTML5.
25+
26+
## Installing Instructions
27+
1. Clone the repository:
28+
```bash
29+
git clone https://github.com/king04aman/All-In-One-Javascript-Projects.git
30+
```
31+
2. Navigate to the project directory:
32+
```bash
33+
cd All-In-One-Javascript-Projects/Analogue-Clock
34+
```
35+
3. Open index.html in your preferred web browser to run the clock.
36+
37+
38+
## Author
39+
Aman Kumar (@[king04aman](https://github.com/king04aman))

‎Analogue-Clock/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Analogue Clock</title>
9+
</head>
10+
<body>
11+
<div class="clock-container">
12+
<canvas id="canvas" width="600" height="600" aria-label="Analogue Clock"></canvas>
13+
</div>
14+
15+
<script src="main.js"></script>
16+
</body>
17+
</html>

‎Analogue-Clock/main.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/**
2+
* Initialize the canvas and context for drawing.
3+
*/
4+
const canvas = document.getElementById('canvas');
5+
const ctx = canvas.getContext('2d');
6+
let radius = canvas.height / 2;
7+
ctx.translate(radius, radius); // Move the canvas origin to the center
8+
radius *= 0.90; // Adjust radius size by 90% for better fit
9+
10+
// Constants for hand dimensions
11+
const HOUR_HAND_LENGTH = 0.5;
12+
const MINUTE_HAND_LENGTH = 0.8;
13+
const SECOND_HAND_LENGTH = 0.9;
14+
15+
const HOUR_HAND_WIDTH = 0.07;
16+
const MINUTE_HAND_WIDTH = 0.07;
17+
const SECOND_HAND_WIDTH = 0.02;
18+
19+
/**
20+
* Redraws the clock every animation frame.
21+
*/
22+
function startClock() {
23+
requestAnimationFrame(drawClock); // Ensure smoother rendering over setInterval
24+
}
25+
26+
/**
27+
* Function to draw the entire clock.
28+
*/
29+
function drawClock() {
30+
drawFace(ctx, radius);
31+
drawNumbers(ctx, radius);
32+
drawTime(ctx, radius);
33+
requestAnimationFrame(drawClock); // Call again for smooth animation
34+
}
35+
36+
/**
37+
* Draws the clock face.
38+
* @param {CanvasRenderingContext2D} ctx - The 2D drawing context.
39+
* @param {number} radius - The radius of the clock face.
40+
*/
41+
function drawFace(ctx, radius) {
42+
let grad;
43+
44+
// Draw the clock's white face
45+
ctx.beginPath();
46+
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
47+
ctx.fillStyle = 'white';
48+
ctx.fill();
49+
50+
// Create a gradient for the clock border
51+
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
52+
grad.addColorStop(0, '#333');
53+
grad.addColorStop(0.5, 'white');
54+
grad.addColorStop(1, '#333');
55+
56+
ctx.strokeStyle = grad;
57+
ctx.lineWidth = radius * 0.1;
58+
ctx.stroke();
59+
60+
// Draw the clock center
61+
ctx.beginPath();
62+
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
63+
ctx.fillStyle = '#333';
64+
ctx.fill();
65+
}
66+
67+
/**
68+
* Draws the numbers on the clock face.
69+
* @param {CanvasRenderingContext2D} ctx - The 2D drawing context.
70+
* @param {number} radius - The radius of the clock face.
71+
*/
72+
function drawNumbers(ctx, radius) {
73+
const fontSize = radius * 0.15;
74+
ctx.font = `${fontSize}px Arial`;
75+
ctx.textBaseline = 'middle';
76+
ctx.textAlign = 'center';
77+
78+
for (let num = 1; num <= 12; num++) {
79+
const ang = num * Math.PI / 6;
80+
ctx.rotate(ang);
81+
ctx.translate(0, -radius * 0.85);
82+
ctx.rotate(-ang);
83+
ctx.fillText(num.toString(), 0, 0);
84+
ctx.rotate(ang);
85+
ctx.translate(0, radius * 0.85);
86+
ctx.rotate(-ang);
87+
}
88+
}
89+
90+
/**
91+
* Draws the current time on the clock.
92+
* @param {CanvasRenderingContext2D} ctx - The 2D drawing context.
93+
* @param {number} radius - The radius of the clock face.
94+
*/
95+
function drawTime(ctx, radius) {
96+
const now = new Date();
97+
98+
let hour = now.getHours() % 12;
99+
let minute = now.getMinutes();
100+
let second = now.getSeconds();
101+
102+
// Calculate angles for hands
103+
const hourAngle = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
104+
const minuteAngle = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
105+
const secondAngle = (second * Math.PI / 30);
106+
107+
// Draw hands
108+
drawHand(ctx, hourAngle, radius * HOUR_HAND_LENGTH, radius * HOUR_HAND_WIDTH);
109+
drawHand(ctx, minuteAngle, radius * MINUTE_HAND_LENGTH, radius * MINUTE_HAND_WIDTH);
110+
drawHand(ctx, secondAngle, radius * SECOND_HAND_LENGTH, radius * SECOND_HAND_WIDTH);
111+
}
112+
113+
/**
114+
* Draws a hand on the clock.
115+
* @param {CanvasRenderingContext2D} ctx - The 2D drawing context.
116+
* @param {number} pos - The angle position of the hand.
117+
* @param {number} length - The length of the hand.
118+
* @param {number} width - The width of the hand.
119+
*/
120+
function drawHand(ctx, pos, length, width) {
121+
ctx.beginPath();
122+
ctx.lineWidth = width;
123+
ctx.lineCap = 'round';
124+
ctx.moveTo(0, 0);
125+
ctx.rotate(pos);
126+
ctx.lineTo(0, -length);
127+
ctx.stroke();
128+
ctx.rotate(-pos);
129+
}
130+
131+
// Start the clock
132+
startClock();

‎Analogue-Clock/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* Set body background and use flexbox to center the canvas */
2+
body {
3+
margin: 0;
4+
background-color: #000;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
}
10+
11+
/* Ensure the canvas is centered within its container */
12+
.clock-container {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
canvas {
19+
display: block;
20+
}

0 commit comments

Comments
 (0)