xyz_patterns.yaml

styles:

  ### Patterns
  # each pattern style should mixin `xyz_feature_attribute` (defined below), which adds an
  # attribute with the name `xyz_feature` inside shader blocks

  xyz_pattern_stripes:
      base: polygons
      mix: [xyz_feature_attribute, functions-aastep, patterns-stripes, space-screen, space-tile]
      blend: inlay
      # animated: true
      shaders:
          defines:
              STRIPES_ALPHA: 0.75
              STRIPES_SCALE: 2.
              STRIPES_ANGLE: 0.7853981634
          blocks:
              color: |
                  color.rgb = u_pattern_color;
                  //vec2 st = getScreenNonStretchCoords();
                  vec2 st = getTileCoords() * .35;
                  //st.x += log(1. - xyz_feature) * u_time * .1;
                  color = mix(color, vec4(0.980, 0.980, 0.980, 0.25),
                  stripes(st*85., xyz_feature, STRIPES_ANGLE));

  xyz_pattern_dash:
    base: polygons
    blend: inlay
    mix: [xyz_feature_attribute, block, space-screen, space-tile, tiling-tile, shapes-type]
    shaders:
        defines:
            ZOOM_START: 12.
            ZOOM_END: 18.
            ZOOM_IN: .0
            ZOOM_OUT: 1.
            DASH_SCALE: 7.
            DASH_TILE_STYLE: tile
            DASH_TYPE: fill
        blocks:
            global: |
                float dashDF(vec2 st) {
                    return min(cos((st.x-st.y)*PI),-cos((st.x+st.y+.5)*PI*.6666)*5.);
                }
            color: |
                vec3 dash_color = u_pattern_color;
                vec3 dash_background_color = vec3(1.);
                float dash_size = 1. - xyz_feature;
                //vec2 st = getScreenNonStretchCoords();
                vec2 st = getTileCoords();
                color.rgb = mix(dash_color,
                                dash_background_color,
                                DASH_TYPE(dash_size, dashDF(DASH_TILE_STYLE(st*DASH_SCALE,3.))) );

  ### Add XYZ feature attribute

  # adds an attribute with a normalized 0-1 value based on the current XYZ
  # feature property and viz mode (range, rank, etc.)
  xyz_feature_attribute:
    shaders:
      attributes:
        xyz_feature:
          type: float
      uniforms:
        u_pattern_color: [1, 1, 1] # RGB color to use for pattern fill
    draw:
      attributes:
        xyz_feature: global.featureNormalizedValue

  ### Dependencies

  functions-aastep:
      doc:
          author:
              name: Matt DesLauriers
              twitter: mattdesl
          version: 0.0.1
          tangram-version: 0.0.7
          licence: MIT
          description: |
              AnitAliased ```step()``` function implemented by [Matt DesLauriers](https://twitter.com/mattdesl) in this module <https://github.com/stackgl/glsl-aastep>
      shaders:
          extensions: OES_standard_derivatives
          blocks:
              global: |
                  // AntiAliased Step function
                  //=============================
                  float aastep(float threshold, float value) {
                      #ifdef TANGRAM_FRAGMENT_SHADER
                          #ifdef TANGRAM_EXTENSION_OES_standard_derivatives
                              float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
                              return smoothstep(threshold-afwidth, threshold+afwidth, value);
                          #else
                              return step(threshold, value);
                          #endif
                      #else
                          return step(threshold, value);
                      #endif
                  }

  patterns-stripes:
      doc:
          author:
              name: Patricio Gonzalez Vivo
              twitter: patriciogv
          version: 0.0.1
          tangram-version: 0.0.7
          licence: MIT
          description: |
              Collection of functions to draw stripes. To learn more about patterns check [this chapter from the Book of Shaders](https://thebookofshaders.com/09/)
          examples:
              grain-area:
                  url: https://tangrams.github.io/tangram-sandbox/styles/grain-area.yaml
                  img: https://tangrams.github.io/tangram-sandbox/styles/grain-area.png
                  lines: 26
              press:
                  url: https://tangrams.github.io/tangram-sandbox/styles/press.yaml
                  img: https://tangrams.github.io/tangram-sandbox/styles/press.png
                  lines: 150
              radar:
                  url: https://tangrams.github.io/tangram-sandbox/styles/radar.yaml
                  img: https://tangrams.github.io/tangram-sandbox/styles/radar.png
      mix: [functions-aastep, geometry-matrices]
      shaders:
          defines:
              PI: 3.14159265358979323846
          blocks:
              global: |
                  // Return a distance function of stripes
                  float stripesDF (vec2 st) {
                      return abs(sin(st.y*PI));
                  }

                  // Adjustable width stripes
                  float stripes (vec2 st, float width) {
                      return aastep(width, stripesDF(st));
                  }

                  // Adjustable Angle
                  float stripes (vec2 st, float width, float angle) {
                      st = rotate2D(angle) * st;
                      return stripes(st, width);
                  }

                  // Faster optimisation of diagonal stripes
                  float diagonalStripes (vec2 st) {
                      vec2 i_st = floor(st);
                      vec2 f_st = fract(st);
                      if (mod(i_st.y,2.) - mod(i_st.x,2.) == 0.) {
                          return 1.0 - aastep(f_st.x,f_st.y);
                      } else {
                          return aastep(f_st.x,f_st.y);
                      }
                  }

                  // Faster optimisation of diagonal stripes with controlable width
                  float diagonalStripes (vec2 st, float width) {
                      st.y -= st.x;
                      return stripes(st, width);
                  }

  geometry-matrices:
      doc:
          author:
              name: Patricio Gonzalez Vivo
              twitter: patriciogv
          version: 0.0.1
          tangram-version: 0.0.7
          licence: MIT
          description: |
              Useful set of functions to construct scale, rotation and translation of 2, 3 or 4 dimensions. For more information about matrices read [this chapter from The Book of Shaders](http://thebookofshaders.com/08/)
      shaders:
          blocks:
              global: |
                  // Rotate in 2, 3 and 4 dimensions
                  // ================================
                  mat2 rotate2D (float angle) {
                      return mat2(cos(angle),-sin(angle),
                                  sin(angle),cos(angle));
                  }
                  #ifdef TANGRAM_FRAGMENT_SHADER
                  vec2 rotate2D (vec2 st, float a) {
                      return (rotate2D(a)*(st-.5))+.5;
                  }
                  #endif
                  mat3 rotateX3D (float phi) {
                      return mat3(
                          vec3(1.,0.,0.),
                          vec3(0.,cos(phi),-sin(phi)),
                          vec3(0.,sin(phi),cos(phi)));
                  }
                  mat4 rotateX4D (float phi) {
                      return mat4(
                          vec4(1.,0.,0.,0),
                          vec4(0.,cos(phi),-sin(phi),0.),
                          vec4(0.,sin(phi),cos(phi),0.),
                          vec4(0.,0.,0.,1.));
                  }
                  mat3 rotateY3D (float theta) {
                      return mat3(
                          vec3(cos(theta),0.,-sin(theta)),
                          vec3(0.,1.,0.),
                          vec3(sin(theta),0.,cos(theta)));
                  }
                  mat4 rotateY4D (float theta) {
                      return mat4(
                          vec4(cos(theta),0.,-sin(theta),0),
                          vec4(0.,1.,0.,0.),
                          vec4(sin(theta),0.,cos(theta),0.),
                          vec4(0.,0.,0.,1.));
                  }
                  mat3 rotateZ3D (float psi) {
                      return mat3(
                          vec3(cos(psi),-sin(psi),0.),
                          vec3(sin(psi),cos(psi),0.),
                          vec3(0.,0.,1.));
                  }
                  mat4 rotateZ4D (float psi) {
                      return mat4(
                          vec4(cos(psi),-sin(psi),0.,0),
                          vec4(sin(psi),cos(psi),0.,0.),
                          vec4(0.,0.,1.,0.),
                          vec4(0.,0.,0.,1.));
                  }
                  //
                  // Scale 4 dimensions
                  // ================================
                  mat4 scale4D (float x, float y, float z) {
                      return mat4(
                          vec4(x,   0.0, 0.0, 0.0),
                          vec4(0.0, y,   0.0, 0.0),
                          vec4(0.0, 0.0, z,   0.0),
                          vec4(0.0, 0.0, 0.0, 1.0)
                      );
                  }
                  //
                  // Translate in 4 dimensions
                  mat4 translate4D (float x, float y, float z) {
                      return mat4(
                          vec4(1.0, 0.0, 0.0, 0.0),
                          vec4(0.0, 1.0, 0.0, 0.0),
                          vec4(0.0, 0.0, 1.0, 0.0),
                          vec4(x,   y,   z,   1.0)
                      );
                  }

  space-screen:
      doc:
          author:
              name: Patricio Gonzalez Vivo
              twitter: patriciogv
          version: 0.0.1
          tangram-version: 0.0.7
          licence: MIT
          description: |
              Get the coordinates in screen space streaching the proportion ('vec2 getScreenCoords ()') or non-streatching the proportion ('getScreenNonStretchCoords ()')
          examples:
              press:
                  url: https://tangrams.github.io/tangram-sandbox/styles/press.yaml
                  img: https://tangrams.github.io/tangram-sandbox/styles/press.png
                  lines: 136-145
              radar:
                  url: https://tangrams.github.io/tangram-sandbox/styles/radar.yaml
                  img: https://tangrams.github.io/tangram-sandbox/styles/radar.png
                  lines: 0-143
      test:
          screen:
              blocks:
                  color: |
                      vec2 st = getScreenCoords();
                      color.rg += fract(st*3.);
          screen_nonstretch:
              blocks:
                  color: |
                      vec2 st = getScreenNonStretchCoords();
                      color.rg += fract(st*3.);
      shaders:
          blocks:
              global: |
                  #ifdef TANGRAM_FRAGMENT_SHADER
                  vec2 getScreenCoords () {
                      return gl_FragCoord.xy / u_resolution.xy;
                  }

                  vec2 getScreenNonStretchCoords () {
                      vec2 st = getScreenCoords();
                      if (u_resolution.y > u_resolution.x ) {
                          st.y *= u_resolution.y/u_resolution.x;
                          st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x;
                      } else {
                          st.x *= u_resolution.x/u_resolution.y;
                          st.x -= (u_resolution.x*.5-u_resolution.y*.5)/u_resolution.y;
                      }
                      return st;
                  }
                  #endif

  shapes-type:
      mix: [functions-aastep]
      shaders:
          defines:
              STROKE: 0.15
          blocks:
              global: |
                  float fill (in float size, in float x) {
                      return 1.-aastep(size, x);
                  }
                  float stroke (in float size, in float x) {
                      return aastep(size, x+STROKE) - aastep(size, x);
                  }
  space-tile:
      shaders:
          blocks:
              global: |
                  // Variant to be add to both vertex and fragments shaders
                  varying vec3 v_pos;
                  //
                  // Get the coordinates in tile space
                  // ================================
                  vec2 getTileCoords() {
                      return fract(v_pos.xy);
                  }
              position: |
                  // Normalize the attribute position of a vertex
                  v_pos = modelPosition().xyz;

  tiling-tile:
      shaders:
          blocks:
              global: |
                  // Repeats a coordinate space (st) in diferent tiles
                  // ================================
                  vec2 tile (vec2 st, float zoom) {
                      st *= zoom;
                      return fract(st);
                  }

  block:
    shaders:
        defines:
            ADD: '+'
            SUBTRACT: '-'
            MULTIPLY: '*'
            PI: 3.1415926535897932384626433832795
            TWO_PI: 6.2831853071795864769252867665590
            HALF_PI: 1.5707963267948966192313216916398
            QUATER_PI: .785398163
            EPSILON: 0.0000001
            deg2rad(d): (((d)*3.1415926535897932384626433832795)/180.0)
            rad2deg(d): (((d)*180.0)/3.1415926535897932384626433832795)