Optical illusions and visual effects exploit the way our brains process visual information. Op art creates the illusion of movement in static images; moire patterns emerge from overlapping grids; parallax creates depth from flat layers.
These tutorials show you how to create mesmerizing visual effects with code. Each one explains the perceptual science behind the effect alongside working code examples.
5 articles in this guide
Learn to create stunning op art and optical illusions programmatically with JavaScript and Canvas. 8 interactive examples: checkerboard warp, concentric pulse, moiré interference, rotating spiral, Fraser spiral illusion, Bridget Riley stripes, impossible cube, and generative op art composition.
Learn to create optical illusions with JavaScript and Canvas. 8 interactive examples: Checker Shadow illusion, impossible triangle, rotating snakes, Müller-Lyer arrows, Kanizsa triangle, Hermann grid, Café Wall illusion, and generative op art.
Learn to create moiré patterns with JavaScript and Canvas. 8 interactive examples: line interference, concentric circles, rotational moiré, wave superposition, dot screen halftone, animated phase shift, interactive mouse moiré, and generative moiré art.
Learn to build mesmerizing parallax effects with JavaScript and Canvas. 8 working examples: basic layer parallax, star field, mouse-tracking depth, infinite scrolling landscape, atmospheric fog layers, floating particles, tilt-shift camera, and generative parallax art.
Learn to create mesmerizing paint splatter art with JavaScript and Canvas. 8 working examples: basic splatter, drip physics, action painting, watercolor blooms, ink splash, spray paint, Jackson Pollock simulation, and generative splatter composition.