Home▸Crystals & Crystallization▸Crystal Lattice (2D): Rock-Salt Structure Viewer

Crystal Lattice (2D): Rock-Salt Structure Viewer

A rotatable NaCl rock-salt lattice drawn on a plain 2D canvas: sodium and chlorine atoms are projected from 3D grid coordinates with real rotation matrices and sorted by depth, so the structure reads correctly from any angle.

Crystals & Crystallization2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-crystal-lattice-crystals ↗ Open standalone

This 2D companion mirrors the 3D Crystal Lattice sim's rock-salt (NaCl) structure — sodium and chlorine ions alternating on a cubic grid, bonded to their nearest neighbours along each axis — but draws it with plain 2D canvas arcs and lines instead of WebGL. Every atom and bond position is rotated with the same yaw/pitch rotation matrices a 3D engine would use and projected to the screen with a painter's-algorithm depth sort, so dragging the view or letting it auto-spin still reads as a real rotating 3D structure.

⚙ Under the hood

Canvas2D rock-salt (NaCl) lattice viewer: 3D grid coordinates rotated with standard rotation matrices and projected orthographically, with a painter's-algorithm depth sort for atoms and bonds. Grid size, spacing, auto-rotate speed and tilt are all live controls.

crystal latticerock salt structurenaclunit cellatomic arrangement

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

FAQ
What structure does this simulation show?

A rock-salt (NaCl) crystal lattice: sodium and chlorine ions alternate on a cubic grid and bond to their nearest neighbours along each axis.

How is the 3D lattice drawn in 2D?

Every atom position is rotated with standard yaw/pitch rotation matrices and projected onto the canvas with a painter's-algorithm depth sort, so nearer atoms and bonds are drawn over farther ones.

How do I rotate the view?

Drag with the mouse or a finger, or leave the auto-rotate speed slider above zero to let it spin on its own.

What did you find?

Add reproduction steps (optional)