home/ atoms/ pgraphics-lerpcolor-blend

Cross-dissolving two layers per pixel with lerpColor() and a coordinate-dependent wave makes non-uniform wave transitions

To blend two PGraphics compositions in Processing, first convert each to a PImage with .get(), because per-pixel color reads need a PImage. Then a nested for-loop over (x,y) reads c1 = i1.get(x,y) and c2 = i2.get(x,y), and lerpColor(c1, c2, wave) interpolates between them where wave is in [0,1], typically from map(sin(radians(frameCount)), -1, 1, 0, 1). The result is drawn as a 1px rect at (x,y) onto a third ‘buffer’ PGraphics. A uniform wave gives a plain cross-fade; adding x and y into the wave argument (e.g. radians(frameCount + x + y)) makes different regions transition at different rates, producing wave-pattern dissolves. Per-pixel drawing is CPU-bound and slow, acceptable because the result is rendered to video rather than run live.

Examples

PImage i1 = pg.get(); PImage i2 = pg2.get(); color c3 = lerpColor(i1.get(x,y), i2.get(x,y), map(sin(radians(frameCount + x + y)), -1,1, 0,1)); buffer.fill(c3); buffer.rect(x, y, 1, 1);

Assessment

Why must you call .get() to obtain a PImage before reading pixel colors here, and what does adding x and y into the wave argument change about the dissolve?

“float wave equals to map sine we use a sine wave for now sine radians frame count”
corpus · programming-posters-processing-tutorial-tim-rodenbroker-free · chunk 4