OpenGL processing shader sheet

Gallery
1

I made a google docs about what variables are used in what shader.
It might be usefull to someone some day.

4 Likes
2

Thanks that is helpful.

3

Very helpful, thank you so much! Is that a work in progress, or is it complete (as of now)?

4

… I tried adding a markdown copy to the wiki here – what do you think (or would you prefer to leave it in the gdoc only)?

5

It is really hard to read that table.

I made a image with processing. Feel free to improve, script is a bit sloppy, didn’t want to spend to much time. The csv is made with the file > download > csv option from google docs.

shader_variables
shader_variables.png557×759 15.2 KB 



void setup() {
  size(800, 1000);
  String[] lines = loadStrings("P5 Shaders - Sheet1.csv");
  
  float x1, x2, y1, y2;
  x1 = x2 = y1 = y2 = 0;
  
  int cols = 0;
  
  background(255);
  
  pushMatrix();
  translate(200, 200);
  for (int i = 0; i < lines.length; i++) {
    String[] tokens = split(lines[i], ",");
    
    if (i == 0) {
      
      pushMatrix();
      for (int j = 1; j < tokens.length; j++) {
        pushMatrix();
        String file = tokens[j];
        translate((j-1) * 25 + 7, 12);
        rotate(radians(-45));
        fill(0);
        text(file, 0, 0);
        popMatrix();
        
      }
      popMatrix();
      
     
    }
    else {
      translate(0, 20);
      
      fill(i % 2 == 0 ? color(255) : color(230));
      noStroke();
      rect(-10, 0, 325, 20);
      
      if (i == 1) {
        x1 = screenX(-10, 0);
        y1 = screenY(-10, 0);
        x2 = screenX(-10 + 325, 0);
        cols = tokens.length-1;
      }
      else if (i == lines.length-1) {
        y2 = screenY(-10, 20);
      }
      
      textAlign(LEFT, TOP);
      fill(0);
      text(tokens[0], -180, 0);
      for (int j = 1; j < tokens.length; j++) {
        if (tokens[j].equals("")) continue;
        pushMatrix();
        translate((j-1) * 25, 0);
        fill(0);
        //text(tokens[j], 0, 0);
        //ellipseMode(CORNER);
        ellipse(2, 10, 8, 8);
        popMatrix();
      }
    }
  }
  popMatrix();
  
  
  //stroke(255,0,0);
  noFill();
  rectMode(CORNERS);
  rect(x1, y1, x2, y2);
  
  for (int i = 0; i < cols; i++) {
    stroke(0);
    if (i == 7) stroke(255,0,0);
    float x = map(i, 0, cols, x1, x2);
    line(x, y1, x, y2);
  }
  
  println(cols);
  
}
2 Likes
6

Idea for an improved version: parse the glsl shader files directly from Processing (instead of using a csv) to generate that image. Then if the shaders change it’s trivial to regenerate the image :slight_smile:

1 Like