Skip to content

Commit 297eb9a

Browse files
joshiayushjoshiayush
committed
feat(visualizations): add power of two bit manipulation visualization
This adds a new interactive visualization for the power of two check using the n & (n-1) == 0 bit trick. The visualization displays binary representations of n and n-1 as individual bit boxes, then performs a step-by-step AND operation showing each bit comparison with highlighting and building up the result row bit by bit. A new Bit Manipulation category is added to the landing page with an SVG illustration showing the 1000 & 0111 = 0000 example. Signed-off-by: Ayush Joshi <ayush854032@gmail.com>
1 parent 67f3fbb commit 297eb9a

6 files changed

Lines changed: 812 additions & 0 deletions

File tree

‎algos/bit_manipulation/__init__.py‎

Whitespace-only changes.

‎algos/bit_manipulation/power_of_two.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
class Solution:
2+
def isPowerOfTwo(self, n: int) -> bool:
3+
if n == 0:
4+
return False
5+
return n & (n - 1) == 0

‎visualizations/bit-manipulation/power-of-two/index.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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+
<title>Power of Two - Bit Manipulation</title>
7+
<link rel="stylesheet" href="../../shared/css/main.css">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<a href="../../" class="back-link">&larr; Back to all algorithms</a>
13+
<h1>Power of Two</h1>
14+
<p class="description">Check if a number is a power of two using bit manipulation: n & (n-1) == 0</p>
15+
16+
<div class="controls">
17+
<div class="input-group">
18+
<label>Number (n):</label>
19+
<input type="number" id="numberInput" value="8" min="0" max="255" placeholder="e.g., 8">
20+
</div>
21+
<button class="btn-random" id="randomBtn">Random</button>
22+
<button class="btn-primary" id="resetBtn">Reset</button>
23+
<button class="btn-secondary" id="stepBtn">Step</button>
24+
<button class="btn-success" id="playBtn">Play</button>
25+
<div class="speed-control">
26+
<label>Speed:</label>
27+
<input type="range" id="speedSlider" min="100" max="2000" value="800">
28+
</div>
29+
</div>
30+
31+
<div class="main-content">
32+
<div class="visualization">
33+
<div class="section-title">Binary AND Operation</div>
34+
35+
<div class="bits-wrapper" id="bitsWrapper">
36+
<div class="bits-container" id="bitsDisplay">
37+
<!-- Bit rows will be rendered here -->
38+
</div>
39+
</div>
40+
41+
<div class="info-panel">
42+
<div class="info-box n-box">
43+
<h3>n</h3>
44+
<div class="info-value" id="nValue">8</div>
45+
<div class="info-desc">Input number</div>
46+
</div>
47+
<div class="info-box nminus-box">
48+
<h3>n - 1</h3>
49+
<div class="info-value" id="nMinusValue">7</div>
50+
<div class="info-desc">Subtract one</div>
51+
</div>
52+
<div class="info-box bit-box-info">
53+
<h3>Current Bit</h3>
54+
<div class="info-value" id="currentBitValue">-</div>
55+
<div class="info-desc">Position</div>
56+
</div>
57+
<div class="info-box result-box">
58+
<h3>Result</h3>
59+
<div class="info-value" id="resultValue">-</div>
60+
<div class="info-desc">n & (n-1)</div>
61+
</div>
62+
</div>
63+
64+
<div class="status" id="status">
65+
Click "Step" or "Play" to visualize the AND operation bit by bit
66+
</div>
67+
68+
<div class="legend">
69+
<div class="legend-item">
70+
<div class="legend-color bit-one-color"></div>
71+
<span>Bit = 1</span>
72+
</div>
73+
<div class="legend-item">
74+
<div class="legend-color bit-zero-color"></div>
75+
<span>Bit = 0</span>
76+
</div>
77+
<div class="legend-item">
78+
<div class="legend-color active-color"></div>
79+
<span>Active</span>
80+
</div>
81+
<div class="legend-item">
82+
<div class="legend-color result-color"></div>
83+
<span>Result</span>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div class="code-panel">
89+
<div class="section-title">Python Code - Power of Two</div>
90+
<div class="code-line" id="code-0">
91+
<span class="code-keyword">def</span> <span class="code-function">isPowerOfTwo</span>(n):
92+
</div>
93+
<div class="code-line" id="code-1">
94+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-keyword">if</span> n == <span class="code-number">0</span>:
95+
</div>
96+
<div class="code-line" id="code-2">
97+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-keyword">return</span> <span class="code-keyword">False</span>
98+
</div>
99+
<div class="code-line" id="code-3">
100+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-keyword">return</span> n & (n - <span class="code-number">1</span>) == <span class="code-number">0</span>
101+
</div>
102+
<div class="code-line" id="code-4">
103+
&nbsp;
104+
</div>
105+
<div class="code-line" id="code-5">
106+
<span class="code-comment"># Power of 2: only one bit set</span>
107+
</div>
108+
<div class="code-line" id="code-6">
109+
<span class="code-comment"># 8 = 1000, 7 = 0111</span>
110+
</div>
111+
<div class="code-line" id="code-7">
112+
<span class="code-comment"># 1000 & 0111 = 0000 (zero!)</span>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
118+
<script src="../../shared/js/visualizer.js"></script>
119+
<script src="script.js"></script>
120+
</body>
121+
</html>

0 commit comments

Comments
 (0)