OperatingSystemsPresentation/index.html at main · atongithub/OperatingSystemsPresentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deadlock</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="scroll-container">
        <header>
            <div class="header-content">
                 <a href="demo.html" class="header-brand">21CSC202J</a>
                     <nav class="header-nav">
                         <a href="demo.html">Interactive Demo</a>
                    </nav>
        </div>
        </header>

        <div class="theme-intro">
            <div class="container">
                <h1>Understanding Deadlock in Computing</h1>
                <div class="content-section">
                    <div class="content-image-left">
                        <img src="media/dead1.png" alt="Conceptual image for Deadlock">
                    </div>
                    <div class="content-text">
                        <p><strong>Deadlock</strong> is a situation in an operating system where two or more processes are blocked indefinitely, waiting for each other to release the resources that they need. Imagine a circular waiting game where no one can move forward.</p>
                        <h2>How a Deadlock Happens</h2>
                        <p>A deadlock can only occur if four necessary conditions are met simultaneously (the Coffman Conditions):</p>
                        <p class="numbered-point"><span>01</span> <strong>Mutual Exclusion:</strong> At least one resource must be held in a non-sharable mode.</p>
                        <p class="numbered-point"><span>02</span> <strong>Hold and Wait:</strong> A process holds at least one resource while waiting for another.</p>
                        <p class="numbered-point"><span>03</span> <strong>No Preemption:</strong> A resource cannot be forcibly taken from a process.</p>
                        <p class="numbered-point"><span>04</span> <strong>Circular Wait:</strong> A closed chain of processes waits for resources held by each other.</p>
                    </div>
                    <div class="content-image-right">
                        <img src="media/dead2.png" alt="Conceptual image for Deadlock">
                    </div>
                </div>
            </div>
        </div>

        <div class="theme-avoidance">
            <div class="container">
                <div class="two-col-section">
                    <div class="content-image-left">
                        <img src="media/bankersalgorithm.jpg" alt="Abstract visualization of the Banker's Algorithm">
                    </div>
                    <div class="content-text-full">
                        <h2>How to Avoid Deadlocks with Algorithms</h2>
                        <p>Deadlock avoidance requires that the operating system be given additional information about how resources are to be requested. With this knowledge, the system can decide for each request whether or not the current state is "safe." A state is safe if the system can allocate resources to each process in some order and still avoid a deadlock.</p>
                        <h3>The Banker's Algorithm</h3>
                        <p>This famous algorithm works by simulating the allocation of resources to check for a safe state. It requires knowing the maximum number of resources of each type that each process may request. Imagine a bank where the banker (OS) makes sure that it never lends out money (resources) in such a way that it can't fulfill all outstanding lines of credit (maximum needs).</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="theme-detection">
            <div class="container">
                <div class="two-col-section">
                    <div class="content-image-left">
                        <img src="media/deadlockdetection.jpg" alt="Visualization of a Wait-For Graph">
                    </div>
                    <div class="content-text-full">
                        <h2>Deadlock Detection</h2>
                        <p>If deadlocks are not avoided, they must be detected. Deadlock detection algorithms are run periodically to check for their presence. A common approach involves constructing a resource-allocation graph or using wait-for graphs and checking for cycles. A cycle in a wait-for graph indicates a deadlock.</p>
                        <p>Think of it like a detective searching for a pattern (a cycle) of processes waiting for each other.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="theme-demo">
            <div class="container">
                <div class="game-container">
                    <h2>Interactive Deadlock Simulation</h2>
                    <p>This simulation will demonstrate the "Circular Wait" condition, leading to a deadlock.</p>
                    <canvas id="deadlockCanvas" width="600" height="300"></canvas>
                    <div id="message"></div>
                    <div class="controls">
                        <button id="demoBtn">Run Deadlock Demo</button>
                        <button id="resetBtn">Reset</button>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="footer-content">
                <ul class="team-members">
                    <li><a href="#">Sharat Chandraa</a></li>
                    <li><a href="#">Kosuru Sri Vardhan</a></li>
                    <li><a href="#">Atul Govind M E</a></li>
                </ul>
            </div>
        </footer>

    </div> <script>
        // This 'DOMContentLoaded' event listener ensures that all the JavaScript code inside it
        // will only run AFTER the entire HTML page has been loaded and is ready.
        document.addEventListener('DOMContentLoaded', () => {

            // ==========================================================================
            //  Part 1: Deadlock Simulation Logic
            // ==========================================================================
            const canvas = document.getElementById('deadlockCanvas');
            const ctx = canvas.getContext('2d');
            const messageEl = document.getElementById('message');
            const demoBtn = document.getElementById('demoBtn');
            const resetBtn = document.getElementById('resetBtn');
            const PROCESS_COLOR = '#3498db';
            const RESOURCE_COLOR = '#2ecc71';
            const LOCKED_COLOR = '#e74c3c';
            const WAITING_COLOR = '#ffebc4';
            let gameState;

            function initState() {
                return {
                    processes: [{ id: 'P1', x: 100, y: 75, radius: 20, wants: 'R2', has: null },{ id: 'P2', x: 100, y: 225, radius: 20, wants: 'R1', has: null }],
                    resources: [{ id: 'R1', x: 500, y: 75, radius: 20, heldBy: null },{ id: 'R2', x: 500, y: 225, radius: 20, heldBy: null }],
                    deadlocked: false, gameOver: false
                };
            }
            function draw() {
                if (!canvas) return; // Failsafe if canvas doesn't exist
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                gameState.resources.forEach(r => {
                    ctx.beginPath();
                    ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
                    ctx.fillStyle = r.heldBy ? LOCKED_COLOR : RESOURCE_COLOR;
                    ctx.fill();
                    ctx.fillStyle = '#000';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = 'bold 12px Arial';
                    ctx.fillText(r.id, r.x, r.y);
                });
                gameState.processes.forEach(p => {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    ctx.fillStyle = PROCESS_COLOR;
                    ctx.fill();
                    ctx.fillStyle = '#fff';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = 'bold 12px Arial';
                    ctx.fillText(p.id, p.x, p.y);
                    if (p.has) {
                        const resource = gameState.resources.find(res => res.id === p.has);
                        drawArrow(resource.x, resource.y, p.x, p.y, RESOURCE_COLOR);
                    }
                    if (p.wants && p.has !== p.wants) {
                        const resource = gameState.resources.find(res => res.id === p.wants);
                        drawArrow(p.x, p.y, resource.x, resource.y, WAITING_COLOR);
                    }
                });
            }
            function drawArrow(fromx, fromy, tox, toy, color) {
                const headlen = 10;
                const angle = Math.atan2(toy - fromy, tox - fromx);
                ctx.strokeStyle = color;
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.moveTo(fromx, fromy);
                ctx.lineTo(tox, toy);
                ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
                ctx.moveTo(tox, toy);
                ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
                ctx.stroke();
            }
            function checkDeadlock() {
                const p1 = gameState.processes[0];
                const p2 = gameState.processes[1];
                if (p1.has === 'R1' && p1.wants === 'R2' && p2.has === 'R2' && p2.wants === 'R1') {
                    gameState.deadlocked = true;
                    gameState.gameOver = true;
                    messageEl.textContent = 'DEADLOCKED! Circular wait detected.';
                    messageEl.style.color = LOCKED_COLOR;
                    disableControls();
                }
            }
            function runDemo() {
                resetGame();
                disableControls();
                messageEl.textContent = "Demonstration sequence initiated...";
                const p1 = gameState.processes[0];
                const p2 = gameState.processes[1];
                const r1 = gameState.resources[0];
                const r2 = gameState.resources[1];
                let step = 0;
                const steps = [
                    () => { p1.has = 'R1'; r1.heldBy = 'P1'; messageEl.textContent = "Step 1: Process P1 acquires Resource R1."; draw(); },
                    () => { p2.has = 'R2'; r2.heldBy = 'P2'; messageEl.textContent = "Step 2: Process P2 acquires Resource R2."; draw(); },
                    () => { messageEl.textContent = "Step 3: P1 now wants R2 (held by P2)..."; draw(); },
                    () => { messageEl.textContent = "Step 4: ...and P2 wants R1 (held by P1)."; checkDeadlock(); draw(); }
                ];
                function nextStep() {
                    if (step < steps.length) {
                        steps[step]();
                        step++;
                        setTimeout(nextStep, 2000);
                    }
                }
                nextStep();
            }
            function resetGame() {
                gameState = initState();
                messageEl.textContent = '';
                messageEl.style.color = 'var(--white-bg)';
                enableControls();
                draw();
            }
            function disableControls() { demoBtn.disabled = true; }
            function enableControls() { demoBtn.disabled = false; }

            demoBtn.addEventListener('click', runDemo);
            resetBtn.addEventListener('click', resetGame);
            resetGame();


            // ==========================================================================
            //  Part 2: UX Improvements (Scroll, Header, etc.)
            // ==========================================================================
            const scrollContainer = document.querySelector('#scroll-container');
            const header = document.querySelector('header');
            let currentScroll = 0;
            let targetScroll = 0;
            const ease = 0.075;

            // Page Load Fade-in
            if(document.body) document.body.classList.add('loaded');

            // Main animation loop
            function animationLoop() {
                const distance = targetScroll - currentScroll;
                currentScroll += distance * ease;
                if (Math.abs(distance) < 0.1) {
                    currentScroll = targetScroll;
                }
                if (header) { // Add checks to prevent errors if elements don't exist
                    if (currentScroll > 50) {
                        header.classList.add('scrolled');
                    } else {
                        header.classList.remove('scrolled');
                    }
                }
                // Back to top logic removed as element is missing.

                if (scrollContainer) scrollContainer.style.transform = `translateY(-${currentScroll}px)`;
                requestAnimationFrame(animationLoop);
            }
            animationLoop();

            // Scroll & Resize Listeners
            window.addEventListener('wheel', (event) => {
                targetScroll += event.deltaY;
                if(scrollContainer) {
                    const maxScroll = scrollContainer.scrollHeight - window.innerHeight;
                    targetScroll = Math.max(0, Math.min(targetScroll, maxScroll));
                }
            });
            window.addEventListener('resize', () => {
                 if(scrollContainer) {
                    const maxScroll = scrollContainer.scrollHeight - window.innerHeight;
                    targetScroll = Math.max(0, Math.min(targetScroll, maxScroll));
                }
            });

        });
    </script>
</body>
</html>