Skip to content

Commit 474e32d

Browse files
quantagatequantagate
authored
Create 2025-03-09-Bohrs-Atomic-Orbits.html
1 parent 65e0769 commit 474e32d

File tree

1 file changed

+385
-0
lines changed

1 file changed

+385
-0
lines changed

‎_posts/2025-03-09-Bohrs-Atomic-Orbits.html‎

Lines changed: 385 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,385 @@
1+
---
2+
title: 'Bohrs Atomic Orbits'
3+
date: 2025-03-09
4+
permalink: /posts/2025/01/blog-post-3/
5+
tags:
6+
- quantum
7+
- math
8+
- physics
9+
---
10+
11+
12+
13+
14+
15+
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
16+
17+
<header class="text-center my-8 md:my-12">
18+
<h1 class="text-4xl md:text-6xl font-black brand-text-primary mb-2">Visualizing the Quantum Leap</h1>
19+
<p class="text-lg md:text-xl text-gray-600">An Interactive Journey into Bohr's Atomic Orbits</p>
20+
</header>
21+
22+
<main class="space-y-12">
23+
24+
<section class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
25+
<div class="md:col-span-2 bg-white rounded-lg shadow-md p-6">
26+
<h2 class="text-2xl font-bold brand-text-secondary mb-3">The Principle of Quantization</h2>
27+
<p class="text-gray-700 leading-relaxed">
28+
In 1913, Niels Bohr proposed a revolutionary idea: electrons in an atom don't orbit the nucleus at just any distance. Instead, they are restricted to specific, discrete orbits, much like planets are fixed in their orbits around the sun. Each allowed orbit has a distinct energy level and radius. This concept, known as quantization, was a fundamental step towards modern quantum mechanics. The smallest possible orbit in a hydrogen atom defines a fundamental physical constant.
29+
</p>
30+
</div>
31+
<div class="brand-bg-secondary text-white rounded-lg shadow-xl p-8 text-center">
32+
<h3 class="text-lg font-bold uppercase tracking-wider mb-2">Bohr Radius ($a_0$)</h3>
33+
<p class="text-5xl font-black">0.529</p>
34+
<p class="text-2xl font-bold">Ångströms</p>
35+
<p class="text-sm opacity-80 mt-2">(or $0.529 \times 10^{-10}$ meters)</p>
36+
</div>
37+
</section>
38+
39+
<section class="bg-white rounded-lg shadow-md p-6 md:p-8">
40+
<h2 class="text-2xl font-bold brand-text-secondary mb-2 text-center">The Growth of Orbits in Hydrogen</h2>
41+
<p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">
42+
The radius of an electron's orbit is determined by its principal quantum number, $n$. As $n$ increases, the electron moves to a higher energy level and a wider orbit. The radius doesn't grow linearly; it expands with the square of $n$ ($r_n \propto n^2$). This chart illustrates the dramatic increase in orbital size for the first few energy levels of a hydrogen atom.
43+
</p>
44+
<div class="chart-container">
45+
<canvas id="hydrogenRadiiChart"></canvas>
46+
</div>
47+
</section>
48+
49+
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8">
50+
<div class="bg-white rounded-lg shadow-md p-6 md:p-8">
51+
<h2 class="text-2xl font-bold brand-text-secondary mb-2 text-center">The Master Formula</h2>
52+
<p class="text-center text-gray-600 mb-6">
53+
The radius of any orbit in a hydrogen-like atom can be calculated with a general formula that incorporates fundamental physical constants.
54+
</p>
55+
<div class="formula-card">
56+
<div class="text-xl md:text-2xl mb-4">
57+
<span class="formula-term">r</span><sub class="formula-value">n</sub> =
58+
<span class="inline-block align-middle">
59+
<span class="block text-center border-b border-gray-600 pb-1">
60+
<span class="formula-term">n</span>² <span class="formula-term">h</span>²
61+
</span>
62+
<span class="block text-center pt-1">
63+
4π² <span class="formula-term">m</span> <span class="formula-term">e</span>² <span class="formula-term">Z</span>
64+
</span>
65+
</span>
66+
</div>
67+
<ul class="text-sm space-y-2">
68+
<li><span class="font-bold formula-term">n:</span> Principal Quantum Number (1, 2, ...)</li>
69+
<li><span class="font-bold formula-term">Z:</span> Atomic Number (Nuclear Charge)</li>
70+
<li><span class="font-bold formula-term">h:</span> Planck's Constant</li>
71+
<li><span class="font-bold formula-term">m:</span> Electron Mass</li>
72+
<li><span class="font-bold formula-term">e:</span> Electron Charge</li>
73+
</ul>
74+
</div>
75+
</div>
76+
<div class="bg-white rounded-lg shadow-md p-6 md:p-8">
77+
<h2 class="text-2xl font-bold brand-text-secondary mb-2 text-center">The Influence of the Nucleus</h2>
78+
<p class="text-center text-gray-600 mb-6">
79+
The model also applies to "hydrogen-like" ions (atoms with only one electron), like He⁺ or Li²⁺. The key difference is the atomic number, $Z$. A stronger nuclear charge (higher $Z$) pulls the electron in more tightly, resulting in a smaller orbital radius for the same energy level $n$.
80+
</p>
81+
<div class="chart-container">
82+
<canvas id="ionRadiiChart"></canvas>
83+
</div>
84+
</div>
85+
</section>
86+
87+
<section class="bg-white rounded-lg shadow-md p-6 md:p-8">
88+
<h2 class="text-2xl font-bold brand-text-secondary mb-2 text-center">Relationship: Radius vs. Quantum Number</h2>
89+
<p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">
90+
The connection between the orbital radius ($r_n$) and the principal quantum number ($n$) is a core prediction of the Bohr model. This scatter plot visualizes the quadratic relationship ($r_n = a_0 \cdot n^2$) for a hydrogen atom. Notice how the points form a distinct curve, confirming that the allowed radii are not random but follow a precise mathematical rule.
91+
</p>
92+
<div class="chart-container h-[40vh] max-h-[500px]">
93+
<canvas id="radiusVsNScatterChart"></canvas>
94+
</div>
95+
</section>
96+
97+
</main>
98+
99+
<footer class="text-center mt-12 py-6 border-t border-gray-300">
100+
<p class="text-gray-500">Infographic generated based on Bohr's atomic model principles.</p>
101+
<p class="text-xs text-gray-400 mt-2">Confirmation: No SVG or Mermaid JS used in this visualization. All charts rendered via Canvas.</p>
102+
</footer>
103+
104+
</div>
105+
106+
<script>
107+
// Function to load a script dynamically
108+
function loadScript(url, callback) {
109+
const script = document.createElement('script');
110+
script.src = url;
111+
script.onload = callback;
112+
script.onerror = () => console.error(`Failed to load script: ${url}`);
113+
document.head.appendChild(script);
114+
}
115+
116+
// Function to load a CSS file dynamically
117+
function loadCss(url) {
118+
const link = document.createElement('link');
119+
link.rel = 'stylesheet';
120+
link.href = url;
121+
document.head.appendChild(link);
122+
}
123+
124+
// Load Google Fonts CSS
125+
loadCss('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
126+
127+
// Load Tailwind CSS, then Chart.js, then initialize charts
128+
loadScript('https://cdn.tailwindcss.com', () => {
129+
loadScript('https://cdn.jsdelivr.net/npm/chart.js', () => {
130+
initializeCharts();
131+
});
132+
});
133+
134+
// Initialize charts and apply styles after libraries are loaded
135+
function initializeCharts() {
136+
const brilliantBlues = {
137+
primary: '#004AAD',
138+
secondary: '#0062D5',
139+
accent: '#419BFF',
140+
light: '#94C9FF',
141+
lighter: '#C7E2FF'
142+
};
143+
144+
// Apply global body font style
145+
document.body.style.fontFamily = "'Inter', sans-serif";
146+
document.body.style.backgroundColor = "#f0f4f8";
147+
document.body.style.color = "#4a5568"; // Tailwind gray-800 equivalent
148+
149+
// Apply dynamic CSS for brand colors
150+
const style = document.createElement('style');
151+
style.innerHTML = `
152+
.brand-text-primary { color: ${brilliantBlues.primary}; }
153+
.brand-text-secondary { color: ${brilliantBlues.secondary}; }
154+
.brand-bg-primary { background-color: ${brilliantBlues.primary}; }
155+
.brand-bg-secondary { background-color: ${brilliantBlues.secondary}; }
156+
.brand-bg-light { background-color: ${brilliantBlues.lighter}; }
157+
.brand-accent { background-color: ${brilliantBlues.accent}; }
158+
.formula-card {
159+
font-family: 'Courier New', Courier, monospace;
160+
background-color: #0d1117; /* Dark background for code */
161+
color: #c9d1d9; /* Light text for code */
162+
padding: 1.5rem;
163+
border-radius: 0.5rem;
164+
border-left: 4px solid ${brilliantBlues.accent};
165+
}
166+
.formula-term {
167+
color: ${brilliantBlues.light};
168+
}
169+
.formula-value {
170+
color: ${brilliantBlues.lighter};
171+
}
172+
.chart-container {
173+
position: relative;
174+
width: 100%;
175+
max-width: 600px;
176+
margin-left: auto;
177+
margin-right: auto;
178+
height: 300px;
179+
max-height: 400px;
180+
}
181+
@media (min-width: 768px) {
182+
.chart-container {
183+
height: 350px;
184+
}
185+
}
186+
`;
187+
document.head.appendChild(style);
188+
189+
190+
function wrapLabel(str, maxWidth) {
191+
if (str.length <= maxWidth) {
192+
return str;
193+
}
194+
const words = str.split(' ');
195+
const lines = [];
196+
let currentLine = '';
197+
for (const word of words) {
198+
if ((currentLine + word).length > maxWidth && currentLine.length > 0) {
199+
lines.push(currentLine.trim());
200+
currentLine = word + ' ';
201+
} else {
202+
currentLine += word + ' ';
203+
}
204+
}
205+
lines.push(currentLine.trim());
206+
return lines;
207+
}
208+
209+
const tooltipTitleCallback = (tooltipItems) => {
210+
const item = tooltipItems[0];
211+
let label = item.chart.data.labels[item.dataIndex];
212+
if (Array.isArray(label)) {
213+
return label.join(' ');
214+
}
215+
return label;
216+
};
217+
218+
const defaultChartOptions = {
219+
responsive: true,
220+
maintainAspectRatio: false,
221+
plugins: {
222+
legend: {
223+
display: false
224+
},
225+
tooltip: {
226+
callbacks: {
227+
title: tooltipTitleCallback
228+
},
229+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
230+
titleFont: { size: 14, weight: 'bold' },
231+
bodyFont: { size: 12 },
232+
padding: 10,
233+
cornerRadius: 4,
234+
displayColors: false
235+
}
236+
},
237+
scales: {
238+
x: {
239+
ticks: {
240+
color: brilliantBlues.primary,
241+
font: {
242+
weight: 'bold'
243+
}
244+
},
245+
grid: {
246+
display: false
247+
}
248+
},
249+
y: {
250+
beginAtZero: true,
251+
ticks: {
252+
color: brilliantBlues.primary
253+
},
254+
grid: {
255+
color: '#e0e0e0',
256+
borderDash: [5, 5]
257+
}
258+
}
259+
}
260+
};
261+
262+
263+
const hydrogenRadiiCtx = document.getElementById('hydrogenRadiiChart').getContext('2d');
264+
new Chart(hydrogenRadiiCtx, {
265+
type: 'bar',
266+
data: {
267+
labels: ['n=1', 'n=2', 'n=3', 'n=4'],
268+
datasets: [{
269+
label: 'Radius (Å)',
270+
data: [0.529, 2.116, 4.761, 8.464],
271+
backgroundColor: [
272+
brilliantBlues.lighter,
273+
brilliantBlues.light,
274+
brilliantBlues.accent,
275+
brilliantBlues.secondary
276+
],
277+
borderColor: brilliantBlues.primary,
278+
borderWidth: 1,
279+
borderRadius: 4
280+
}]
281+
},
282+
options: {
283+
...defaultChartOptions,
284+
scales: {
285+
...defaultChartOptions.scales,
286+
y: {
287+
...defaultChartOptions.scales.y,
288+
title: {
289+
display: true,
290+
text: 'Radius (Ångströms)',
291+
color: brilliantBlues.primary,
292+
font: { size: 14, weight: 'bold' }
293+
}
294+
}
295+
}
296+
}
297+
});
298+
299+
300+
const ionRadiiCtx = document.getElementById('ionRadiiChart').getContext('2d');
301+
const ionLabels = ['Hydrogen (Z=1)', 'Helium Ion (He⁺, Z=2)', 'Lithium Ion (Li²⁺, Z=3)'];
302+
new Chart(ionRadiiCtx, {
303+
type: 'bar',
304+
data: {
305+
labels: ionLabels.map(label => wrapLabel(label, 16)),
306+
datasets: [{
307+
label: 'Radius for n=1 (Å)',
308+
data: [0.529, 0.2645, 0.1763],
309+
backgroundColor: [brilliantBlues.accent, brilliantBlues.secondary, brilliantBlues.primary],
310+
borderColor: brilliantBlues.primary,
311+
borderWidth: 1,
312+
borderRadius: 4
313+
}]
314+
},
315+
options: {
316+
...defaultChartOptions,
317+
indexAxis: 'y',
318+
scales: {
319+
x: {
320+
...defaultChartOptions.scales.x,
321+
title: {
322+
display: true,
323+
text: 'Radius (Ångströms)',
324+
color: brilliantBlues.primary,
325+
font: { size: 14, weight: 'bold' }
326+
}
327+
},
328+
y: {
329+
...defaultChartOptions.scales.y,
330+
ticks: {
331+
...defaultChartOptions.scales.y.ticks,
332+
autoSkip: false
333+
}
334+
}
335+
}
336+
}
337+
});
338+
339+
340+
const scatterCtx = document.getElementById('radiusVsNScatterChart').getContext('2d');
341+
const scatterData = [];
342+
const a0 = 0.529;
343+
for (let n = 1; n <= 7; n++) {
344+
scatterData.push({ x: n, y: a0 * n * n });
345+
}
346+
new Chart(scatterCtx, {
347+
type: 'scatter',
348+
data: {
349+
datasets: [{
350+
label: 'Hydrogen Orbit Radius',
351+
data: scatterData,
352+
backgroundColor: brilliantBlues.secondary,
353+
borderColor: brilliantBlues.primary,
354+
pointRadius: 6,
355+
pointHoverRadius: 9
356+
}]
357+
},
358+
options: {
359+
...defaultChartOptions,
360+
scales: {
361+
x: {
362+
...defaultChartOptions.scales.x,
363+
type: 'linear',
364+
position: 'bottom',
365+
title: {
366+
display: true,
367+
text: 'Principal Quantum Number (n)',
368+
color: brilliantBlues.primary,
369+
font: { size: 14, weight: 'bold' }
370+
}
371+
},
372+
y: {
373+
...defaultChartOptions.scales.y,
374+
title: {
375+
display: true,
376+
text: 'Orbital Radius (Å)',
377+
color: brilliantBlues.primary,
378+
font: { size: 14, weight: 'bold' }
379+
}
380+
}
381+
}
382+
}
383+
});
384+
}
385+
</script>

0 commit comments

Comments
 (0)