home/ atoms/ p5live-webgl-mode-differences

WEBGL mode in p5.js centers the origin and requires texture() for color, silently breaking 2D assumptions

p5.js has two renderer modes: default 2D (origin top-left, fill()/stroke() for color) and WEBGL (origin centered, texture()/material functions for color, orbitControl() for mouse 3D navigation). Adding WEBGL to createCanvas() silently invalidates several 2D assumptions: shapes at (0,0) appear at the center; fill() does not color WEBGL geometry; integrations like H.get() (Hydra texture) and strudel.get() (Strudel texture input) require WEBGL mode and fail silently in 2D. Wrong mode causes blank or misplaced output with no error.

Examples

In WEBGL mode: rect(0,0,100,100) draws a centered square, not a top-left one. H.get() Hydra texture only works with createCanvas(w,h,WEBGL).

Assessment

Name two drawing behaviors that differ between p5 2D and WEBGL modes. Explain why H.get() is WEBGL-only and write the correct createCanvas line for a WEBGL sketch.

“In WEBGL: origin is centered, use `texture()`/materials for color, `orbitControl”
context/ · L5-debug/p5live.md · chunk 1