[WebGL] shader() | setUniform() {Examples}

docs/yuidoc-p5-theme/assets/shader-gradient.frag

@@ -0,0 +1,22 @@
+// Code adopted from "Creating a Gradient Color in Fragment Shader"
+// by Bahadır on stackoverflow.com
+// https://stackoverflow.com/questions/47376499/creating-a-gradient-color-in-fragment-shader
+
+
+precision highp float; varying vec2 vPos;
+uniform vec2 offset;
+uniform vec3 colorCenter;
+uniform vec3 colorBackground;
+
+void main() {
+
+  vec2 st = vPos.xy + offset.xy;
+
+  // color1 = vec3(1.0,0.55,0);
+  // color2 = vec3(0.226,0.000,0.615);
+
+  float mixValue = distance(st,vec2(0,1));
+  vec3 color = mix(colorCenter,colorBackground,mixValue);
+
+  gl_FragColor = vec4(color,mixValue);
+}

src/webgl/material.js

@@ -188,6 +188,66 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
  * @chainable
  * @param {p5.Shader} [s] the desired <a href="#/p5.Shader">p5.Shader</a> to use for rendering
  * shapes.
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * // Click within the image to toggle
+ * // the shader used by the quad shape
+ * // Note: for an alternative approach to the same example,
+ * // involving changing uniforms please refer to:
+ * // https://p5js.org/reference/#/p5.Shader/setUniform
+ *
+ * let redGreen;
+ * let orangeBlue;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ *   // note that we are using two instances
+ *   // of the same vertex and fragment shaders
+ *   redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ *   orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *
+ *   // initialize the colors for redGreen shader
+ *   shader(redGreen);
+ *   redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+ *   redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+ *
+ *   // initialize the colors for orangeBlue shader
+ *   shader(orangeBlue);
+ *   orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+ *   orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+ *
+ *   noStroke();
+ * }
+ *
+ * function draw() {
+ *   // update the offset values for each shader,
+ *   // moving orangeBlue in vertical and redGreen
+ *   // in horizontal direction
+ *   orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ *   redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
+ *
+ *   if (showRedGreen === true) {
+ *     shader(redGreen);
+ *   } else {
+ *     shader(orangeBlue);
+ *   }
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ *   showRedGreen = !showRedGreen;
+ * }
+ * </code>
+ * </div>
+ *
+ * @alt
+ * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
  */
 p5.prototype.shader = function(s) {
   this._assert3d('shader');

src/webgl/p5.Shader.js

@@ -277,6 +277,55 @@ p5.Shader.prototype.useProgram = function() {
  * @param {Object|Number|Boolean|Number[]} data the data to be associated
  * with that uniform; type varies (could be a single numerical value, array,
  * matrix, or texture / sampler reference)
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * // Click within the image to toggle the value of uniforms
+ * // Note: for an alternative approach to the same example,
+ * // involving toggling between shaders please refer to:
+ * // https://p5js.org/reference/#/p5/shader
+ *
+ * let grad;
+ * let showRedGreen = false;
+ *
+ * function preload() {
+ *   // note that we are using two instances
+ *   // of the same vertex and fragment shaders
+ *   grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   shader(grad);
+ *   noStroke();
+ * }
+ *
+ * function draw() {
+ *   // update the offset values for each scenario,
+ *   // moving the "grad" shader in either vertical or
+ *   // horizontal direction each with differing colors
+ *
+ *   if (showRedGreen === true) {
+ *     grad.setUniform('colorCenter', [1, 0, 0]);
+ *     grad.setUniform('colorBackground', [0, 1, 0]);
+ *     grad.setUniform('offset', [sin(millis() / 2000), 1]);
+ *   } else {
+ *     grad.setUniform('colorCenter', [1, 0.5, 0]);
+ *     grad.setUniform('colorBackground', [0.226, 0, 0.615]);
+ *     grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
+ *   }
+ *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ *
+ * function mouseClicked() {
+ *   showRedGreen = !showRedGreen;
+ * }
+ * </code>
+ * </div>
+ *
+ * @alt
+ * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
  */
 p5.Shader.prototype.setUniform = function(uniformName, data) {
   //@todo update all current gl.uniformXX calls