Home▸Electronics & Circuits▸Capacitive Touchscreen Grid Sensing (2D)

2D Capacitive Touchscreen Grid Sensing Simulator

Interactive 2D capacitive touchscreen sensing simulator: drag one or two virtual fingers over a row/column electrode grid, watch mutual capacitance drop with inverse-square falloff near each contact, and see the controller reconstruct touch positions from the live capacitance heatmap.

Electronics & Circuits2DModerate60 FPS⇄ 3D version
2d-3d-touchscreen-sensing ↗ Open standalone

This simulator visualizes what a touchscreen controller actually measures: a grid of row and column electrodes, each crossing holding a small baseline mutual capacitance. Dragging a virtual finger over the grid locally increases the coupling to ground and pulls the capacitance down at nearby nodes with an inverse-square-like falloff, painted live as a heatmap. A simple peak-finding and weighted-centroid algorithm scans the whole grid every frame and reconstructs the touch position from the capacitance dip alone — drag the second dot to see the same scan resolve two simultaneous contacts (multi-touch), and use the sliders to see how grid density, contact strength, field radius and sensor noise change localization accuracy.

⚙ Under the hood

Interactive 2D capacitive touchscreen sensing simulator: drag one or two virtual fingers over a row/column electrode grid, watch mutual capacitance drop with inverse-square falloff near each contact, and see the controller reconstruct touch positions from the live capacitance heatmap.

touchscreen sensingcapacitive touchmutual capacitancemulti-touchsignal detection

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)