Guide: https://itp-xstory.github.io/p5js-shaders/
Collection of examples on Glitch.com: https://glitch.com/@kcconch/p-5-js-shaders
Welcome to p5.js shaders
Shaders are a great way to make graphics for your projects. So far you have probably made graphic shapes like rect() or ellipse() or maybe even 3D shapes like a plane() or a box(), and you should be more than familiar with using fill() to decide the color of these objects. But wouldn't it be great if we could make these objects have moving graphics on them? And without slowing down our sketch?
Enter the shader!
In this guide you will learn what a shader is, how to use it efficiently in p5, and how to make your own!
Consider this "the booklet of shaders". A great way to start familiarizing yourself with making amazing graphics for your projects in p5 and a simple introduction to shaders. Then, if you find yourself entranced by the world of shaders (like we do) please see the section on moving further with shaders, where we have collected some of the best sources online for finding shaders and learning more.
One of these, "The Book of Shaders" by Patricio Gonzalez Vivo and Jen Lowe, is a truly great resource if you want to dive deeper into the technical details of shaders, and we will be borrowing some explanations from this online book.
Thank you
This guide is an open-source project made during xStory at ITP NYU by Casey Conchinha and Louise Lessél.
We want to thank the following people for help and guidance during the project:
Adam Ferriss, for laying the groundwork for the entire project with his own p5 shader github repo.
Or Fleisher, Kyle Phillips, and Sehyun Kim for being our mentors.
Stalgia Grigg and Kate Hollenbach for answering our p5.js shader implementation questions.
Patricio Gonzalez Vivo and Jen Lowe for writing the amazing Book of Shaders.