home/ atoms/ p5-webgl-origin-centered

p5's WEBGL renderer moves the origin to the canvas center and needs texture()/material before shapes show color

createCanvas(w, h, WEBGL) switches p5 into 3D/GPU mode, which changes several defaults from the 2D renderer. The coordinate origin (0,0) moves from the top-left corner to the canvas center, so 2D-authored coordinates land in the wrong place. Shapes render black until a texture() or material is applied. Some 2D-only calls are disabled, and orbitControl() must be called inside draw(). In P5LIVE specifically, editing the renderer argument of createCanvas counts as a setup() change and forces a hardCompile, and H.get()/strudel.get() textures require WEBGL mode.

Examples

createCanvas(400,400,WEBGL) places (0,0) at center — ellipse(0,0,30) draws in the middle, not the top-left. A shape stays black until texture(img) or a material is set.

Assessment

A sketch ported from 2D to WEBGL renders shapes off-position and colorless. Name the two default changes responsible and show how to correct the coordinate reference.

“`createCanvas(w,h,WEBGL)` moves the origin to the **center** (not top-left), needs `texture()` or a material before shapes show color, and disables some 2D calls.”
context/ · L1-instruments/p5live/gotchas.md · chunk 1