Optical Illusion Gallery
Interactive canvas-based optical illusions gallery
이 도구에 대해
Explore a collection of classic optical illusions rendered entirely in your browser using HTML Canvas and CSS transforms. Browse the spinning disk, Hermann grid, Café wall, and rotating snakes illusions. Navigate with prev/next controls, read the science behind each illusion, and toggle animations on or off whenever you need a break.
사용 방법
- 1 The first illusion loads automatically — observe the effect.
- 2 Click 'Next' or 'Prev' to cycle through the four illusions.
- 3 Read the description below each illusion for the science explanation.
- 4 Click 'Stop Animation' at any time to pause all animated effects.
Why your brain sees motion that isn't there
An optical illusion is a mismatch between what your eyes physically receive and what your visual system reports. The eye is not a camera that faithfully relays pixels — it is the front end of a prediction machine that constantly guesses at edges, depth, contrast, and movement before you are consciously aware of anything. Illusions work by feeding that machine input it was built to misread. This gallery draws four classic illusions directly onto an HTML <canvas> element in your browser, recomputing the geometry frame by frame, so nothing is a pre-rendered image — the patterns are generated mathematically each time the page loads.
The four illusions and the science behind each
Each illusion targets a different stage of visual processing. Understanding the mechanism is what turns "neat trick" into genuine insight about perception.
| Illusion | What you perceive | Actual cause |
|---|---|---|
| Spinning Disk | Rings rotating at different speeds | Concentric rings of alternating segments are redrawn at a tiny rotation each frame; even rings turn one way, odd rings the other |
| Hermann Grid | Grey blobs at the line intersections | Lateral inhibition: retinal cells at an intersection are surrounded by more bright area, so they fire less and report "darker" |
| Café Wall | Horizontal mortar lines look wedged and sloped | Offset rows of black and white tiles push the perceived edge position at each joint; the lines are mathematically parallel |
| Rotating Snakes | Static rings appear to creep around | Repeated high-contrast colour sequences (orange, yellow, white, black) trigger motion detectors during tiny involuntary eye movements |
A worked example: how the Hermann grid is built
Open the Hermann Grid illusion and look at the corners of your vision while keeping your gaze centred. The tool lays a black background, then paints a grid of dark-grey squares 50 pixels apart, each one inset by a 12-pixel margin — that margin is the white "street" between blocks. At every crossing, the grey patch you think you see is not painted at all. The screen is genuinely uniform white there. The blob is manufactured inside your retina: a ganglion cell sitting over an intersection is flanked by white on four sides, while a cell sitting over a straight stretch of street has white on only two sides. The intersection cell receives more inhibition from its bright neighbours, so it signals a lower brightness, and your brain fills in a phantom grey dot. Stare straight at one intersection and the dot vanishes, because your sharp central vision (the fovea) has tighter cell spacing that resists the effect.
How the animated illusions are driven
Two of the four — the Spinning Disk and Rotating Snakes — use real animation. The tool advances a single angle value by 0.008 radians on every animation frame and feeds it into the drawing routine, which redraws the rings at the new orientation. That is why the Stop button matters: it cancels the animation loop and freezes the canvas. The Hermann Grid and Café Wall are completely static images — the "motion" and "slope" you perceive there come entirely from your own visual system, not from any movement on screen.
Practical tips for getting the strongest effect
- Use peripheral vision for the grid. The Hermann grid blobs are a peripheral phenomenon. Fix your gaze on one spot and notice the dots appearing everywhere except where you look.
- Keep a steady distance. Café Wall and Rotating Snakes are strongest at a moderate viewing distance where the tiles or rings subtend the right visual angle. Lean too close and the effect collapses.
- Don't fight the motion illusion by staring. Rotating Snakes relies on micro-movements of your eyes (microsaccades). Holding a rock-steady fixation on the centre dot actually weakens the perceived rotation, which is itself good evidence that your eyes are doing the work.
- Try light and dark mode. Contrast polarity changes the strength of lateral inhibition, so the same illusion can feel stronger or weaker depending on your screen brightness.
Common misunderstandings
People often assume illusions reveal that their eyes are "weak" or that some people are immune. Neither is true. These effects are nearly universal precisely because they exploit normal, healthy visual processing — the same shortcuts that let you recognise a face or judge a kerb's edge in a fraction of a second. They are also harmless: nothing here can damage your vision. If the animated patterns make you feel slightly queasy, that is a normal response to large-field motion, and clicking Stop ends it instantly. A second myth is that the moving snakes are a video or GIF; in this tool the snake rings are drawn as static coloured arcs, and the apparent rotation is generated wholly inside your nervous system.
Where illusions are genuinely useful
Beyond curiosity, these effects underpin real design decisions. Lateral inhibition (the Hermann grid mechanism) is why fine grids and thin grey lines look uneven in data tables and why designers soften them. The Café Wall effect warns typographers and tile-layers that staggered high-contrast patterns distort perceived alignment. And motion illusions are a standard probe in vision science and clinical testing, because the strength of the perceived movement correlates with how an individual's motion-detection pathways behave. Studying why a flat image seems to move is a direct window into how the brain turns light into a usable model of the world.