Skip to content

Commit 1df6bb4

Browse files
ghostdeveloper404ghostdeveloper404
committed
Add initial implementation of Diffusion Explorer with interactive features and visualizations
0 parents  commit 1df6bb4

3 files changed

Lines changed: 855 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Diffusion Explorer</title>
8+
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<h1 class="top_title">Welcome to Diffusion Explorer</h1>
15+
<p class="description">Explore the fascinating world of diffusion processes!</p>
16+
<div class="spacer"></div>
17+
18+
<section class="concept_section">
19+
<div class="concept_grid">
20+
<article class="concept_card">
21+
<h3>Diffusion Fails for Long-Distance Neural Signaling</h3>
22+
<p>Diffusion spreads particles passively from high to low concentration. It works over tiny distances but slows
23+
drastically over axon-scale lengths.</p>
24+
<p class="equation">\(\langle x^2 \rangle = 6Dt\)</p>
25+
<p class="equation_note">\(\langle x^2 \rangle\): mean squared displacement, \(D\): diffusion constant, \(t\):
26+
time.</p>
27+
<p>Time grows with distance squared: \(t \propto x^2\). Example: to diffuse 1 mm, Na+ ions (\(D \approx 1.33
28+
\times 10^{-9}\,\text{m}^2/\text{s}\)) take about 160 s, while an action potential traveling
29+
\(50\,\text{m/s}\) takes ~0.02 s. Diffusion alone is too slow, so neurons use electrical signals.</p>
30+
31+
<div class="Diffusion_Constant">
32+
<label class="diffusion_label">Diffusion Constant (D): <span id="dValue">1.33e-9</span></label>
33+
<input class="diffusion_slider" type="range" id="dSlider" min="0.1e-9" max="5e-9" step="0.01e-9"
34+
value="1.33e-9">
35+
</div>
36+
37+
<div class="Time_Step_dt">
38+
<label class="Time_label">Time Step (dt): <span id="dtValue">0.01</span></label>
39+
<input class="Time_slider" type="range" id="dtSlider" min="0.001" max="0.1" step="0.001" value="0.01">
40+
</div>
41+
42+
<div class="Number_of_Particles">
43+
<label class="particles_label">Number of Particles: <span id="nValue">1000</span></label>
44+
<input class="particles_slider" type="range" id="nSlider" min="100" max="5000" step="100" value="1000">
45+
</div>
46+
</article>
47+
<article class="concept_card">
48+
<h3>Time Calculator: How Long It Takes</h3>
49+
<p>For 3D diffusion the time to reach distance \(x\) is:</p>
50+
<p class="equation">\(t_{\text{diff}} = \dfrac{x^2}{6D}\)</p>
51+
<p>Distance in meters, time in seconds. The quadratic dependence shows why long-distance diffusion is
52+
impractical.</p>
53+
<div class="calculation_section">
54+
<h2 class="param_title">Time Calculater</h2>
55+
<p class="param_description">Adjust distance see how time it takes to reach that distance </p>
56+
<div>
57+
<label class="distance_label">Distance (micrometers): </label>
58+
<input class="distance_input" id="distanceInput" type="number" value="100">
59+
</div>
60+
<div class="results_container" id="results"></div>
61+
<button class="calculate_button" id="calcBtn">Calculate Times</button>
62+
</div>
63+
</article>
64+
65+
<article class="concept_card">
66+
<h3> How Temperature, Viscosity, and Ion Size Affect \(D\)</h3>
67+
<p>Stokes-Einstein relation:</p>
68+
<p class="equation">\(D = \dfrac{k_B T}{6 \pi \eta r}\)</p>
69+
<ul class="concept_list">
70+
<li><strong>Temperature \(T\):</strong> higher \(T\) increases \(D\) and speeds diffusion.</li>
71+
<li><strong>Viscosity \(\eta\):</strong> thicker media lower \(D\) and slow diffusion.</li>
72+
<li><strong>Ion radius \(r\):</strong> larger ions move slower, reducing \(D\).</li>
73+
</ul>
74+
<p>Small ions in warm, low-viscosity fluid diffuse fastest; large ions in cold, viscous fluid diffuse slowest.
75+
</p>
76+
<div class="parameter_explorer">
77+
<h2 class="param_title">Parameter Explorer</h2>
78+
<p class="param_description">Adjust temperature, viscosity, and ion size to see how they affect the diffusion
79+
constant D</p>
80+
81+
<div class="param_control">
82+
<label class="param_label">Temperature (K): <span id="tempValue">310</span></label>
83+
<input class="param_slider" type="range" id="tempSlider" min="273" max="373" step="1" value="310">
84+
</div>
85+
86+
<div class="param_control">
87+
<label class="param_label">Viscosity (Pa·s): <span id="viscValue">0.001</span></label>
88+
<input class="param_slider" type="range" id="viscSlider" min="0.0001" max="0.01" step="0.0001"
89+
value="0.001">
90+
</div>
91+
92+
<div class="param_control">
93+
<label class="param_label">Ion Radius (nm): <span id="radiusValue">0.2</span></label>
94+
<input class="param_slider" type="range" id="radiusSlider" min="0.05" max="1.0" step="0.01" value="0.2">
95+
</div>
96+
97+
<button class="apply_button" id="applyParams">Apply Parameters to D</button>
98+
</div>
99+
</article>
100+
</div>
101+
</section>
102+
103+
104+
105+
106+
107+
108+
109+
<div class="graph_section">
110+
<div class="graphs">
111+
<h2 class="graph_title">Diffusion Graphs</h2>
112+
<p class="graph_description">The mean squared displacement (MSD) of a particle changes with time. The linear
113+
increase in MSD indicates normal diffusion, where particles move randomly and spread out at a constant rate over
114+
time.</p>
115+
<div id="msdPlot" style="width: 600px; height: 400px;"></div>
116+
</div>
117+
<div class="graphs">
118+
<h2 class="graph_title">Diffusion Time</h2>
119+
<p class="graph_description">See how diffusion time scales with distance. and The curved (non-linear) rise
120+
indicates that diffusion time scales with the square of the distance (
121+
𝑡
122+
∝
123+
𝑥
124+
2
125+
t∝x
126+
2
127+
). This means that doubling the distance makes diffusion take about four times longer, highlighting how
128+
diffusion becomes very slow over large distances. </p>
129+
<div id="diffusionTimePlot" style="width: 600px; height: 400px;"></div>
130+
</div>
131+
<div class="graphs">
132+
<h2 class="graph_title">Compare Diffusion Constants</h2>
133+
<p class="graph_description">This graph compares the time required for signal transmission by diffusion and by action potentials over increasing distances. Diffusion becomes dramatically slower as distance increases, while action potentials transmit signals rapidly and efficiently with nearly linear time scaling. This highlights why biological
134+
systems rely on action potentials rather than diffusion for long-distance communication.</p>
135+
<div id="comparePlot" style="width: 600px; height: 400px;"></div>
136+
</div>
137+
</div>
138+
139+
140+
141+
142+
143+
<script src="https://unpkg.com/three@0.151.3/build/three.min.js"></script>
144+
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js?v=0.16.11"></script>
145+
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js?v=0.16.11"
146+
onload="renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
147+
<script src="script.js"></script>
148+
</body>
149+
150+
</html>

0 commit comments

Comments
 (0)