Overview
This interactive radiological simulator models high-contrast diagnostic imaging systems by combining physical photon beam attenuation physics with browser-native constraint-based biomechanics. Rather than overlaying static graphic elements, the application dynamically solves tissue density equations across localized coordinate planes. X-ray generation is governed by relativistic Bremsstrahlung emission and characteristic radiation peaks, where tube potential (measured in kilovoltage peak or $kVp$) determines the maximum energy profile of emitted photons, while anode current (measured in milliamperes or $mA$) controls photon flux intensity.
Electromagnetic photon attenuation through biological media follows the Beer-Lambert attenuation law:
$$I(x, E) = I_0(E) \exp\left(-\int_0^x \mu(s, E) \, ds\right)$$
where $I_0(E)$ represents the initial spectral beam intensity at energy $E$, $x$ is the path thickness through the tissue layer, and $\mu(s, E)$ denotes the linear attenuation coefficient along path coordinate $s$. The total linear attenuation coefficient combines photoelectric absorption ($\tau$), Compton scattering ($\sigma$), and pair production ($\kappa$):
$$\mu = \tau + \sigma + \kappa$$
In diagnostic energy ranges ($40 \text{ to } 120 \text{ kVp}$), photoelectric interaction dominates at lower photon energies:
$$\tau \propto \rho \, Z^4 \, E^{-3}$$
where $\rho$ is material physical density, $Z$ is effective atomic number, and $E$ is photon energy. Bone, primarily composed of calcium hydroxyapatite ($Ca_{10}(PO_4)_6(OH)_2$, $Z_{eff} \approx 13.8$), possesses a significantly higher attenuation coefficient than surrounding soft muscular tissue ($Z_{eff} \approx 7.4$). This high atomic number contrast creates vivid shadow silhouettes on digital detector arrays.
How to Use
Beam Energy Control ($kVp$): Adjust the Tube Voltage slider to alter photon energy penetrating the anatomical model. Lower $kVp$ settings ($40 - 60 \text{ kVp}$) amplify photoelectric differential absorption, generating high-contrast images where dense calcium structures stand out against soft tissue. Higher $kVp$ settings ($90 - 120 \text{ kVp}$) favor Compton scattering, increasing beam penetration to reveal subtle cortical variations at reduced contrast ratios.
Flux Intensity ($mA$) & Mottle: Modify Anode Current to simulate total exposure rates. Adjust the Detector Quantum Mottle slider to introduce Poisson-distributed digital signal noise, simulating statistical photon fluctuation noise observed on flat-panel thin-film transistor (TFT) digital arrays under low-dose fluoroscopic conditions.
Interactive Canvas Divider & Direct Manipulation: Drag the central boundary line on the canvas visualizer to slide dynamically between the raw visual feed (or live webcam tracking stream) on the left and the attenuated radiological spectrum on the right. Click and drag any skeletal joint directly on the screen to stretch joint linkages, observing real-time angular kinematic calculations ($\theta$) displayed next to elbow and knee articulations:
$$\theta = \arccos\left(\frac{\vec{u} \cdot \vec{v}}{\|\vec{u}\| \|\vec{v}\|}\right)$$
Spectral Presentation Models: Toggle between Classic Radiography (Cyan-Silver), Live Fluoroscopy (Inverted Intensity), Calcium Density Mapping (Amber Core), and Anatomical Thermography (Chromatic Flame) to analyze attenuation gradients across diverse false-color clinical presentation maps.
Technical Details
Verlet Physics Kinematic Engine: The digital skeleton is driven by an iterative position-based Verlet integration solver operating without rotational accumulate errors. Joint positions update each frame according to kinetic motion equations:
$$\vec{r}_i(t + \Delta t) = 2\vec{r}_i(t) - \vec{r}_i(t - \Delta t) + \frac{\vec{F}_i(t)}{m_i} \Delta t^2$$
Bone length integrity is maintained by executing relaxation steps across distance constraint linkages:
$$\Delta \vec{r}_{ij} = \frac{1}{2} \left(1 - \frac{L_0}{\|\vec{r}_j - \vec{r}_i\|}\right) (\vec{r}_j - \vec{r}_i)$$
where $L_0$ is the natural resting bone length between joint $i$ and joint $j$.
Machine Learning Computer Vision Integration: Live markerless pose tracking imports the Google TensorFlow.js BlazePose deep learning pipeline. Webcam video frames are evaluated locally, extracting 33 three-dimensional spatial keypoints. Normalized coordinates are smoothed using linear interpolation ($LERP$) before feeding into the anatomical kinematic solver.
Web Audio Hardware Acoustic Engine: Acoustic feedback simulates real-world transformer hum and detector signal noise. An Auditory Node network generates a dual-frequency sine/sawtooth oscillator pair at $60 \text{ Hz}$ and $120 \text{ Hz}$ through a lowpass filter ($150 \text{ Hz}$ cutoff), paired with an LFO-modulated bandpass noise node ($1200 \text{ Hz}$, $Q=4.0$) reflecting tube voltage harmonics and exposure intensity.
Future Directions
Future iterations will integrate volumetric DICOM (Digital Imaging and Communications in Medicine) multi-slice volume rendering capabilities, allowing users to load patient CT scan datasets directly into the WebGL GPU shader pipeline. Soft tissue modeling will expand to incorporate non-rigid viscoelastic fluid dynamics, enabling realistic simulation of muscle deformation, arterial contrast flow, and organ displacement under external mechanical loads.
Additionally, biomechanical strain mapping will highlight focal bone stress points using real-time finite element analysis ($FEA$). Integration with WebXR standards will bring full stereoscopic 3D clinical radiography labs to virtual and augmented reality environments for medical education.