# OpenGL processing shader sheet

**URL:** https://discourse.processing.org/t/opengl-processing-shader-sheet/13432
**Category:** Gallery
**Created:** [August 17, 2019, 2:17pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432 "2019-08-17T14:17:28Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)
#### Post date: [August 17, 2019, 2:17pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/1 "2019-08-17T14:17:28Z")

</div>

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

> **[P5 Shaders](https://docs.google.com/spreadsheets/d/1t00bVoEWSU7kgUq6X3opd7b_rQEZsqOkfhFzs3y9exc/edit?usp=sharing)**
>
> Sheet1
> 
> \<a...

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 17, 2019, 4:18pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/2 "2019-08-17T16:18:35Z")

</div>

Thanks that is helpful.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 17, 2019, 4:48pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/3 "2019-08-17T16:48:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 17, 2019, 4:57pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/4 "2019-08-17T16:57:07Z")

</div>

… 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)?

- [https://github.com/processing/processing/wiki/Advanced-OpenGL#opengl-processing-shaders](https://github.com/processing/processing/wiki/Advanced-OpenGL#opengl-processing-shaders)

---

<div class="post-metadata">

### Author: ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)
#### Post date: [August 17, 2019, 7:26pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/5 "2019-08-17T19:26:47Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73c647b59207981f2e80825a0024bf2470a33065.png)

```auto

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);
  
}

```

---

<div class="post-metadata">

### Author: ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [August 21, 2019, 2:09pm UTC](https://discourse.processing.org/t/opengl-processing-shader-sheet/13432/6 "2019-08-21T14:09:23Z")

</div>

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 🙂
