Just for funsies….

Here’s a P5 shader that pulls a random image from unsplash every 10ish seconds.

It’s using a 3D object of a flat plane with vertices x,y.

It sends this image as a texture to the fragment shader.

The vertices are then displaced based on a noise field which is animated over time.

By not clearing the screen on every draw() loop (aka, not setting the background() color within draw()), we get some really interesting glitches at the edges. Pixel stretching and other artifacts.

Some screenshots:
1

2

Code:
https://editor.p5js.org/nicoleannevella/sketches/xMrgZfUbg

View fullscreen:
https://editor.p5js.org/nicoleannevella/present/xMrgZfUbg

////////////////////

And here is another P5 shader using the same noise distortion effects, but rather than pull in an image as texture, it’s using the screen coordinates to color the displaced vertices.

Some screenshots:

screen-shot-2021-03-30-at-9-37-00-pm

screen-shot-2021-03-30-at-9-37-05-pm

Code:
https://editor.p5js.org/nicoleannevella/sketches/6cdlHDIot

View fullscreen:
https://editor.p5js.org/nicoleannevella/present/6cdlHDIot

Leave a Reply