blendMode() controls how overlapping layers combine in p5.js (e.g. LIGHTEST keeps the brighter pixel)

p5.js exposes canvas blend modes via blendMode(), mirroring CSS mix-blend-mode and Photoshop layer modes. LIGHTEST keeps the lighter pixel wherever two layers overlap; ADD sums RGB channels (saturating toward white), useful for glow; DIFFERENCE subtracts channels, creating inversion artifacts. This is essential for layered generative art where elements must combine non-destructively. The blend mode persists until changed and is not saved by push()/pop(), so it must be reset explicitly (blendMode(BLEND)).

Examples

blendMode(ADD); for (let i = 0; i < 10; i++) { fill(0, 50, 255, 30); circle(random(width), random(height), 100); } blendMode(BLEND); // reset to default

Assessment

Predict the difference between LIGHTEST and ADD when drawing 20 semi-transparent white circles on black. Implement both and compare.