Add more line examples

Author: davepagurek

src/webgl/material.js

@@ -1272,23 +1272,14 @@ p5.prototype.colorShader = function() {
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
  *   myShader = strokeShader().modify({
- *     fragmentDeclarations: `
- *       vec2 myCenter;
- *       vec2 myPosition;
- *     `,
  *     'Inputs getPixelInputs': `(Inputs inputs) {
- *       // Store a copy, then return unchanged
- *       myCenter = inputs.center;
- *       myPosition = inputs.position;
- *       return inputs;
- *     }`,
- *     'vec4 getFinalColor': `(vec4 c) {
  *       float opacity = 1.0 - smoothstep(
  *         0.0,
  *         15.0,
- *         length(myPosition - myCenter)
+ *         length(inputs.position - inputs.center)
  *       );
- *       return c * opacity;
+ *       inputs.color *= opacity;
+ *       return inputs;
  *     }`
  *   });
  * }
@@ -1306,6 +1297,101 @@ p5.prototype.colorShader = function() {
  * }
  * </code>
  * </div>
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ *
+ * function setup() {
+ *   createCanvas(200, 200, WEBGL);
+ *   myShader = strokeShader().modify({
+ *     declarations: `
+ *       uniform float time;
+ *       vec3 myPosition;
+ *     `,
+ *     'vec3 getWorldPosition': `(vec3 pos) {
+ *       myPosition = pos;
+ *       return pos;
+ *     }`,
+ *     'float getStrokeWeight': `(float w) {
+ *       // Add a somewhat random offset to the weight
+ *       // that varies based on position and time
+ *       float scale = 0.8 + 0.2*sin(10.0 * sin(
+ *         floor(time/250.) +
+ *         myPosition.x*0.01 +
+ *         myPosition.y*0.01
+ *       ));
+ *       return w * scale;
+ *     }`
+ *   });
+ * }
+ *
+ * function draw() {
+ *   background(255);
+ *   shader(myShader);
+ *   myShader.setUniform('time', millis());
+ *   strokeWeight(10);
+ *   beginShape();
+ *   for (let i = 0; i <= 50; i++) {
+ *     let r = map(i, 0, 50, 0, width/3);
+ *     let x = r*cos(i*0.2);
+ *     let y = r*sin(i*0.2);
+ *     vertex(x, y);
+ *   }
+ *   endShape();
+ * }
+ * </code>
+ * </div>
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ *
+ * function setup() {
+ *   createCanvas(200, 200, WEBGL);
+ *   myShader = strokeShader().modify({
+ *     declarations: `
+ *       float random(vec2 p) {
+ *         vec3 p3  = fract(vec3(p.xyx) * .1031);
+ *         p3 += dot(p3, p3.yzx + 33.33);
+ *         return fract((p3.x + p3.y) * p3.z);
+ *       }
+ *     `,
+ *     'Inputs getPixelInputs': `(Inputs inputs) {
+ *       // Replace alpha in the color with dithering by
+ *       // randomly setting pixel colors to 0 based on opacity
+ *       float a = inputs.color.a;
+ *       inputs.color.a = 1.0;
+ *       inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
+ *       return inputs;
+ *     }`
+ *   });
+ * }
+ *
+ * function draw() {
+ *   background(255);
+ *   shader(myShader);
+ *   myShader.setUniform('time', millis());
+ *   strokeWeight(10);
+ *   beginShape();
+ *   for (let i = 0; i <= 50; i++) {
+ *     stroke(
+ *       0,
+ *       255
+ *         * map(i, 0, 20, 0, 1, true)
+ *         * map(i, 30, 50, 1, 0, true)
+ *     );
+ *     vertex(
+ *       map(i, 0, 50, -1, 1) * width/3,
+ *       50 * sin(i/10 + frameCount/100)
+ *     );
+ *   }
+ *   endShape();
+ * }
+ * </code>
+ * </div>
  */
 p5.prototype.strokeShader = function() {
   this._assert3d('strokeShader');

src/webgl/shaders/line.frag

@@ -3,12 +3,12 @@ precision mediump int;
 uniform vec4 uMaterialColor;
 uniform int uStrokeCap;
 uniform int uStrokeJoin;
-uniform float uStrokeWeight;
 
 IN vec4 vColor;
 IN vec2 vTangent;
 IN vec2 vCenter;
 IN vec2 vPosition;
+IN float vStrokeWeight;
 IN float vMaxDist;
 IN float vCap;
 IN float vJoin;
@@ -34,7 +34,7 @@ void main() {
   inputs.tangent = vTangent;
   inputs.center = vCenter;
   inputs.position = vPosition;
-  inputs.strokeWeight = uStrokeWeight;
+  inputs.strokeWeight = vStrokeWeight;
   inputs = HOOK_getPixelInputs(inputs);
 
   if (vCap > 0.) {
@@ -68,6 +68,6 @@ void main() {
       discard;
     }
   }
-  OUT_COLOR = HOOK_getFinalColor(vec4(vColor.rgb, 1.) * vColor.a);
+  OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a);
   HOOK_afterFragment();
 }

src/webgl/shaders/line.vert

@@ -44,6 +44,7 @@ OUT vec2 vPosition;
 OUT float vMaxDist;
 OUT float vCap;
 OUT float vJoin;
+OUT float vStrokeWeight;
 
 vec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {
   // Rotate and translate so a starts at the origin and goes out to the right
@@ -81,6 +82,7 @@ void main() {
   vec4 posqIn = posp + uModelViewMatrix * vec4(aTangentIn, 0);
   vec4 posqOut = posp + uModelViewMatrix * vec4(aTangentOut, 0);
   float strokeWeight = HOOK_getStrokeWeight(uStrokeWeight);
+  vStrokeWeight = strokeWeight;
 
   float facingCamera = pow(
     // The word space tangent's z value is 0 if it's facing the camera