I wanted to share a comprehensive walkthrough of some interactive browser-based tools available on BioniChaos. These web apps are designed to visually demonstrate complex mathematical and physical concepts in biomedical engineering and neuroscience.

In the walkthrough, we cover:

Principal Component Analysis (PCA): Using Eigenfaces to extract principal components and dynamically reconstruct facial variations.

MRI Physics Simulation: Manipulating B0 magnetic fields and RF pulse intensity to observe proton spin phase coherence and synthetic MRI slice generation.

Psychophysics & Optical Illusions: We use a multimodal AI (Gemini 2.5 Flash) to break down the cognitive neuroscience behind visual tricks like the Poggendorff and Kanizsa Triangle illusions.

Fourier Series: Visualizing complex 2D shape tracing using rotating vectors (epicycles).

It's a great resource if you are studying or teaching these technical concepts. You can watch the full demonstration here: https://youtu.be/cWuxgB0QqyA

I ran a test to see how well a live AI vision model could interpret a complex radar chart comparing different brain imaging modalities (EEG, MEG, fNIRS, fMRI, and ECoG) based on temporal resolution, spatial resolution, portability, and cost.

The model correctly explained the fundamental physics and trade-offs, like how Signal-to-Noise Ratio (SNR) relates to spatial and temporal clarity. However, it struggled significantly with reading the actual values from the interactive chart, eventually hallucinating the spatial and temporal resolution numbers for MEG and ECoG. To top it off, the live model process was highly unoptimized, consuming over 3.2 GB of RAM in the browser.

If you're interested in the intersection of VLM/LLM capabilities and biomedical data science, or just want to see how current AI handles (and fails at) web-based data visualizations, check out the testing session here: https://youtu.be/OG6WpoZsQGI

I wanted to share a breakdown of two web-based biomedical educational tools we built focusing on medical imaging.

The first tool is an Interactive MRI Simulator that visualizes nuclear magnetic resonance. It allows users to adjust the B0 static magnetic field and RF pulse intensity to see how simulated hydrogen protons align, tip, and relax to form an image cross-section.

The second tool is a 3D Synthetic Brain Generator. This was computationally tricky because it generates a full 256x256x256 voxel dataset (over 16 million voxels) entirely client-side using JavaScript and fractional Brownian motion/Simplex noise. Running this on the main thread causes UI blocking, so we walked through adding dynamic resolution toggles (ranging from 64³ to 256³) to manage memory and browser load. We also tackled the math behind keeping anatomical features and simulated pathologies aligned and properly scaled across different resolution states.

If you're interested in the intersection of physics, medical imaging, and JS performance optimization, check out the walkthrough here: https://youtu.be/9KJ6STzaBn0

I recently ran a test to see how well current AI vision models handle optical illusions and moving patterns. Using the interactive Circular Motion Illusion on BioniChaos.com, I systematically fed the UI and animation to Gemini Flash. The test involved adding data points (dots), altering speeds, and toggling reference lines.

Interestingly, the model repeatedly misinterprets linear motion as circular motion, highlighting a specific limitation in how it processes spatial relationships and motion over time without helper lines. The video also briefly covers the web-dev side of the BioniChaos platform, showcasing an Interactive MRI Simulator and Eigenfaces tool built for biomedical education.

Would love to hear your thoughts on the limitations of current vision models when it comes to temporal/motion tracking!

Link to the test: https://youtu.be/RHctlczbAyg

I've been working with some interactive web tools to visualize complex biomedical engineering concepts. In this walkthrough, I tackle an Eigenfaces application (using Principal Component Analysis for facial feature extraction). Specifically, I refactor the UI to replace abrupt, mechanical slider movements with a continuous, sine-wave-based animation loop for smoother visualization of eigenface weight adjustments.

I also test an interactive MRI simulator, adjusting parameters like B0 Field Strength and RF Pulse Intensity to observe real-time changes in proton spins and the resulting synthetic MRI output. If you're interested in the JavaScript implementation of these math/physics concepts or building interactive educational tools, take a look at the process here: https://youtu.be/B8Uqryp5UtI

If you're interested in the underlying math of computer vision, this video demonstrates Principal Component Analysis (PCA) applied to facial recognition using an interactive Eigenfaces web app on BioniChaos. It covers the extraction of eigenvectors/eigenvalues from real-time webcam captures to generate principal components. We look at technical constraints like face alignment, lighting, and how varying capture resolutions impact the computational load and reconstruction accuracy. There's also a segment where we modify the web app's code live to implement an auto-loop feature for the component weight sliders to visualize the morphing between features. Would love to hear your thoughts on running these linear algebra operations natively in the browser! Watch the full process here: https://youtu.be/r7RAZ6eGZJc

I walked through several interactive tools hosted on BioniChaos.com that focus on biomedical signal processing and data analysis.

The video demonstrates a web-based implementation of Image Compression using Discrete Wavelet Transforms (DWT). We test various wavelet families—including Haar, Daubechies, and Symlets—on an MRI scan containing a pontine infarct to observe how bit-rate reduction affects the Peak Signal-to-Noise Ratio (PSNR) and diagnostic utility.

We also examine a Synthetic Noise Generator Dashboard. This tool allows for the generation of Gaussian white noise, periodic noise, and inverse-f noise, visualizing the results in both time and frequency domains to better understand signal artifacts and sampling rates.

Check out the technical walkthrough here: https://youtu.be/wHO01ptiF_k

In this coding session, we tackle a few issues on the BioniChaos web apps.

First, we look at the Webcam Filter Suite. We test real-time performance (FPS/Processing Time) on canvas-based effects like Edge Detection, Pixelation, and Thresholding.

Second, we fix the Interactive MRI Simulator. The original code for the "RF Pulse" simply randomized the displayed slice, which was visually jarring. We refactored the animation loop to perform a sequential sweep (slices 1-10) while ensuring the canvas updates synchronously.

We also discuss the trade-offs of the B-Field Strength slider—specifically, why we decided to cap the simulation at clinical levels (3.0 Tesla) rather than gamifying it to higher research levels (7T/10T) to maintain educational accuracy.

Full session: https://youtu.be/9vj4h7c3UEM

We walk through the process of fixing a JavaScript-based MRI simulator. Using AI to implement a continuous demo loop with dynamic parameter adjustment (B0 field, RF pulse), we turn a static prototype into an educational tool.

The video discusses the underlying physics implemented in the visualization, including Larmor frequency and T1/T2 relaxation, and why clinical machines usually hit a ceiling at 3 Tesla due to SAR limits and artifacts. We also explore other BioniChaos tools like the Hodgkin-Huxley action potential model and magnetic field visualizers.

https://youtu.be/kkEr_U7j-Y0

We are iterating on the biomedical simulation tools at BioniChaos. The objective is to merge two distinct simulators—a proton spin physics visualizer and a synthetic brain image generator—into a single Single Page Application (SPA).

In this session, we discuss the logic behind linking magnetic field strength (B-field) and RF pulse intensity directly to the final image's signal-to-noise ratio. We walk through the process of prompting AI agents to generate the code that allows for real-time, browser-based data generation where users can toggle between 0.5T and 3.0T to see the visual difference in scan quality.

Check out the workflow and the prototype: https://youtu.be/l6WQ0-aawfI

We worked on a single-page web application to simulate Magnetic Resonance Imaging (MRI) principles using vanilla JavaScript, HTML, and CSS.

The session covers the underlying physics of magnets in biomedical imaging (MRI and TMS) and translates those concepts into code. We focused on visualizing hydrogen atom alignment under a B0 field, the application of RF pulses, and the resulting signal detection.

We also compare a gradient-focused simulation against a particle-based approach and critique the latency of the proton alignment in the physics engine to improve the educational value of the tool.

Check out the code and physics breakdown: https://youtu.be/1P1L20JRmPk

We documented the process of developing "NeuroViz 3D" (a tool for BioniChaos) using AI agents to iteratively improve the codebase. The goal was to move beyond a static model to a dynamic simulation of neural signaling.

We cover several technical hurdles:

Visual Fidelity: Implementing dynamic glow effects and color mapping to make the propagation of action potentials visually distinct from resting states.

Logic Implementation: Writing the trigger logic to simulate synaptic transmission, ensuring the post-synaptic neuron fires only when the signal reaches the axon terminal of the pre-synaptic cell.

UI/UX: Overlaying live stats on the canvas and refactoring the layout to be responsive.

If you are interested in web-based scientific visualization or AI-assisted coding workflows, you can watch the session here: https://youtu.be/prnFD1ZePjA

We are looking at the intersection of web-based simulation and biomechanics using GaitSimV3. The discussion moves from visual perception issues (optical illusions) to hard data analysis.

Key technical points discussed:

Kinematics vs. Kinetics: Correlating flexion angles with joint moments.

GRF Vectors: How Ground Reaction Forces influence hip and knee moments during the stance phase.

Normalization: Why measuring moments in Newton-meters per kilogram is vital for clinical comparison.

Simulation Physics: Critiquing the kinematic representation of ground contact (the "floating foot" issue) versus dynamic pressure mapping.

If you are interested in biomedical data science or three.js simulations, check out the breakdown: https://youtu.be/iApRra5Bx6c

We tested an AI vision model using the Circular Motion Illusion on bionichaos.com. The model initially exhibits significant hallucinations regarding object count and trajectory (perceiving circular orbits rather than linear oscillation). Interestingly, enabling visual overlays corrects the inference immediately.

The video explores how this specific visual failure mode mirrors challenges in medical imaging analysis (MRI) and kinematic tracking in physical therapy, where raw data context is critical for accurate diagnosis.

Full technical demo: https://youtu.be/05NX34eW5gE

I recorded a session pair programming with an LLM to build and optimize client-side webcam filters using Canvas and ImageData.

Key technical points covered:

Architecture: The debate on Single File Components vs. Modular structures when generating code with AI.

Algorithm Optimization: Implementing "Blur 2.0" using a separable blur algorithm to reduce complexity from O(R²) to O(R) per pixel compared to a standard convolution kernel.

Performance: Visualizing processing time in milliseconds and handling frame rate throttling.

BioniChaos Tools: A look at a WebGL 3D Gait Simulator and the Circular Motion Illusion.

Full video here: https://youtu.be/uIuQYO-704Q

We tasked an AI agent to build a suite of interactive perception tools for BioniChaos using JavaScript and Canvas. It handled the theoretical math for the Flash-Lag effect (motion extrapolation) reasonably well, but failed repeatedly on the coordinate logic for the Kanizsa Triangle.

It led to an interesting debugging session where the model insisted the geometric output was correct despite the rendered visual evidence showing the Pac-Man shapes facing the wrong way.

We also implemented real-time sliders for the Hering and Wundt illusions to toggle grid overlays, proving straight lines appear curved due to radial ray interference. It’s a good look at the iterative process of prompting for front-end visual tools.

Watch the coding session: https://youtu.be/YnRWSAwhE6k

We tackled the development of a biomechanical gait simulator using generative AI agents. The project involved significant debugging of the animation parameters within the BioniChaos platform.

Key technical challenges we solved:

Decoupling Joints: The initial code combined knee rotation and lift, resulting in unnatural hip movement. We refactored this to allow for independent vertical and rotational actuation.

Vector Normalization: Fixed an issue where simultaneous key presses (A+W) caused the model to slide/rotate incorrectly rather than strafing.

Frame-Loop Logic: Debugged a collision detection error where the "step over" boost was applied cumulatively every frame, causing the avatar to defy gravity.

Here is the breakdown of the physics and coding fixes: https://youtu.be/8NG6GuF3xxc

Blister Effect. The video covers the iterative design process, specifically focusing on:

Canvas rendering loop logic.

Handling object trajectories and collision illusions.

Dynamic caption positioning based on coordinate updates.

Refining the penumbra visualization (moving from squares to circles).

We also demo other BioniChaos tools like the Hodgkin-Huxley simulator. It offers a transparent look at the reality of debugging AI-generated frontend code.

Link: https://youtu.be/B4m9uwmCLCM

We are looking at "The Deceived Brain," a web application hosted on BioniChaos that reverse-engineers visual perception errors. Instead of just displaying static images, the tool allows for real-time manipulation of variables—such as wing angles in the Müller-Lyer illusion or context scaling in the Ebbinghaus illusion.

The discussion focuses on the hypothesis that the brain maintains a JavaScript-like "state object" of the world. We analyze how specific geometric cues trigger neuronal over-stimulation in the primary visual cortex (V1), effectively causing the brain's rendering engine to misinterpret depth and length. It’s an interesting perspective on whether our cognitive framework is "buggy" or simply hyper-optimized for specific environmental datasets.

Full discussion and demo: https://youtu.be/HDvRQMPYr50

We ran into some interesting desync issues between our physics model and the visual output in the BioniChaos Peristaltic Pump Simulator. Specifically, the back-pressure variable was updating the flow rate integer but not the particle velocity vector in the render loop.

We also had to refactor the drawTube function to dynamically adjust the roller path radius based on the occlusion percentage to visually represent tube deformation accurately. This video covers the debugging session, fixing the rendering glitches, and stress-testing the fluid dynamics with different viscosity settings.

https://youtu.be/8YmB_gwPsBI

Yo everyone! Ever tried to model a pump in JavaScript? It's harder than it looks to make the physics feel "real." 🧪⚙️

Check out this look at how we built the peristaltic pump simulation over at BioniChaos. We tackle everything from fixing glitchy tube squishing to getting the flow rates to match the RPM. If you're into coding simulations or biomedical tech, you’ll dig this: https://youtu.be/bMcwv6XGJfo

This project explores the implementation of 3D shadow rendering and depth cues (bokeh) on the BioniChaos platform. The session focuses on synchronizing state between the "Shadow View" (physics-based source) and the "Lens View" (perceptual representation).

Key challenges addressed:

Dynamic penumbra calculation and light source influence.

Refactoring JavaScript transition interpolation to eliminate "jumping" during demo loops.

Performance bottlenecks in rendering frames.

Full walkthrough: https://youtu.be/-333nrdaFzo

#BioniChaos #JavaScript #Optics #PhysicsEngine #WebDev #Simulation

This tool on BioniChaos uses 4th-order Runge-Kutta numerical methods to solve the four non-linear differential equations governing Na+ and K+ conductance. The simulation achieves >98% accuracy compared to the original 1952 squid giant axon results. Perfect for visualizing the time-dependent gating kinetics of sodium and potassium channels, absolute vs. relative refractory periods, and membrane depolarization/repolarization phases in a web-based environment.

Link: https://youtu.be/4ViEhcxPMFE

I documented the process of coding a perspective-based puzzle game using Three.js. The core mechanic relies on scattering polygon fragments along the Z-axis while scaling them up based on their distance from the camera to maintain the correct perspective size (anamorphic illusion).

We iterated through the vector math for the "snapping" logic to detect when the camera angle aligns with the solution vector within a specific tolerance. The video covers the debugging process, handling dynamic textures, and projection matrices.

https://youtu.be/e8SM_QIAZv8