[p5js] Studying Shader with Creative Coding (1)

Shader Study with ITPers Shader x P5 JS (1)

Why Start Studying Shader?

I've been wanting to study shader since I saw a computer science course named 'computer graphics' when I was at college. I was learning Unity around that time, so 'graphics' sounded so cool. Yet, my course schedule was already loaded and it seemed quite hard for me, who was neither majoring nor minoring CS at the time (I wish I knew this is a stupid reason though).

Later, I learned more about Unity, openframeworks, and other creative coding tools or libraries. The more I worked with images and heavy renderings, I realized how important an effective computing is. And at NYU ITP summer CAMP, I first heard about 'Book of Shaders' from Michael Simpson's class.

It was always on my to do list. Finally, a week ago, I encountered some serious GPU / speed limitation while working on p5js WEBGL and 3D modes. Now I actually have an urge & full interest to start digging into SHADERS.

Shader is ...

Understanding Few Terms and Concepts

  • vertex
  • mesh: the complex shape that connected multiple vertexes, eg. Sphere
  • glPositions: builtin variable used in .vert file
  • glFragColor: builtin variable used in .frag file
  • GL_ES: shader API
  • vec3 aPosition: the attribute that has 3 vectors and tells a pixel its location on the canvas
  • void main() : the name of function where the program starts

How to Use Shader with P5JS ?

  1. no need to add .vert and .frag filenames on index.html. <script> tag can load javascript file only, so it doesn't understand shader files anyway
  2. preload .vert, .frag files in sketch.js file like below

This is the code I got from p5js shaders glitch example

let theShader;

function preload(){
  // load the shader
  theShader = loadShader('onecolor.vert', 'onecolor.frag');
}
function setup() {
  // shaders require WEBGL mode to work
  createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
  // shader() sets the active shader with our shader
  shader(theShader);

  // rect gives us some geometry on the screen
  rect(0,0,width,height);
}
  1. checkout this built-in shader method in p5js API

What I felt after following basic examples

  • the grammar feels just like java
  • excited to learn setUniform method which allows User's input interactivity

Reference