Creative Coding

p5.strands Can Finally Write an If-Statement — Shader Code Just Got Less Alien

p5.js 2.1 adds branching and looping to p5.strands, letting shader logic read like the JavaScript creative coders already know instead of the flattened math shaders have always demanded.

Shader languages have always forced a particular kind of contortion on anyone used to writing regular code: no real branching, no real loops, just math flattened into a sequence of operations that runs identically for every pixel. p5.strands, the shader-authoring layer p5.js introduced to make custom shaders more approachable, closed a real piece of that gap in version 2.1 by adding actual if/else branching and for-loops to the language.

What was actually missing before

Writing a shader in most environments means thinking in terms of vector math and conditional expressions dressed up to avoid real control flow, because GPUs historically executed shader code in a way that made true branching either impossible or extremely expensive. p5.strands’ whole premise is letting someone write shader logic using familiar JavaScript-style syntax rather than raw GLSL — but until 2.1, that syntax still didn’t include the two constructs anyone coming from regular programming reaches for immediately: conditionals and loops.

Why this specific addition matters more than it sounds

A lot of visual effects that are conceptually simple to describe — “repeat this pattern N times,” “do one thing if a pixel is in this region, another if it isn’t” — have historically required either restructuring the whole approach to avoid branching, or accepting a much less readable shader. Real if/else and for-loop support means those effects can now be written the way someone would naturally describe them, which matters enormously for anyone learning shaders for the first time coming from p5.js’s regular JavaScript-style sketches. It’s a smaller feature than the WebGPU renderer p5.js 2.2 shipped shortly after, but it’s arguably the more direct improvement to how approachable writing a shader actually feels day to day.

Where this sits in the bigger picture

This lands alongside p5.js 2.x becoming the editor’s default and a WebGPU-based renderer arriving as an experimental option — and it’s worth noting the Processing Foundation credits 31 co-authors on the 2.1 release alone, with a new pilot Open Source Software Microgrants Program specifically funding more of this kind of contributor work going forward. Branching and looping in p5.strands is a good example of the type of concrete, scoped improvement that program is designed to keep producing.