create README.

README.md

@@ -1,55 +1,97 @@
-# cos-palette
+# glsl-gradient-palette
 
-`cosPalette` is a simple shader function that is defined as
+This module can be used to create gradient color palettes. These can be used to colorize noise functions and procedurally
+generate textures in shaders. Below is an example of such a procedural texture.
 
-```glsl
-vec3 cosPalette(  float t,  vec3 a,  vec3 b,  vec3 c, vec3 d ){
-    return a + b*cos( 6.28318*(c*t+d) );
-}
-```
+<img src="images/lava.png" width="356" height="366" />
 
-where `a,b,c,d` are RGB-colors. This function can be used to make very compact color palettes.
-A simple editor for making such palettes is provided [here](http://erkaman.github.io/glsl-cos-palette/).
+More examples can be found in the provided [demo]()
 
+## Usage
 
-The function `cosPalette(t, a, b,  c, d )`, which is the palette, will basically assign a color to every value `t`, which is in the range `[0,1]`. So if you set `t` to be the value of some noise function(say, Perlin noise) in range `[0,1]`, you can use this
-palette to make simple procedural textures. The palette will basically colorize the noise. In the fragment shader, we can easily procedurally generate a texture by doing something like
+To create a gradient palette, you basically give the API a sequential list of colors. The API will then create a
+palette, by linearly interpolating between these colors. It is very easy to create a palette:
 
-```glsl
-    float t = noise(vPosition);
-    vec3 tex = cosPalette(t, uAColor, uBColor, uCColor, uDColor );
+```javascript
+    var simple =  [
+        [0.0, [1.0,0.0,0.0]],
+        [0.5, [0.0,0.0,0.0]],
+        [1.0, [0.0,0.0,1.0]],
+    ];
+
+    var opts =  {size:1024};
+
+    simplePaletteTexture = createGradientPalette(gl,simple);
 ```
 
-Credit goes to [Inigo Quilez](http://www.iquilezles.org/www/articles/palettes/palettes.htm) for coming up with this technique.
+above, we create a palette where we first interpolate from red to black, and then from black to red. To be more specific,
+From `0.0` to `0.5` we interpolate between the RGB colors `[1.0,0.0,0.0]` and `[0.0,0.0,0.0]`, and from
+`0.5` to `1.0` we interpolate from  `[0.0,0.0,0.0]` to `[0.0,0.0,1.0]`. The palette we just have created will
+look like this:
+
+<img src="images/simple.png" width="356" height="366" />
 
-## Examples
+in the upper parts of the image, we can see the palette, and below, we see what happens if we use the palette to
+colorize a noise function.
 
-Below are some examples of palettes
+It is easy to use the created palette in a shader. `createGradientPalette` will return the created palette as a
+texture(as a `gl-texture2d`), and this texture can be sent to a shader by doing
 
-`cosPalette(t,vec3(0.2,0.7,0.4),vec3(0.6,0.9,0.2),vec3(0.6,0.8,0.7),vec3(0.5,0.1,0.0))`
+```javascript
+   sphereShader.uniforms.uPalette = simplePaletteTexture.bind()
+```
+
+now we can use it to colorize a noise function by sampling from it, based on the noise value:
+
+```glsl
+   float t = noise(vPosition);
+   vec3 tex =   texture2D(uPalette, vec2(t, 0.0) ).xyz;
+```
 
+and that results in the textured sphere seen above.
 
-<img src="images/f.png" width="356" height="366" />
+By specifying more colors, we can create more advanced textures. For instance, the palette
 
+```javascript
 
-`cosPalette(t,vec3(0.2,0.5,0.3),vec3(0.0,0.5,0.7),vec3(1.0,1.0,1.0),vec3(0.0,0.3,0.7))`
+    var fireball =  [
+        [0.0, [0.4,0.4,0.4]],
+        [0.55, [0.0,0.0,0.0]],
+        [0.60, [1.0,0.0, 0.0]],
+        [0.70, [1.0,1.0, 0.0]],
+        [1.0, [0.4,0.4, 0.0]]
+    ];
+```
 
-<img src="images/g.png" width="356" height="366" />
+results in
 
+<img src="images/lava.png" width="356" height="366" />
 
-`cosPalette(t,vec3(0.6,0.0,0.0),vec3(1.0,0.0,0.0),vec3(1.0,0.0,0.0),vec3(1.0,0.0,0.0))`
+## API
 
-<img src="images/h.png" width="356" height="366" />
+### `function createGradientPalette(gl, gradientList[, opts])`
 
+Creates a gradient palette, and returns the created palette stored as a `gl-texture2d`, with a default size of
+`1024x1`.
 
-`cosPalette(t,vec3(1.0,0.4,0.0),vec3(0.4,0.8,0.0),vec3(0.5,0.3,0.9),vec3(0.9,0.6,0.9))`
+* `gl` your WebGL context.
+* `gradientList` the list of colors to use when creating the palette. See the previous section for more details.
+* `opts` optional arguments objects. Can currently only contains the property `opts.size`, which specifies the width
+of the created palette texture. Defaults to `1024`.
 
-<img src="images/j.png" width="356" height="366" />
+### `paletteDrawer = new PaletteDrawer(gl, position, size )`
 
+Creates a palette drawer, that can be used for drawing a palette texture on the screen. Useful for visualising a palette.
 
-`cosPalette(t,vec3(0.4,0.3,0.1),vec3(0.1,0.1,0.1),vec3(0.4,0.4,0.4),vec3(0.0,0.0,0.0))`
+* `gl` your WebGL context.
+* `position` the pixel position where your palette drawer will be drawn. Stored as an array `[x,y]`.
+* `size` the pixel size of your palette drawer. Stored as an array`[x_size,y_size]`.
 
-<img src="images/l.png" width="356" height="366" />
 
+### `paletteDrawer.draw(paletteTexture, canvasWidth, canvasHeight)`
 
+Draws a palette texture as a simple quad.
 
+* `paletteTexture` the palette texture to draw.
+* `canvasWidth` the width of the canvas.
+* `canvasHeight` the height of the canvas.

example/index.js

@@ -84,6 +84,7 @@ shell.on("gl-init", function () {
     ];
 
 
+
     var red =  [
         [0.0, [1.0,0,0.0]],
         [0.15, [0.5,0,0.1]],
@@ -111,14 +112,9 @@ shell.on("gl-init", function () {
 
     var fireball =  [
         [0.0, [0.4,0.4,0.4]],
-
-
         [0.55, [0.0,0.0,0.0]],
-
         [0.60, [1.0,0.0, 0.0]],
-
         [0.70, [1.0,1.0, 0.0]],
-
         [1.0, [0.4,0.4, 0.0]]
     ];
 
@@ -131,6 +127,14 @@ shell.on("gl-init", function () {
         [0.75, [0.40,0.30,0.20]],
         [1.0, [0.5,0.4,0.3]] ];
 
+
+    var simple =  [
+        [0.0, [1.0,0.0,0.0]],
+        [0.5, [0.0,0.0,0.0]],
+
+        [1.0, [0.0,0.0,1.0]],
+    ];
+
     var opts =  {size:1024};
 
     earthPaletteTexture = createGradientPalette(gl,earth, opts);
@@ -139,6 +143,7 @@ shell.on("gl-init", function () {
     somethingPaletteTexture = createGradientPalette(gl,something, opts);
     fireballPaletteTexture = createGradientPalette(gl,fireball, opts);
     rockPaletteTexture = createGradientPalette(gl,rock, opts);
+    simplePaletteTexture = createGradientPalette(gl,simple, opts);
 
 });
 
@@ -162,6 +167,8 @@ shell.on("gl-render", function (t) {
         paletteTexture =  fireballPaletteTexture;
     }else if(paletteType.val == 5) {
         paletteTexture =  rockPaletteTexture;
+    }else if(paletteType.val == 6) {
+        paletteTexture =  simplePaletteTexture;
     }
 
     gl.clearColor(bg[0], bg[1], bg[2], 1);
@@ -220,6 +227,7 @@ shell.on("gl-render", function (t) {
     gui.radioButton("Something", paletteType, 3);
     gui.radioButton("Fireball", paletteType, 4);
     gui.radioButton("Rock", paletteType, 5);
+    gui.radioButton("Simple", paletteType, 6);
 
     gui.separator();
 

index.js

@@ -106,6 +106,7 @@ PaletteDrawer
  */
 
 function PaletteDrawer(gl, position, size) {
+    this.gl = gl;
     var quad = _createQuad(  position, size);
     this.quadGeo = Geometry(gl).
     attr('aPosition', quad.positions, {size:2} ).
@@ -115,6 +116,7 @@ function PaletteDrawer(gl, position, size) {
 }
 
 PaletteDrawer.prototype.draw = function (paletteTexture, canvasWidth, canvasHeight) {
+
     this.quadShader.bind();
 
     var projection = mat4.create()
@@ -124,6 +126,7 @@ PaletteDrawer.prototype.draw = function (paletteTexture, canvasWidth, canvasHeig
     this.quadShader.uniforms.palette = paletteTexture.bind()
 
     this.quadGeo.draw();
+
 };
 
 module.exports.createGradientPalette=createGradientPalette;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "glsl-gradient-palette",
   "version": "1.0.0",
-  "description": "glsl function for making cosine palettes",
+  "description": "Module for creating gradient palettes for usage in glsl.",
   "scripts": {
     "start": "budo --verbose example/index.js -t glslify --live --open",
     "test": "standard"