API tools faq
paste
KanjiCoder

SHADER_7_THOUGHTS

KanjiCoder
Oct 4th, 2022
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 76.61 KB | Gaming | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML >
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>      #NEXIENT#       </title>
  6. <!-- AUTHOR   : KanjiCoder On Youtube          -->
  7. <!-- TUTORIALS: www.tinyurl.com/BOMB-CODE      -->
  8. <!-- EMAIL    : KanjiCoder@GMAIL.com           -->
  9. <!-- SSSSSSSSS SHADER_SECTION START  SSSSSSSSS -->
  10. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->
  11. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->
  12. <style>
  13.    
  14.     p{ font-size:12pt;}
  15.     div,h3,p,input,button,br{
  16.         padding:0px;
  17.         margin:0px;
  18.         font-family:"Andale Mono";
  19.     }
  20.     button,input{
  21.         padding:10px;
  22.        
  23.     }
  24. </style>
  25. <script id="VERT_SHADER" type="NOT_JAVASCRIPT">
  26.   precision highp float;
  27.  
  28.   attribute vec2 a_position;
  29.   void main() {
  30.     gl_Position = vec4(a_position, 0, 1);
  31.   }
  32. </script>
  33.  
  34. <!-- Simpler shader for when you need to       -->
  35. <!-- simplify and hunt down a problem          -->
  36. <script id="FRAG_SHADER_SIMPLE" type="NOT_JAVASCRIPT">
  37.   #ifdef GL_FRAGMENT_PRECISION_HIGH
  38.     precision highp float;
  39.     precision highp int;
  40.   #else
  41.     precision mediump float;
  42.     precision mediump int;
  43.   #endif
  44.  
  45.     uniform int HAS_TEXTURE_BEEN_PUSHED_FROM_JAVASCRIPT;
  46.     uniform sampler2D u_texture; //<-- "uSampler" here: https://www.john-smith.me/hassles-with-array-access-in-webgl-and-a-couple-of-workarounds.html
  47.    
  48.  void main(){
  49.    gl_FragColor = vec4( 0.5, 0.5, 0.5, 1.0);
  50.  }
  51.  
  52. </script>
  53.  
  54. <!-- ORIGINAL ID: FRAG_SHADER -->
  55. <script id="FRAG_SHADER_HEAD" type="NOT_JAVASCRIPT">
  56.  
  57.   //Must declare precision before declaring
  58.   //any uniforms:
  59.   ////////////////////////////////////////////////
  60.   #ifdef GL_FRAGMENT_PRECISION_HIGH
  61.     precision highp float;
  62.     precision highp int;
  63.   #else
  64.     precision mediump float;
  65.     precision mediump int;
  66.   #endif
  67.  
  68.   ////////////////////////////////////////////////
  69.  
  70.     //:Width and height of tilemap in TILES:
  71.     uniform int CMAP_WID;
  72.     uniform int CMAP_HIG;
  73.    
  74.     //:For scrolling the canvas:
  75.     uniform float SCROLL_X;
  76.     uniform float SCROLL_Y;
  77.  
  78.  
  79.     //SOURCE: https://stackoverflow.com/questions/36324295/webgl-access-buffer-from-shader
  80.     //: QUOTE[
  81.     //:    Make sure your texture filtering
  82.     //:    is set to gl.NEAREST.
  83.     //: ]QUOTE  
  84.     //SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD//
  85.    
  86.     uniform int HAS_TEXTURE_BEEN_PUSHED_FROM_JAVASCRIPT;
  87.     uniform sampler2D u_texture; //<-- "uSampler" here: https://www.john-smith.me/hassles-with-array-access-in-webgl-and-a-couple-of-workarounds.html
  88.    vec2 textureSize = vec2(128.0, 128.0);
  89.    vec4 getValueFromTexture(float index) {
  90.       float column = mod(index, textureSize.x);
  91.       float row    = floor(index / textureSize.x);
  92.       vec2 uv = vec2(
  93.          (column + 0.5) / textureSize.x,
  94.          (row    + 0.5) / textureSize.y);
  95.       return texture2D(u_texture, uv);
  96.    }
  97.    
  98.    //Integer version of function:
  99.    vec4 TVi( int index_i ){
  100.        //return getValueFromTexture( float(index_i) );
  101.        vec4 vf = getValueFromTexture( float(index_i) );
  102.        
  103.        //Convert into range 0-25:
  104.        //So we can use as tile values:
  105.        vf = (vf * 255.0) / 10.0;
  106.        
  107.        return vf;
  108.    }
  109.    
  110.    //Return Red Channel Value As Tile Value:
  111.    int TVi_R( int index_i ){
  112.        vec4 vf = TVi( index_i );
  113.        return int( vf.x );
  114.        //return 0;
  115.    }
  116.    //SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD//
  117.  
  118.  
  119.  
  120.  #define CANVAS_WID  640.0
  121.  #define CANVAS_HIG  480.0
  122.  float ASPECT_RATIO_YX = CANVAS_HIG / CANVAS_WID;
  123.  
  124.  //https://stackoverflow.com/questions/27888323/what-does-iresolution-mean-in-a-shader
  125.  vec3 iResolution = vec3(CANVAS_WID , CANVAS_HIG , 1.0);
  126.  //xxxx.x = float( CANVAS_WID );
  127.  //iResolution.y = CANVAS_HIG;
  128.  
  129.  #define TIL_WID     64.0
  130.  #define TIL_HIG     64.0
  131.  
  132.  //#define INVERT_RAMP 1
  133.  
  134.  // For touching values, we assign these unique
  135.  // letters, and then give them names:
  136.  // A: Ape  // 1
  137.  // B: Bat  // 2
  138.  // C: Cat  // 3
  139.  // D: Dog  // 4
  140.  // e: elf  // 5
  141.  // f: fox  // 6
  142.  // g: gun  // 7
  143.  // h: hog  // 8
  144.  
  145.  //   Y++ (UP)
  146.  //    ^              This is a left-handed
  147.  //    ^              coordinate system because
  148.  //    ^              of the way web-gl works.
  149.  //    |
  150.  //    +---+---+---+  Take note of this when
  151.  //    | e | A | f |  converting to go-code
  152.  //    +---+---+---+  with inverted Y-axis.
  153.  //    | D |   | B |
  154.  //    +---+---+---+
  155.  //    | g | C | h |
  156.  //    +---+---+---+ --- X++ --->
  157.   //
  158.   //    Shapes then can be identified by variables
  159.   //    such as:
  160.   //              BatGunApe
  161.   //    To avoid confusion, we always concat
  162.   //    by circling clockwise, starting at "A".
  163.   //
  164.   //    Thus: DogApeBat is INVALID.
  165.  
  166.   //Different offsets relative to tile in
  167.   //focus to get the different named cells:
  168.   //OSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOS//
  169.   #define APE_OS_X    0
  170.   #define APE_OS_Y    1
  171.  
  172.   #define BAT_OS_X    1
  173.   #define BAT_OS_Y    0
  174.  
  175.   #define CAT_OS_X    0
  176.   #define CAT_OS_Y ( -1 )
  177.  
  178.   #define DOG_OS_X ( -1 )
  179.   #define DOG_OS_Y    0
  180.  
  181.   #define elf_OS_X ( -1 )
  182.   #define elf_OS_Y    1
  183.  
  184.   #define fox_OS_X    1
  185.   #define fox_OS_Y    1
  186.  
  187.   #define gun_OS_X ( -1 )
  188.   #define gun_OS_Y ( -1 )
  189.  
  190.   #define hog_OS_X    1
  191.   #define hog_OS_Y ( -1 )
  192.   //OSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOSOS//
  193.  
  194.   int MODE_NO_PULSE       = 0;
  195.   int MODE_PULSE          = 1;
  196.   int MODE_INVERSION_TICK = 2;
  197.   int MODE_SELECTED = MODE_NO_PULSE;
  198.  
  199.   float INVERSION_MIN = 0.35; //<--FOR: MODE_INVERSION_TICK
  200.  float INVERSION_MAX = 0.65; //<--FOR: MODE_INVERSION_TICK
  201.  
  202.  //int DO_INVERSION = 1;
  203.  int DO_GRADIENT_OFFSET_X = 1;
  204.  int DO_GRADIENT_OFFSET_Y = 1;
  205.  
  206.  //Gradient offset modes:
  207.  int GOM_PIE      = 1;
  208.  int GOM_MULTIPLY = 2;
  209.  int GOM_PULSE    = 3;
  210.  int GRAD_OFFSET_MODE_X = GOM_MULTIPLY;
  211.  int GRAD_OFFSET_MODE_Y = GOM_MULTIPLY;
  212.  
  213.  
  214.  //Uniforms exposed to HTML/JAVASCRIPT:
  215.  uniform float TIL_WID_EDIT;
  216.  uniform float TIL_HIG_EDIT;
  217.  
  218.  //Time modulates between 0 and 1:
  219.  uniform float TIME_TICKER;
  220.  
  221.  //Matches iTime of shadertoy website;
  222.  uniform float TIME_UPUP;
  223.  
  224.  //Hard code to support a 16x16 tilemap:
  225.  uniform float TIL_MAP[256];
  226.  //uniform float TIL_MAP[8];
  227.  
  228.  float til_wid;
  229.  float til_hig;
  230.  
  231.  //Shader-toy functions:
  232. //TFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTF//
  233.    float saturate (float f)
  234.    {
  235.        return clamp(f, 0.0, 1.0);
  236.        //return f;
  237.    }
  238.    
  239.    
  240.    //Immulsion field shader functions:
  241.    //https://www.shadertoy.com/view/XtffDM
  242.    //IMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIM//
  243.     //  Simplex 3D Noise
  244.     //  by Ian McEwan, Ashima Arts
  245.    //
  246.    vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
  247.    vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
  248.  
  249.    float snoise(vec3 v){
  250.      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  251.      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
  252.  
  253.    // First corner
  254.      vec3 i  = floor(v + dot(v, C.yyy) );
  255.      vec3 x0 =   v - i + dot(i, C.xxx) ;
  256.  
  257.    // Other corners
  258.      vec3 g = step(x0.yzx, x0.xyz);
  259.      vec3 l = 1.0 - g;
  260.      vec3 i1 = min( g.xyz, l.zxy );
  261.      vec3 i2 = max( g.xyz, l.zxy );
  262.  
  263.      //  x0 = x0 - 0. + 0.0 * C
  264.      vec3 x1 = x0 - i1 + 1.0 * C.xxx;
  265.      vec3 x2 = x0 - i2 + 2.0 * C.xxx;
  266.      vec3 x3 = x0 - 1. + 3.0 * C.xxx;
  267.  
  268.    // Permutations
  269.      i = mod(i, 289.0 );
  270.      vec4 p = permute( permute( permute(
  271.                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
  272.               + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
  273.               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
  274.  
  275.    // Gradients
  276.    // ( N*N points uniformly over a square, mapped onto an octahedron.)
  277.      float n_ = 1.0/7.0; // N=7
  278.      vec3  ns = n_ * D.wyz - D.xzx;
  279.  
  280.      vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)
  281.  
  282.      vec4 x_ = floor(j * ns.z);
  283.      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
  284.  
  285.      vec4 x = x_ *ns.x + ns.yyyy;
  286.      vec4 y = y_ *ns.x + ns.yyyy;
  287.      vec4 h = 1.0 - abs(x) - abs(y);
  288.  
  289.      vec4 b0 = vec4( x.xy, y.xy );
  290.      vec4 b1 = vec4( x.zw, y.zw );
  291.  
  292.      vec4 s0 = floor(b0)*2.0 + 1.0;
  293.      vec4 s1 = floor(b1)*2.0 + 1.0;
  294.      vec4 sh = -step(h, vec4(0.0));
  295.  
  296.      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  297.      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
  298.  
  299.      vec3 p0 = vec3(a0.xy,h.x);
  300.      vec3 p1 = vec3(a0.zw,h.y);
  301.      vec3 p2 = vec3(a1.xy,h.z);
  302.      vec3 p3 = vec3(a1.zw,h.w);
  303.  
  304.    //Normalise gradients
  305.      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  306.      p0 *= norm.x;
  307.      p1 *= norm.y;
  308.      p2 *= norm.z;
  309.      p3 *= norm.w;
  310.  
  311.    // Mix final noise value
  312.      vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  313.      m = m * m;
  314.      return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
  315.                                    dot(p2,x2), dot(p3,x3) ) );
  316.    }
  317.    //IMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIMIM//    
  318.        
  319.    
  320.    
  321.    
  322.    
  323.    
  324.    //Use gl_FragCoord to calculate tile data:
  325.    //X: X position of tile.
  326.    //Y: Y position of tile.
  327.    //I: # INDEX    of tile.
  328.    //V: # VALUE    of tile. (Type of tile)
  329.    
  330.    ivec4 GetTile_XYIV(){
  331.    
  332.        if(CMAP_WID == 0 || CMAP_HIG == 0){
  333.            return ivec4(0,0,0,0);
  334.        }
  335.        
  336.        
  337.        
  338.        //If uniforms have not set by user,
  339.        //use the default values set by the #define(s)
  340.        //==========================================//
  341.        if(TIL_WID_EDIT > 0.0){
  342.         til_wid = TIL_WID_EDIT;
  343.         }else{
  344.         til_wid = TIL_WID;
  345.         }
  346.        
  347.         if(TIL_HIG_EDIT > 0.0){
  348.         til_hig = TIL_HIG_EDIT;
  349.         }else{
  350.         til_hig = TIL_HIG;
  351.         }
  352.         //==========================================//
  353.        
  354.         //NOTE: on "gl_FragCoord" range:
  355.         //******************************************//
  356.         //web-gl: In terms of pixel/canvas coords.
  357.         //        X-AXIS: 0 to canvas.width - 1
  358.         //        Y-AXIS: 0 to canvas.height- 1
  359.         //OpenGL: In terms of 0 to 1.
  360.         //******************************************//
  361.        
  362.         //:Calculate number of tiles shown on screen:
  363.         //:This may be fractional:
  364.         float NUM_TIL_X = CANVAS_WID / til_wid;
  365.         float NUM_TIL_Y = CANVAS_HIG / til_hig;
  366.        
  367.         //DETERMINE WHAT tile you are on:
  368.         float TC_X; //tile coordinate X
  369.         float TC_Y; //tile coordinate Y
  370.        
  371.         //:FOS: "Frag_Coord Offset":
  372.         float FOS_X = gl_FragCoord.x + SCROLL_X;
  373.         float FOS_Y = gl_FragCoord.y + SCROLL_Y;
  374.        
  375.         TC_X = floor( FOS_X / til_wid );
  376.         TC_Y = floor( FOS_Y / til_hig );
  377.         int    i_X = int( TC_X ); //integer version of TC_X
  378.         int    i_Y = int( TC_Y ); //integer version of TC_Y
  379.         int    DEX = (i_Y * CMAP_WID) + i_X;
  380.        
  381.         float tile_value;
  382.         float DEX_F = float(DEX);
  383.         vec4 V4 ; //tile_RGBA
  384.         if( HAS_TEXTURE_BEEN_PUSHED_FROM_JAVASCRIPT > 0 ){
  385.           V4 = getValueFromTexture( DEX_F );
  386.           tile_value = floor( (V4.x*255.0)/10.0 );
  387.        
  388.         }
  389.        
  390.        
  391.        
  392.         return ivec4(
  393.             i_X,
  394.             i_Y,
  395.             DEX,
  396.             int(tile_value)
  397.         );
  398.     }
  399.    
  400.     //int[4] GetTile_XYIV(){
  401.     //    return int[4];
  402.     //}
  403.    
  404.    
  405.    
  406. //TFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTFTF//
  407.  
  408.   //: n==0: render standard geometric shapes.
  409.   //: n==1: process into normal map.
  410.   //: n==2: render FLAT surfaces.
  411.   vec3 RenderTileBase(in int n, in int di){
  412.     vec3 OUT_DATA;
  413.      
  414.  
  415.     //Don't render until tile-map size in tiles
  416.     //has been set by javascript:
  417.     if(CMAP_WID == 0){
  418.         return OUT_DATA;
  419.     }
  420.     if(CMAP_HIG == 0){
  421.         return OUT_DATA;
  422.     }
  423.  
  424.  
  425.  
  426.     //If uniforms have not set by user,
  427.     //use the default values set by the #define(s)
  428.     //==========================================//
  429.     if(TIL_WID_EDIT > 0.0){
  430.       til_wid = TIL_WID_EDIT;
  431.     }else{
  432.       til_wid = TIL_WID;
  433.     }
  434.    
  435.     if(TIL_HIG_EDIT > 0.0){
  436.       til_hig = TIL_HIG_EDIT;
  437.     }else{
  438.       til_hig = TIL_HIG;
  439.     }
  440.     //==========================================//
  441.    
  442.     //NOTE: on "gl_FragCoord" range:
  443.     //******************************************//
  444.     //web-gl: In terms of pixel/canvas coords.
  445.     //        X-AXIS: 0 to canvas.width - 1
  446.     //        Y-AXIS: 0 to canvas.height- 1
  447.     //OpenGL: In terms of 0 to 1.
  448.     //******************************************//
  449.    
  450.     //:Calculate number of tiles shown on screen:
  451.     //:This may be fractional:
  452.     float NUM_TIL_X = CANVAS_WID / til_wid;
  453.     float NUM_TIL_Y = CANVAS_HIG / til_hig;
  454.  
  455.    
  456.     ivec4 T_XYIV      = GetTile_XYIV()   ;
  457.     int   i_X         = T_XYIV.x         ;
  458.     int   i_Y         = T_XYIV.y         ;
  459.     float tile_value  = float( T_XYIV.w );
  460.     int   DEX         = T_XYIV.z         ;
  461.    
  462.    
  463.     //Using current tile in focus ( [i_X, i_Y] ),
  464.     //determine coordinates of adjacent tiles.
  465.     ///////////////////////////
  466.     int APE_X = i_X + APE_OS_X;
  467.     int APE_Y = i_Y + APE_OS_Y;
  468.    
  469.     int BAT_X = i_X + BAT_OS_X;
  470.     int BAT_Y = i_Y + BAT_OS_Y;
  471.    
  472.     int CAT_X = i_X + CAT_OS_X;
  473.     int CAT_Y = i_Y + CAT_OS_Y;
  474.    
  475.     int DOG_X = i_X + DOG_OS_X;
  476.     int DOG_Y = i_Y + DOG_OS_Y;
  477.    
  478.     int elf_X = i_X + elf_OS_X;
  479.     int elf_Y = i_Y + elf_OS_Y;
  480.    
  481.     int fox_X = i_X + fox_OS_X;
  482.     int fox_Y = i_Y + fox_OS_Y;
  483.    
  484.     int gun_X = i_X + gun_OS_X;
  485.     int gun_Y = i_Y + gun_OS_Y;
  486.    
  487.     int hog_X = i_X + hog_OS_X;
  488.     int hog_Y = i_Y + hog_OS_Y;
  489.     ///////////////////////////
  490.    
  491.     //Determine indicies of [X,Y] positions:
  492.     //iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii//
  493.     int APE_DEX = (APE_Y * CMAP_WID) + APE_X;
  494.     int BAT_DEX = (BAT_Y * CMAP_WID) + BAT_X;
  495.     int CAT_DEX = (CAT_Y * CMAP_WID) + CAT_X;
  496.     int DOG_DEX = (DOG_Y * CMAP_WID) + DOG_X;
  497.                              
  498.     int elf_DEX = (elf_Y * CMAP_WID) + elf_X;
  499.     int fox_DEX = (fox_Y * CMAP_WID) + fox_X;
  500.     int gun_DEX = (gun_Y * CMAP_WID) + gun_X;
  501.     int hog_DEX = (hog_Y * CMAP_WID) + hog_X;
  502.     //iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii//
  503.    
  504.    
  505.     vec2 FC_MOD;
  506.     //:FC_MOD.x = gl_FragCoord.x;
  507.     //:FC_MOD.y = gl_FragCoord.y;
  508.    
  509.     //:FOS: "Frag_Coord Offset":
  510.     float FOS_X = gl_FragCoord.x + SCROLL_X;
  511.     float FOS_Y = gl_FragCoord.y + SCROLL_Y;
  512.    
  513.     //float FW_X = cos(
  514.    
  515.    
  516.     //You want all tiles to have the full range
  517.     //of colors, so you always modulate by
  518.     //CANVAS_WID and CANVAS_HIG, You scale by the
  519.     //# of tiles on each axis which means the
  520.     //gradient becomes steeper as the # of tiles
  521.     //increases.
  522.     FC_MOD.x = mod( FOS_X*NUM_TIL_X, CANVAS_WID );
  523.     FC_MOD.y = mod( FOS_Y*NUM_TIL_Y, CANVAS_HIG );
  524.    
  525.     //[N]ormalize values into range 0 to 1:
  526.     //NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN//
  527.     float norm_X = (FC_MOD.x) / CANVAS_WID;
  528.     float norm_Y = (FC_MOD.y) / CANVAS_HIG;
  529.     //norm_X = 1.0 - norm_X;
  530.     //norm_Y = 1.0 - norm_Y;
  531.    
  532.     float NMAP_X; // norm_X value mapped.
  533.     float NMAP_Y; // norm_Y value mapped.
  534.     float NMAP_Z; // norm_Z value mapped.
  535.     //NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN//
  536.    
  537.     //Use [B]lue channel because why not?
  538.     //BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB//
  539.     //:float GRAD_X = gl_FragCoord.x / CANVAS_WID;
  540.     //:float GRAD_Y = gl_FragCoord.y / CANVAS_HIG;
  541.    
  542.     float STATIC_GRAD_X = gl_FragCoord.x / CANVAS_WID;
  543.     float STATIC_GRAD_Y = gl_FragCoord.y / CANVAS_HIG;
  544.    
  545.     //:This will cause psychedellic pattern
  546.     //:To Scroll Along as well:
  547.     float SCROLL_GRAD_X = cos( FOS_X / CANVAS_WID) ;
  548.     float SCROLL_GRAD_Y = sin( FOS_Y / CANVAS_HIG) ;
  549.    
  550.     float GRAD_X = mix(STATIC_GRAD_X, SCROLL_GRAD_X, 0.9);
  551.     float GRAD_Y = mix(STATIC_GRAD_Y, SCROLL_GRAD_Y, 0.9);
  552.    
  553.    
  554.    //GRAD_X = mod( (GRAD_X + SCROLL_X)*255.0 , 256.0);
  555.    //GRAD_Y = mod( (GRAD_Y + SCROLL_Y)*255.0 , 256.0);
  556.    //GRAD_X = GRAD_X / 255.0;
  557.    //GRAD_Y = GRAD_Y / 255.0;
  558.    
  559.     //if(GRAD_X > 1.0 || GRAD_X < 0.0){ return OUT_DATA; }
  560.    //if(GRAD_Y > 1.0 || GRAD_Y < 0.0){ return OUT_DATA; }
  561.    
  562.    
  563.    
  564.    //Set to 1 if tile is on:
  565.    ///////////////
  566.    int APE_ON = 0;
  567.    int BAT_ON = 0;
  568.    int CAT_ON = 0;
  569.    int DOG_ON = 0;
  570.    ///////////////
  571.    int elf_ON = 0;
  572.    int fox_ON = 0;
  573.    int gun_ON = 0;
  574.    int hog_ON = 0;
  575.    ///////////////
  576.    
  577.    //HACK: **************************************
  578.    //REFERENCE:
  579.    //URL[
  580.    //        https://www.john-smith.me/hassles-
  581.    //        with-array-access-in-webgl-and-a-
  582.    //        couple-of-workarounds.html
  583.    //   ]  **************************************
  584.    //float TV; //Tile Value. (Temp)
  585.    
  586.    
  587.    
  588.    
  589.    if( HAS_TEXTURE_BEEN_PUSHED_FROM_JAVASCRIPT > 0 ){
  590.      
  591.      
  592.       //Bail out. No Tile Here:
  593.       if(tile_value < 1.0 ){
  594.        return vec3(0.0,0.0,0.0);
  595.      }
  596.      
  597.      int tv_R = int( tile_value );
  598.      
  599.      if( TVi_R( APE_DEX ) == tv_R){ APE_ON =1; }
  600.      if( TVi_R( BAT_DEX ) == tv_R){ BAT_ON =1; }
  601.      if( TVi_R( CAT_DEX ) == tv_R){ CAT_ON =1; }
  602.      if( TVi_R( DOG_DEX ) == tv_R){ DOG_ON =1; }
  603.                                
  604.      if( TVi_R( elf_DEX ) == tv_R){ elf_ON =1; }
  605.      if( TVi_R( fox_DEX ) == tv_R){ fox_ON =1; }
  606.      if( TVi_R( gun_DEX ) == tv_R){ gun_ON =1; }
  607.      if( TVi_R( hog_DEX ) == tv_R){ hog_ON =1; }
  608.      
  609.    
  610.      
  611.    }
  612.    
  613.    
  614.    
  615.    if( tile_value==0.0 ){
  616.        NMAP_X = 0.0;
  617.        NMAP_Y = 0.0;
  618.        NMAP_Z = 0.0;
  619.  
  620.    }else
  621.    if(n==0 || n==1){
  622.    //:n==0 : Standard Geometry
  623.    //:n==1 : Normal Map Render
  624.    //:n==2 : FLAT color render.
  625.    
  626.    //If tile in center is NOT OFF, then we need
  627.    //To do the correct auto-tiling for it.
  628.        
  629.        
  630.        //Inverted distance:
  631.        float DX = distance(norm_X, 0.5);
  632.        float DY = distance(norm_Y, 0.5);
  633.        
  634.        //:Force Merge By Altering distance values
  635.        //:Depending on what tiles are adjacent:
  636.        //:FMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFM://
  637.        //:Vertical Merging:
  638.        if(APE_ON>0){if(norm_Y > 0.5){ DY = DY-1.0 ;}}
  639.         if(CAT_ON>0){if(norm_Y < 0.5){ DY = DY-1.0 ;}}
  640.        
  641.        //:Horizontal Merging:
  642.        if(BAT_ON>0){if(norm_X > 0.5){ DX = DX-1.0;}}
  643.         if(DOG_ON>0){if(norm_X < 0.5){ DX = DX-1.0;}}
  644.        //:FMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFM://
  645.        
  646.        if(DX < (-0.5) && DY < (-0.5)){///////////
  647.        
  648.          
  649.            //Fix problematic Intersections:
  650.            //PIPIPIPIPIPIPIPIPIPIPIPIPIPIPIPIPI//
  651.            if(DX < DY){
  652.                NMAP_Z = (DX+1.0);
  653.                NMAP_X = (norm_X);
  654.            }else{
  655.                NMAP_Z = (DY+1.0);
  656.                NMAP_Y = (norm_Y);
  657.            }
  658.            
  659.            NMAP_Z = NMAP_Z*2.0;
  660.            
  661.            
  662.  
  663.            //PIPIPIPIPIPIPIPIPIPIPIPIPIPIPIPIPI//
  664.  
  665.        }else{////////////////////////////////////
  666.      
  667.          
  668.        
  669.        if(DX > DY){
  670.         //X distance from center is greatest,
  671.         //So color square gradient based on X.
  672.        
  673.             if(DX < 0.5){
  674.                //ramp up:
  675.                NMAP_Z = DX * 2.0;
  676.            }else{
  677.                //:invert and ramp down:
  678.                NMAP_Z = ( 1.0-(DX-0.5) ) * 2.0;
  679.            }
  680.          
  681.            NMAP_X = (norm_X);
  682.        }else{
  683.        //Y distance from center is greatest,
  684.        //So color square gradient based on Y.
  685.            
  686.            //Ditto formula, but for Y:
  687.            if(DY < 0.5){
  688.                NMAP_Z = DY * 2.0;
  689.              
  690.            }else{
  691.                NMAP_Z = ( 1.0-(DY-0.5) ) * 2.0;
  692.              
  693.            }
  694.            
  695.            NMAP_Y = (norm_Y);
  696.        
  697.        }
  698.        
  699.        }/////////////////////////////////////////
  700.    
  701.        //NMAP_X = NMAP_Z;
  702.        //NMAP_Y = NMAP_Z;
  703.        
  704.        //When done, always invert to get convex pipe:
  705.        //float PRE_FLIP_X = NMAP_X;
  706.        //float PRE_FLIP_Y = NMAP_Y;
  707.        //float PRE_FLIP_Z = NMAP_Z;
  708.        if( n > 0 ){
  709.             //return vec3(0.0,0.0,0.0);
  710.             //Make normal map:
  711.            
  712.             //Flip to make convex:
  713.             NMAP_Z = 1.0 - NMAP_Z;
  714.            
  715.             //Divide by 2, then add 0.5.
  716.             //Because Z is height-map, and
  717.             //anything below 0.5 is negative
  718.             //height. No such negative heights
  719.             //on a convex normal map like the
  720.             //one we are making:
  721.             NMAP_Z = 0.5 + (NMAP_Z/2.0);
  722.         }else{
  723.        
  724.             //Set both X and Y to "Z" value.
  725.             //Z being our height map. Because
  726.             //since we are NOT making normal
  727.             //map of face angles, we want
  728.             //smooth transitions:
  729.             NMAP_X = NMAP_Z;
  730.             NMAP_Y = NMAP_Z;
  731.         }
  732.        
  733.        
  734.         //Originally: DO_INVERSION
  735.         if((n <=0 && di > 0) || ( n > 0 && di <= 0) ){
  736.        
  737.            //CASE: (n <=0 && di > 0):
  738.            //Object is NOT a normal map.
  739.            //To make default convexity,
  740.            //we have to invert the shape:
  741.            
  742.            //CASE: ( n > 0 && di <= 0):
  743.            //Object IS a normal map.
  744.            //To make default convexity,
  745.            //we don't do anything, because
  746.            //shape making was handled in
  747.            //the ( n > 0 ) condition before
  748.            //this condition.
  749.        
  750.            //: n>0 : making normal map.
  751.            //: di>0: "flipping by not flipping".
  752.        }else{
  753.            NMAP_X = 1.0 - NMAP_X;
  754.             NMAP_Y = 1.0 - NMAP_Y;
  755.             NMAP_Z = 1.0 - NMAP_Z;
  756.         }
  757.        
  758.         //Animate the inversion:
  759.         if(MODE_SELECTED==MODE_NO_PULSE){
  760.             //DO nothing.
  761.         }else
  762.         if(MODE_SELECTED==MODE_PULSE){
  763.             NMAP_X = NMAP_X - (TIME_TICKER);
  764.             NMAP_Y = NMAP_Y - (TIME_TICKER);
  765.             NMAP_Z = NMAP_Z - (TIME_TICKER);
  766.         }else
  767.         if(MODE_SELECTED==MODE_INVERSION_TICK){
  768.             float P = TIME_TICKER;
  769.            
  770.             //By watching the pulse animate, I have
  771.             //identified that there is a certain value of P
  772.             //that gets good results with some shaders.
  773.             //using these Max/Min values to hone in on that.
  774.             if(P > INVERSION_MAX){ P = INVERSION_MAX; }
  775.             if(P < INVERSION_MIN){ P = INVERSION_MIN; }
  776.            
  777.            NMAP_X = (P-(NMAP_X*P)) + ( NMAP_X-(NMAP_X*P));
  778.            NMAP_Y = (P-(NMAP_Y*P)) + ( NMAP_Y-(NMAP_Y*P));
  779.            NMAP_Z = mix(NMAP_X,NMAP_Y,0.5);
  780.        }
  781.        
  782.        #define M_PI 3.14159
  783.          
  784.    }else{
  785.        //: n==2, flat color:
  786.  
  787.        //This looks much more correct than 0.5:
  788.        NMAP_X = 1.0;
  789.        NMAP_Y = 1.0;
  790.        NMAP_Z = 1.0;
  791.        
  792.    }
  793.    //BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB//
  794.    
  795.    if(tile_value != 0.0){
  796.        if(DO_GRADIENT_OFFSET_X > 0){
  797.             if(GRAD_OFFSET_MODE_X==GOM_PIE){
  798.                 NMAP_X = ( cos( (NMAP_X+GRAD_X)/1.0*M_PI ) + 1.0);
  799.             }else
  800.             if(GRAD_OFFSET_MODE_X==GOM_MULTIPLY){
  801.                 NMAP_X = NMAP_X * (GRAD_X+(0.0));
  802.             }else
  803.             if(GRAD_OFFSET_MODE_X==GOM_PULSE){
  804.                  NMAP_X = NMAP_X * (GRAD_X+(TIME_TICKER/1.0));
  805.             }
  806.         }
  807.         if(DO_GRADIENT_OFFSET_Y > 0){
  808.             if(GRAD_OFFSET_MODE_Y==GOM_PIE){
  809.                 NMAP_Y = ( cos( (NMAP_Y+GRAD_Y)/1.0*M_PI ) + 1.0);
  810.             }else
  811.             if(GRAD_OFFSET_MODE_Y==GOM_MULTIPLY){
  812.                 NMAP_Y = NMAP_Y * (GRAD_Y+(0.0));
  813.             }else
  814.             if(GRAD_OFFSET_MODE_Y==GOM_PULSE){
  815.                 NMAP_Y = NMAP_Y * (GRAD_Y+(1.0-(TIME_TICKER/1.0)));
  816.             }
  817.         }
  818.     }
  819.    
  820.    
  821.     OUT_DATA.x = NMAP_X;
  822.     OUT_DATA.y = NMAP_Y;
  823.     OUT_DATA.z = NMAP_Z;
  824.    
  825.     //OUT_DATA.x = norm_X;
  826.     //OUT_DATA.y = norm_Y;
  827.     //OUT_DATA.z = 0.0;
  828.    
  829.     return OUT_DATA;
  830.    
  831.   }
  832. </script>
  833.  
  834.  
  835.  
  836. <script id="FRAG_SHADER_TILE_R01" type="NOT_JAVASCRIPT">
  837. //Original Name: "NeonBeams"
  838. vec4 TIFA_NeonBeams( in vec2 uv ){
  839.  
  840.     float scale = 0.2;
  841.     float rate = 5.0;
  842.    
  843.     float t;
  844.     t = TIME_UPUP/rate;
  845.    
  846.     float result = 0.0;
  847.     float result2 = 0.0;
  848.     float result3 = 0.0;
  849.    
  850.     //octaves
  851.     for (float i = 0.0; i < 1.0; i++){
  852.         result += snoise(vec3((uv.x*2.0)/scale, (uv.y)/scale, t*2.0))/pow(2.0, i);
  853.        result2 += snoise(vec3((uv.x*4.0)/scale, (uv.y*2.0)/scale, t*2.0))/pow(2.0, i);
  854.        result3 += snoise(vec3((uv.x*8.0)/scale, (uv.y*4.0)/scale, t*2.0))/pow(2.0, i);
  855.        scale /= 2.0;
  856.    }
  857.    
  858.     //tweaking
  859.     result /= 2.0;
  860.     result = abs(result);
  861.     result = pow(result, .4);
  862.     result = 1.0 - result;
  863.     if (result < .8) result = pow(result, 4.0);
  864.    
  865.     result2 /= 2.0;
  866.     result2 = abs(result2);
  867.     result2 = pow(result2, .6);
  868.     result2 = 1.0 - result2;
  869.     if (result2 < .8) result2 = pow(result2, 4.0);
  870.    
  871.     result3 /= 2.0;
  872.     result3 = abs(result3);
  873.     result3 = pow(result3, .4);
  874.     result3 = 1.0 - result3;
  875.     if (result3 < .8) result3 = pow(result3, 4.0);
  876.    
  877.     result *= 2.0;
  878.     //   //   // result2 *= 2.0;
  879.     result3 *= 2.0;
  880.    
  881.     //power for coloring
  882.     float g = pow(result, 4.0);
  883.     float g2 = pow(result2, 4.0);
  884.    
  885.     vec4 FAKE_FRAG_OUT;
  886.     FAKE_FRAG_OUT = vec4(max(max(g2, result3), g), max(max(result3, 0.0), result), max(max(result, result2), 0.0), 1.0);
  887.     return FAKE_FRAG_OUT;
  888.    
  889.    
  890.    
  891. }
  892. </script>
  893.  
  894. <script id="FRAG_SHADER_TILE_R02" type="NOT_JAVASCRIPT">
  895. vec4 TIFA_GalacticDance(in vec2 uv){
  896.     //Original Shader Name: "GalacticDance"
  897.     //SHADER: Galactic Dance.
  898.     //URL: https://www.shadertoy.com/view/XtlGWs
  899.    
  900.     #define gd_tao 6.28
  901.     #define gd_overbright 4.5
  902.     #define gd_armCount 8.0
  903.     #define gd_armRot 0.005
  904.     #define gd_innerColor vec4(9.0,0.5,0.1,1.0)
  905.     #define gd_outerColor vec4(5.8,0.6,1.0,1.0)
  906.     #define gd_white vec4(0.01,0.21,0.01,1.0)
  907.    
  908.     float  time = TIME_UPUP;
  909.      
  910.     //constant slow rotation
  911.     float cost = cos(-time*0.2);
  912.     float sint = sin(-time*0.2);
  913.     mat2 trm = mat2 (cost,sint,-sint,cost);
  914.    
  915.     //scale 0.0-1.0 uv to -1.0-1.0 p
  916.     vec2 p = uv*2.0 - 1.0;
  917.     //apply slow rotation
  918.     p = p * trm;
  919.    
  920.     //calc distance
  921.     float d = length(p);
  922.    
  923.     //build arm rotation matrix
  924.     float cosr = cos(gd_armRot*sin(gd_armRot*time));
  925.     float sinr = sin(gd_armRot*cos(gd_armRot*time));
  926.     mat2 rm = mat2 (cosr,sinr,-sinr,cosr);
  927.    
  928.     //calc arm rotation based on distance
  929.     p = mix(p,p * rm,d);
  930.    
  931.     //find angle to middle
  932.     float angle = (atan(p.y,p.x)/gd_tao) * 0.5 + 0.5;
  933.     //add the crinkle
  934.     angle += sin(-time*5.0+fract(d*d*d)*10.0)*0.004;
  935.     //calc angle in terms of arm number
  936.     angle *= 2.0 * gd_armCount;
  937.     angle = fract(angle);
  938.     //build arms & wrap the angle around 0.0 & 1.0
  939.    float arms = abs(angle*2.0-1.0);
  940.     //sharpen arms
  941.     arms = pow(arms,10.0*d*d + 5.0);
  942.     //calc radial falloff
  943.     float bulk = 1.0 - saturate(d);
  944.     //create glowy center
  945.     float core = pow(bulk,9.0);
  946.     //calc color
  947.     vec4 color = mix(gd_innerColor,gd_outerColor,d*2.0);
  948.        
  949.     //JMIM: Remove glowy core:
  950.     vec4 FAKE_FRAG_OUT;
  951.     FAKE_FRAG_OUT = bulk * arms * color + (core/4.0) + bulk*0.25*mix(color,gd_white,0.95);
  952.        
  953.     //gl_FragColor = bulk * arms * color + core + bulk*0.25*mix(color,gd_white,0.5);
  954.     FAKE_FRAG_OUT = (gd_overbright * FAKE_FRAG_OUT);
  955.    
  956.     return FAKE_FRAG_OUT;
  957.   }
  958. </script>
  959.  
  960. <!-- #NAMESPACE_PREFIX#[as] -->
  961. <script id="FRAG_SHADER_TILE_R03" type="NOT_JAVASCRIPT">
  962.  
  963.  
  964.  
  965. //SOURCE:https://www.shadertoy.com/view/Mty3Dw
  966. //Original Name: "Alien Surface"
  967. //-----------------SETTINGS---------------------//
  968.  
  969. #define as_TIMES_DETAILED (1.0+.1*sin(as_time*as_PI*1.0))
  970. #define as_SPIRAL_BLUR_SCALAR (1.0+.1*sin(as_time*as_PI*1.0))
  971.  
  972. //-----------------USEFUL-----------------------//
  973.  
  974.  
  975. #define as_PI 3.14159265359
  976. #define as_EPS 10.0/max(iResolution.x, iResolution.y)
  977.  
  978. #define as_circle(x) (vec2(cos(x),sin(x)))
  979. #define as_flux(x) (vec3(cos(x),cos(4.0*as_PI/3.0+x),cos(2.0*as_PI/3.0+x))*.5+.5)
  980. #define as_time ((as_saw(float(__LINE__))+1.0)*(TIME_UPUP+12345.12345)/as_PI/2.0)
  981. #define as_sphereN(uv) (normalize(vec3((uv).xy, sqrt(clamp(1.0-length((uv)), 0.0, 1.0)))))
  982. #define as_rotatePoint(p,n,theta) (p*cos(theta)+cross(n,p)*sin(theta)+n*dot(p,n) *(1.0-cos(theta)))
  983. float as_cross2( in vec2 a, in vec2 b ) { return a.x*b.y - a.y*b.x; }
  984. float as_seedling;
  985.  
  986.  
  987.  
  988. float as_saw(float x)
  989. {
  990.     float f = mod(floor(abs(x)), 2.0);
  991.     float m = mod(abs(x), 1.0);
  992.     return f*(1.0-m)+(1.0-f)*m;
  993. }
  994. vec2 as_saw(vec2 x)
  995. {
  996.     return vec2(as_saw(x.x), as_saw(x.y));
  997. }
  998.  
  999. vec3 as_saw(vec3 x)
  1000. {
  1001.     return vec3(as_saw(x.x), as_saw(x.y), as_saw(x.z));
  1002. }
  1003. //-----------------SIMPLEX----------------------//
  1004.  
  1005. vec3 as_random3(vec3 c) {
  1006.     float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
  1007.     vec3 r;
  1008.     r.z = fract(512.0*j);
  1009.     j *= .125;
  1010.     r.x = fract(512.0*j);
  1011.     j *= .125;
  1012.     r.y = fract(512.0*j);
  1013.     return r-0.5;
  1014. }
  1015.  
  1016. float as_simplex3d(vec3 p) {
  1017.     const float F3 =  0.3333333;
  1018.     const float G3 =  0.1666667;
  1019.    
  1020.     vec3 s = floor(p + dot(p, vec3(F3)));
  1021.     vec3 x = p - s + dot(s, vec3(G3));
  1022.    
  1023.     vec3 e = step(vec3(0.0), x - x.yzx);
  1024.     vec3 i1 = e*(1.0 - e.zxy);
  1025.     vec3 i2 = 1.0 - e.zxy*(1.0 - e);
  1026.    
  1027.     vec3 x1 = x - i1 + G3;
  1028.     vec3 x2 = x - i2 + 2.0*G3;
  1029.     vec3 x3 = x - 1.0 + 3.0*G3;
  1030.    
  1031.     vec4 w, d;
  1032.    
  1033.     w.x = dot(x, x);
  1034.     w.y = dot(x1, x1);
  1035.     w.z = dot(x2, x2);
  1036.     w.w = dot(x3, x3);
  1037.    
  1038.     w = max(0.6 - w, 0.0);
  1039.    
  1040.     d.x = dot(as_random3(s), x);
  1041.     d.y = dot(as_random3(s + i1), x1);
  1042.     d.z = dot(as_random3(s + i2), x2);
  1043.     d.w = dot(as_random3(s + 1.0), x3);
  1044.    
  1045.     w *= w;
  1046.     w *= w;
  1047.     d *= w;
  1048.    
  1049.     return dot(d, vec4(52.0));
  1050. }
  1051.  
  1052. //-----------------IMAGINARY--------------------//
  1053.  
  1054. vec2 as_cmul(vec2 v1, vec2 v2) {
  1055.     return vec2(v1.x * v2.x - v1.y * v2.y, v1.y * v2.x + v1.x * v2.y);
  1056. }
  1057.  
  1058. vec2 as_cdiv(vec2 v1, vec2 v2) {
  1059.     return vec2(v1.x * v2.x + v1.y * v2.y, v1.y * v2.x - v1.x * v2.y) / dot(v2, v2);
  1060. }
  1061.  
  1062. //-----------------RENDERING--------------------//
  1063. float as_zoom;
  1064.  
  1065. vec2 as_invBilinear( in vec2 p, in vec2 a, in vec2 b, in vec2 c, in vec2 d )
  1066. {
  1067.     vec2 e = b-a;
  1068.     vec2 f = d-a;
  1069.     vec2 g = a-b+c-d;
  1070.     vec2 h = p-a;
  1071.        
  1072.     float k2 = as_cross2( g, f );
  1073.     float k1 = as_cross2( e, f ) + as_cross2( h, g );
  1074.     float k0 = as_cross2( h, e );
  1075.    
  1076.     float w = k1*k1 - 4.0*k0*k2;
  1077.  
  1078.     w = sqrt(abs( w ));
  1079.    
  1080.     float v1 = ((-k1 - w)/(2.0*k2));
  1081.     float v2 = ((-k1 + w)/(2.0*k2));
  1082.     float u1 = ((h.x - f.x*v1)/(e.x + g.x*v1));
  1083.     float u2 = ((h.x - f.x*v2)/(e.x + g.x*v2));
  1084.     bool  b1a = v1>0.0 && v1<1.0;
  1085.     bool  b1b = u1>0.0 && u1<1.0;
  1086.     bool  b2a = v2>0.0 && v2<1.0;
  1087.     bool  b2b = u2>0.0 && u2<1.0;
  1088.    
  1089.  
  1090.     vec2 res = vec2(min(abs(u1), abs(u2)), min(abs(v1), abs(v2)));
  1091.    
  1092.     return (res);
  1093. }
  1094.  
  1095.  
  1096. vec2 as_SinCos( const in float x )
  1097. {
  1098.     return vec2(sin(x), cos(x));
  1099. }
  1100. vec3 as_RotateZ( const in vec3 vPos, const in vec2 vSinCos )
  1101. {
  1102.     return vec3( vSinCos.y * vPos.x + vSinCos.x * vPos.y, -vSinCos.x * vPos.x + vSinCos.y * vPos.y, vPos.z);
  1103. }
  1104.      
  1105. vec3 as_RotateZ( const in vec3 vPos, const in float fAngle )
  1106. {
  1107.     return as_RotateZ( vPos, as_SinCos(fAngle) );
  1108. }
  1109. vec2 as_RotateZ( const in vec2 vPos, const in float fAngle )
  1110. {
  1111.     return as_RotateZ( vec3(vPos, 0.0), as_SinCos(fAngle) ).xy;
  1112. }
  1113. mat4 as_RotateZ( const in mat4 vPos, const in float fAngle )
  1114. {
  1115.     return mat4(as_RotateZ( vec3(vPos[0].xy, 0.0), as_SinCos(fAngle) ).xy, 0.0, 0.0,
  1116.                 as_RotateZ( vec3(vPos[1].xy, 0.0), as_SinCos(fAngle) ).xy, 0.0, 0.0,
  1117.                 as_RotateZ( vec3(vPos[2].xy, 0.0), as_SinCos(fAngle) ).xy, 0.0, 0.0,
  1118.                 as_RotateZ( vec3(vPos[3].xy, 0.0), as_SinCos(fAngle) ).xy, 0.0, 0.0);
  1119. }
  1120. mat4 as_translate( const in mat4 vPos, vec2 offset )
  1121. {
  1122.     return mat4(vPos[0].xy+offset, 0.0, 0.0,
  1123.                 vPos[1].xy+offset, 0.0, 0.0,
  1124.                 vPos[2].xy+offset, 0.0, 0.0,
  1125.                 vPos[3].xy+offset, 0.0, 0.0);
  1126. }
  1127. mat4 as_scale( const in mat4 vPos, vec2 factor )
  1128. {
  1129.     return mat4(vPos[0].xy*factor, 0.0, 0.0,
  1130.                 vPos[1].xy*factor, 0.0, 0.0,
  1131.                 vPos[2].xy*factor, 0.0, 0.0,
  1132.                 vPos[3].xy*factor, 0.0, 0.0);
  1133. }
  1134. float as_magnification;
  1135. vec2 as_tree(vec2 uv)
  1136. {
  1137.     float w1 = as_saw(as_time);
  1138.    
  1139.     mat4 square = mat4(as_EPS, as_EPS, 0.0, 0.0,
  1140.                        1.0-as_EPS, as_EPS, 0.0, 0.0,
  1141.                        1.0-as_EPS, 1.0-as_EPS, 0.0, 0.0,
  1142.                        0.0, 1.0-as_EPS, 0.0, 0.0);
  1143.    
  1144.     float size =  .5;
  1145.    
  1146.     square = as_scale(square, vec2(2.0));
  1147.     square = as_translate(square, vec2(-1.0));
  1148.     float t1 = as_time;
  1149.    
  1150.     //square = as_scale(square, (1.0-as_saw(uv.xy))*vec2(as_saw(t1)+.5));
  1151.     square = as_RotateZ(square, as_time);
  1152.    
  1153.     square = as_scale(square, .5+.25*vec2(as_simplex3d(vec3(uv.x, uv.y, as_time))));
  1154.    
  1155.     square = as_scale(square, vec2(.5));
  1156.     square = as_translate(square, vec2(.5));
  1157.    
  1158.    
  1159.     float t = as_time;
  1160.     vec3 f = as_flux(as_time);
  1161.    
  1162.    
  1163.     vec2 dxdy = sqrt(4.0)/iResolution.xy;
  1164.    
  1165.     vec2 a = uv+vec2(0.0,       0.0);
  1166.     vec2 b = uv+vec2(1.0,   0.0);
  1167.     vec2 c = uv+vec2(0.0,       1.0);
  1168.    
  1169.     vec2 a2 = as_invBilinear(a, square[0].xy, square[1].xy, square[2].xy, square[3].xy);
  1170.     vec2 b2 = as_invBilinear(b, square[0].xy, square[1].xy, square[2].xy, square[3].xy);
  1171.     vec2 c2 = as_invBilinear(c, square[0].xy, square[1].xy, square[2].xy, square[3].xy);
  1172.    
  1173.     as_magnification = abs(as_cross2(square[1].xy-square[0].xy, square[3].xy-square[0].xy)/as_cross2(b2-a2, c2-a2));
  1174.    
  1175.     return as_saw(a2);
  1176. }
  1177.  
  1178.  
  1179.  //void mainImage( out vec4 fragColor, in vec2 fragCoord )
  1180.  vec4 TIFA_AlienSurface(in vec2 uv){
  1181.  
  1182.        const int max_i =4;
  1183.        float stretch = 1.0;
  1184.        float ifs = 1.0;
  1185.        float depth = 0.0;
  1186.        float as_zoom = 2.5+1.0*sin(as_time);
  1187.      
  1188.        uv = uv*2.0-1.0;
  1189.        uv *= as_zoom;
  1190.        uv = uv*.5+.5;
  1191.        for(int i = 0; i < max_i; i++)
  1192.       {
  1193.           as_seedling = float(i)/float(max_i);
  1194.           vec2 next = as_tree((uv));
  1195.           ifs /= clamp(as_magnification+1.0, 0.0, 2.0);
  1196.         float weight = pow(ifs, 1.0/float(i+1));
  1197.           depth += weight;
  1198.           uv = next;//+as_circle(weight);//+uv*(1.0-weight);
  1199.       }
  1200.      
  1201.      
  1202.       ////FAKE_FRAG_OUT = vec4(uv, 0.0, 1.0);
  1203.      
  1204.     float weight = pow(ifs, 1.0/float(max_i));
  1205.    
  1206.    float black = smoothstep(0.0, 1.0/5.0, as_saw(depth-as_time));
  1207.    float white = smoothstep(4.0/5.0, 1.0, as_saw(depth-as_time));
  1208.    //  
  1209.    //   ////FAKE_FRAG_OUT = vec4(uv, 0.0, 1.0)*weight;
  1210.    //  
  1211.    vec4 FAKE_FRAG_OUT = vec4(clamp(weight, 0.0, 1.0)*(as_flux(as_time+depth)*black+white), 1.0);
  1212.      
  1213.    return FAKE_FRAG_OUT;
  1214.    
  1215.     //return vec4( 0.0 , 0.0, 0.0 , 0.0 );
  1216. }
  1217.  
  1218.  
  1219. </script>
  1220.  
  1221.  
  1222. <script id="FRAG_SHADER_TAIL" type="NOT_JAVASCRIPT">
  1223.  
  1224.   void main() {
  1225.  
  1226.     ivec4 T_IXYV = GetTile_XYIV();
  1227.    
  1228.     vec3 FLAT = RenderTileBase( 2 , 0);
  1229.     if(FLAT.x == 0.0){
  1230.         gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
  1231.         return;
  1232.     }
  1233.    
  1234.     vec3 WARP = RenderTileBase( 0 , 0);
  1235.    
  1236.    
  1237.     vec2 F  = vec2( FLAT.x, FLAT.y );
  1238.     vec2 W  = vec2( WARP.x, WARP.y );
  1239.    
  1240.     float mix_amount;
  1241.    
  1242.     vec4 f1;
  1243.     vec4 f2;
  1244.     if(T_IXYV.w == 1){
  1245.        f1 = TIFA_NeonBeams( F );  //NeonBeams
  1246.        f2 = TIFA_NeonBeams( W );  //NeonBeams
  1247.        mix_amount = 0.3;
  1248.     }else
  1249.     if(T_IXYV.w == 2){
  1250.         f1 = TIFA_GalacticDance( F );  //GalacticDance
  1251.         f2 = TIFA_GalacticDance( W );  //GalacticDance
  1252.         mix_amount = 0.6;  
  1253.     }else{
  1254.         f1 = TIFA_AlienSurface( F );  //GalacticDance
  1255.         f2 = TIFA_AlienSurface( W );  //GalacticDance
  1256.         mix_amount = 0.6;
  1257.     }
  1258.    
  1259.     f1.w = WARP.z*1.5;
  1260.     gl_FragColor = mix( f1, f2, mix_amount );
  1261.    
  1262.     return;
  1263.    
  1264.   }
  1265. </script>
  1266.  
  1267.  
  1268.  
  1269.  
  1270. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->
  1271. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->
  1272. <!-- SSSSSSSSSS SHADER_SECTION END  SSSSSSSSSS -->
  1273. </head>
  1274. <!-- HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH -->
  1275.          
  1276. <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->                    
  1277. <body onload="ON_LOADED_FUNCTION()" >
  1278. <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
  1279.  
  1280.     <h3> Clickable WebGL Tilemap:           <h3>
  1281.     <p> Author: John Mark Isaac Madison <p>
  1282.     <p> Email : J4M4I5M7@hotmail.com    <p>
  1283.  
  1284.     <canvas id="glCanvas"></canvas>
  1285.    
  1286.     <div id="CONTROLS_DIV" style="background:yellow; overflow-visible;">
  1287.         <div id="TILE_SIZES_DIV"
  1288.            style="float:left;background-color:red; width:300px;" >
  1289.         </br>
  1290.         <button onClick="PUT_WID();">TILE_WIDTH__IN_PIXELS</button>
  1291.         <input type="text" id="INPUT_WID" value="45"
  1292.        style="width:32px;"
  1293.        >
  1294.         </br>
  1295.        
  1296.         </br>
  1297.         <button onClick="PUT_HIG();">TILE_HEIGHT_IN_PIXELS</button>
  1298.         <input type="text" id="INPUT_HIG" value="45"
  1299.        style="width:32px;"
  1300.        >
  1301.         </br>
  1302.         SET SIZE OF SINGE TILE ↑
  1303.         </div>
  1304.        
  1305.        
  1306.         <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
  1307.         <div id="DATA_BOUND_SLIDER_CONTAINER_01"
  1308.              style=" /* ********************** */
  1309.              float:left            ;
  1310.              width:128px           ;
  1311.              padding-right:30px    ;
  1312.              border:1px solid black;
  1313.              /* ***************************** */"
  1314.        >
  1315.             <label> TILE VALUE TO SET: </label>
  1316.             <div hidden id="CODE_DIV_01" style="width:0px;">
  1317.            
  1318.                 //Get Slider:
  1319.                 var SLIDER = document.getElementById(
  1320.                     "MY_SLIDER_01"
  1321.                 );
  1322.                 if(!SLIDER){ alert("[SLIDER_Get_Fail]");}
  1323.                
  1324.                 //Get Display:
  1325.                 var VALUE = document.getElementById(
  1326.                     "MY_SLIDER_VALUE_01"
  1327.                 );
  1328.                 if(!VALUE){ alert("[VAL_DISP_Get_Fail]");}
  1329.                
  1330.                 //Bind value:
  1331.                 var V = SLIDER.value;
  1332.                 VALUE.value = V;
  1333.                
  1334.                 PUT_UI_TILE_BRUSH_VALUE( V );
  1335.                 console.log("V==",V);
  1336.             </div>
  1337.             <input id="MY_SLIDER_01"
  1338.                style="width:100%;"
  1339.                type="range"
  1340.                oninput="/* ******************* */
  1341.                cid='CODE_DIV_01';
  1342.                var code_div = document.getElementById(cid);
  1343.                if(!code_div){alert('[BAD:cid]');}
  1344.                code=code_div.innerHTML;
  1345.                if(!code){alert('NO_CODE');}
  1346.                eval( code );
  1347.                /* *************************** */"
  1348.                min="0" max="3" value="1" >
  1349.             </br>
  1350.             <input id="MY_SLIDER_VALUE_01"
  1351.                type="text"
  1352.                value="1"
  1353.                style="width:100%; background-color:#AAAAAA;"
  1354.                disabled
  1355.            >
  1356.         </div>
  1357.         <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
  1358.        
  1359.     </div>
  1360.    
  1361. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->  
  1362. <script id="UI_SCRIPTS">
  1363. //
  1364.  
  1365.     function someFunc(){
  1366.         alert("some_func");
  1367.        
  1368.     }
  1369. </script>
  1370.  
  1371.  
  1372.  
  1373. <script id="BOILER_PLATE_CODE">
  1374.  
  1375. //BHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBH//
  1376. //This code was added to make an interactive
  1377. //resume for battle-house games.
  1378. //https://www.battlehouse.com/jobs/
  1379. //https://www.indeed.com/jobs?q=WebGl%20&l=Remote&vjk=542ddd54b33610ec
  1380.  
  1381. //All characters are 7 tiles high, but may be
  1382. //Wider or narrower on the x-axis.
  1383. //Padding is NOT included in the glyph patterns.
  1384.  
  1385. var GlyphClass = function(){
  1386.    this.WID = 0 ; //:Width  in tiles of glyph
  1387.     this.HIG = 0 ; //:Height in tiles of glyph
  1388.     this.MAP = []; //:Tile values. 0-24 inclusive.
  1389. }
  1390.  
  1391.  
  1392. var TileWriter = function(){
  1393.  
  1394.     //:Publically Exposed Functions:
  1395.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  1396.     this.LoadMessage = _loadMessage;
  1397.    
  1398.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  1399.  
  1400.     //:Values that capital glyphs are drawn with:
  1401.     var A = 2;
  1402.     var B = 2;
  1403.     var C = 2;
  1404.     var D = 2;
  1405.     var E = 2;
  1406.     var F = 2;
  1407.     var G = 2;
  1408.     var H = 2;
  1409.     var I = 2;
  1410.     var J = 2;
  1411.     var K = 2;
  1412.     var L = 2;
  1413.     var M = 2;
  1414.     var N = 2;
  1415.     var O = 2;
  1416.     var P = 2;
  1417.     var Q = 2;
  1418.     var R = 2;
  1419.     var S = 2;
  1420.     var T = 2;
  1421.     var U = 2;
  1422.     var V = 2;
  1423.     var W = 2;
  1424.     var X = 2;
  1425.     var Y = 2;
  1426.     var Z = 2;
  1427.    
  1428.  
  1429.     _A = new GlyphClass();
  1430.     _A.WID = 4;
  1431.     _A.HIG = 7;
  1432.     _A.MAP = [ A,A,A,A,
  1433.                A,0,0,A,
  1434.                A,A,A,A,
  1435.                A,0,0,A,
  1436.                A,0,0,A,
  1437.                A,0,0,A,
  1438.                A,0,0,A ];
  1439.                
  1440.     _B = new GlyphClass();
  1441.     _B.WID = 4;
  1442.     _B.HIG = 7;
  1443.     _B.MAP = [ B,B,B,0,
  1444.                B,0,0,B,
  1445.                B,0,0,B,
  1446.                B,B,B,0,
  1447.                B,0,0,B,
  1448.                B,0,0,B,
  1449.                B,B,B,0 ];
  1450.                
  1451.     _C = new GlyphClass();
  1452.     _C.WID = 4;
  1453.     _C.HIG = 7;
  1454.     _C.MAP = [ 0,C,C,0,
  1455.                C,0,0,C,
  1456.                C,0,0,0,
  1457.                C,0,0,0,
  1458.                C,0,0,0,
  1459.                C,0,0,C,
  1460.                0,C,C,0 ];
  1461.                
  1462.     _D = new GlyphClass();
  1463.     _D.WID = 4;
  1464.     _D.HIG = 7;
  1465.     _D.MAP = [ D,D,D,0,
  1466.                D,0,0,D,
  1467.                D,0,0,D,
  1468.                D,0,0,D,
  1469.                D,0,0,D,
  1470.                D,0,0,D,
  1471.                D,D,D,0 ];          
  1472.                
  1473.     _E = new GlyphClass();
  1474.     _E.WID = 4;
  1475.     _E.HIG = 7;
  1476.     _E.MAP = [ E,E,E,E,
  1477.                E,0,0,0,
  1478.                E,0,0,0,
  1479.                E,E,E,0,
  1480.                E,0,0,0,
  1481.                E,0,0,0,
  1482.                E,E,E,E ];              
  1483.                
  1484.     _F = new GlyphClass();
  1485.     _F.WID = 4;
  1486.     _F.HIG = 7;
  1487.     _F.MAP = [ F,F,F,F,
  1488.                F,0,0,0,
  1489.                F,0,0,0,
  1490.                F,F,F,0,
  1491.                F,0,0,0,
  1492.                F,0,0,0,
  1493.                F,0,0,0 ];          
  1494.  
  1495.     _G = new GlyphClass();
  1496.     _G.WID = 4;
  1497.     _G.HIG = 7;
  1498.     _G.MAP = [ G,G,G,G,
  1499.                G,0,0,0,
  1500.                G,0,0,0,
  1501.                G,0,G,G,
  1502.                G,0,0,G,
  1503.                G,0,0,G,
  1504.                G,G,G,G ];          
  1505.  
  1506.     _H = new GlyphClass();
  1507.     _H.WID = 4;
  1508.     _H.HIG = 7;
  1509.     _H.MAP = [ H,0,0,H,
  1510.                H,0,0,H,
  1511.                H,0,0,H,
  1512.                H,H,H,H,
  1513.                H,0,0,H,
  1514.                H,0,0,H,
  1515.                H,0,0,H ];            
  1516.                
  1517.     _I = new GlyphClass();
  1518.     _I.WID = 4;
  1519.     _I.HIG = 7;
  1520.     _I.MAP = [ I,I,I,I,
  1521.                I,I,I,I,
  1522.                0,I,I,0,
  1523.                0,I,I,0,
  1524.                0,I,I,0,
  1525.                I,I,I,I,
  1526.                I,I,I,I ];                  
  1527.                
  1528.     _J = new GlyphClass();
  1529.     _J.WID = 5;
  1530.     _J.HIG = 7;
  1531.     _J.MAP = [ J,J,J,J,J,
  1532.                0,0,J,0,0,
  1533.                0,0,J,0,0,
  1534.                0,0,J,0,0,
  1535.                J,0,J,0,0,
  1536.                J,0,J,0,0,
  1537.                0,J,0,0,0];  
  1538.  
  1539.     _K = new GlyphClass();
  1540.     _K.WID = 5;
  1541.     _K.HIG = 7;
  1542.     _K.MAP = [ K,0,0,0,K,
  1543.                K,0,0,K,0,
  1544.                K,K,K,0,0,
  1545.                K,K,K,0,0,
  1546.                K,0,K,0,0,
  1547.                K,0,0,K,0,
  1548.                K,0,0,0,K];              
  1549.                
  1550.     _L = new GlyphClass();
  1551.     _L.WID = 3;
  1552.     _L.HIG = 7;
  1553.     _L.MAP = [ L,0,0,
  1554.                L,0,0,
  1555.                L,0,0,
  1556.                L,0,0,
  1557.                L,0,0,
  1558.                L,0,0,
  1559.                L,L,L];      
  1560.  
  1561.     _M = new GlyphClass();
  1562.     _M.WID = 5;
  1563.     _M.HIG = 7;
  1564.     _M.MAP = [ M,M,M,M,M,
  1565.                M,0,M,0,M,
  1566.                M,0,M,0,M,
  1567.                M,0,M,0,M,
  1568.                M,0,M,0,M,
  1569.                M,0,0,0,M,
  1570.                M,0,0,0,M];              
  1571.                
  1572.     _N = new GlyphClass();
  1573.     _N.WID = 6;
  1574.     _N.HIG = 7;
  1575.     _N.MAP = [ N,0,0,0,0,N,
  1576.                N,N,0,0,0,N,
  1577.                N,N,N,0,0,N,
  1578.                N,0,N,N,0,N,
  1579.                N,0,0,N,N,N,
  1580.                N,0,0,0,N,N,
  1581.                N,0,0,0,0,N];              
  1582.                
  1583.     _O = new GlyphClass();
  1584.     _O.WID = 4;
  1585.     _O.HIG = 7;
  1586.     _O.MAP = [ O,O,O,O,
  1587.                O,0,0,O,
  1588.                O,0,0,O,
  1589.                O,0,0,O,
  1590.                O,0,0,O,
  1591.                O,0,0,O,
  1592.                O,O,O,O];
  1593.  
  1594.     _P = new GlyphClass();
  1595.     _P.WID = 4;
  1596.     _P.HIG = 7;
  1597.     _P.MAP = [ P,P,P,P,
  1598.                P,0,0,P,
  1599.                P,P,P,P,
  1600.                P,0,0,0,
  1601.                P,0,0,0,
  1602.                P,0,0,0,
  1603.                P,0,0,0];      
  1604.  
  1605.     _Q = new GlyphClass();
  1606.     _Q.WID = 6;
  1607.     _Q.HIG = 7;
  1608.     _Q.MAP = [ 0,Q,Q,Q,0,0,
  1609.                Q,0,0,0,Q,0,
  1610.                Q,0,0,0,Q,0,
  1611.                Q,0,Q,0,Q,0,
  1612.                Q,0,0,Q,Q,0,
  1613.                Q,0,0,0,Q,0,
  1614.                0,Q,Q,Q,0,Q];    
  1615.  
  1616.     _R = new GlyphClass();
  1617.     _R.WID = 5;
  1618.     _R.HIG = 7;
  1619.     _R.MAP = [ R,R,R,0,0,
  1620.                R,0,0,R,0,
  1621.                R,0,0,R,0,
  1622.                R,R,R,0,0,
  1623.                R,0,0,R,0,
  1624.                R,0,0,0,R,
  1625.                R,0,0,0,R];              
  1626.                
  1627.     _S = new GlyphClass();
  1628.     _S.WID = 5;
  1629.     _S.HIG = 7;
  1630.     _S.MAP = [ 0,S,S,S,S,
  1631.                S,0,0,0,0,
  1632.                S,0,0,0,0,
  1633.                0,S,S,S,0,
  1634.                0,0,0,0,S,
  1635.                0,0,0,0,S,
  1636.                S,S,S,S,0];              
  1637.                
  1638.     _T = new GlyphClass();
  1639.     _T.WID = 5;
  1640.     _T.HIG = 7;
  1641.     _T.MAP = [ T,T,T,T,T,
  1642.                0,0,T,0,0,
  1643.                0,0,T,0,0,
  1644.                0,0,T,0,0,
  1645.                0,0,T,0,0,
  1646.                0,0,T,0,0,
  1647.                0,0,T,0,0];          
  1648.                
  1649.     _U = new GlyphClass();
  1650.     _U.WID = 5;
  1651.     _U.HIG = 7;
  1652.     _U.MAP = [ U,0,0,0,U,
  1653.                U,0,0,0,U,
  1654.                U,0,0,0,U,
  1655.                U,0,0,0,U,
  1656.                U,0,0,0,U,
  1657.                U,0,0,0,U,
  1658.                0,U,U,U,0];        
  1659.  
  1660.     _V = new GlyphClass();
  1661.     _V.WID = 5;
  1662.     _V.HIG = 7;
  1663.     _V.MAP = [ V,0,0,0,V,
  1664.                V,0,0,0,V,
  1665.                V,0,0,0,V,
  1666.                V,0,0,0,V,
  1667.                V,0,0,0,V,
  1668.                0,V,0,V,0,
  1669.                0,0,V,0,0];              
  1670.                
  1671.     _W = new GlyphClass();
  1672.     _W.WID = 5;
  1673.     _W.HIG = 7;
  1674.     _W.MAP = [ W,0,0,0,W,
  1675.                W,0,0,0,W,
  1676.                W,0,W,0,W,
  1677.                W,0,W,0,W,
  1678.                W,0,W,0,W,
  1679.                W,0,W,0,W,
  1680.                0,W,W,W,0];          
  1681.                
  1682.     _X = new GlyphClass();
  1683.     _X.WID = 7;
  1684.     _X.HIG = 7;
  1685.     _X.MAP = [ X,0,0,0,0,0,X,
  1686.                0,X,0,0,0,X,0,
  1687.                0,0,X,0,X,0,0,
  1688.                0,0,0,X,0,0,0,
  1689.                0,0,X,0,X,0,0,
  1690.                0,X,0,0,0,X,0,
  1691.                X,0,0,0,0,0,X];  
  1692.  
  1693.     _Y = new GlyphClass();
  1694.     _Y.WID = 5;
  1695.     _Y.HIG = 7;
  1696.     _Y.MAP = [ Y,0,0,0,Y,
  1697.                0,Y,0,Y,0,
  1698.                0,0,Y,0,0,
  1699.                0,0,Y,0,0,
  1700.                0,0,Y,0,0,
  1701.                0,0,Y,0,0,
  1702.                0,0,Y,0,0];        
  1703.  
  1704.     _Z = new GlyphClass();
  1705.     _Z.WID = 7;
  1706.     _Z.HIG = 7;
  1707.     _Z.MAP = [ Z,Z,Z,Z,Z,Z,Z,
  1708.                Z,0,0,0,0,Z,0,
  1709.                0,0,0,0,Z,0,0,
  1710.                0,0,0,Z,0,0,0,
  1711.                0,0,Z,0,0,0,0,
  1712.                0,Z,0,0,0,0,Z,
  1713.                Z,Z,Z,Z,Z,Z,Z];    
  1714.  
  1715.     _SPACE = new GlyphClass();
  1716.     _SPACE.WID = 3;
  1717.     _SPACE.HIG = 7;
  1718.     _SPACE.MAP = [ 0,0,0,
  1719.                    0,0,0,
  1720.                    0,0,0,
  1721.                    0,0,0,
  1722.                    0,0,0,
  1723.                    0,0,0,
  1724.                    0,0,0];
  1725.    
  1726.     //:Sliver of empty space used between
  1727.     //:characters of the same word.
  1728.     _SLIVER = new GlyphClass();
  1729.     _SLIVER.WID = 1;
  1730.     _SLIVER.HIG = 7;
  1731.     _SLIVER.MAP = [ 0,
  1732.                     0,
  1733.                     0,
  1734.                     0,
  1735.                     0,
  1736.                     0,
  1737.                     0];
  1738.    
  1739.    
  1740.     _DOT = new GlyphClass();
  1741.     _DOT.WID = 2;
  1742.     _DOT.HIG = 7;
  1743.     _DOT.MAP = [ 0,0,
  1744.                  0,0,            
  1745.                  0,0,
  1746.                  0,0,
  1747.                  0,0,
  1748.                  1,1,
  1749.                  1,1];
  1750.                  
  1751.     _COMMA = new GlyphClass();
  1752.     _COMMA.WID = 3;
  1753.     _COMMA.HIG = 7;
  1754.     _COMMA.MAP = [ 0,0,0,
  1755.                    0,0,0,
  1756.                    0,0,0,
  1757.                    0,0,0,
  1758.                    0,1,1,
  1759.                    0,1,1,
  1760.                    1,1,0];            
  1761.                  
  1762.                  
  1763.                  
  1764.                  
  1765.  
  1766. var _CHAR_MAPS = {}; //:empty object.
  1767.     _CHAR_MAPS.A = _A; //: 01 ://
  1768.     _CHAR_MAPS.B = _B; //: 02 ://
  1769.     _CHAR_MAPS.C = _C; //: 03 ://
  1770.     _CHAR_MAPS.D = _D; //: 04 ://
  1771.     _CHAR_MAPS.E = _E; //: 05 ://
  1772.     _CHAR_MAPS.F = _F; //: 06 ://
  1773.     _CHAR_MAPS.G = _G; //: 07 ://
  1774.     _CHAR_MAPS.H = _H; //: 08 ://
  1775.     _CHAR_MAPS.I = _I; //: 09 ://
  1776.     _CHAR_MAPS.J = _J; //: 10 ://
  1777.     _CHAR_MAPS.K = _K; //: 11 ://
  1778.     _CHAR_MAPS.L = _L; //: 12 ://
  1779.     _CHAR_MAPS.M = _M; //: 13 ://
  1780.     _CHAR_MAPS.N = _N; //: 14 ://
  1781.     _CHAR_MAPS.O = _O; //: 15 ://
  1782.     _CHAR_MAPS.P = _P; //: 16 ://
  1783.     _CHAR_MAPS.Q = _Q; //: 17 ://
  1784.     _CHAR_MAPS.R = _R; //: 18 ://
  1785.     _CHAR_MAPS.S = _S; //: 19 ://
  1786.     _CHAR_MAPS.T = _T; //: 20 ://
  1787.     _CHAR_MAPS.U = _U; //: 21 ://
  1788.     _CHAR_MAPS.V = _V; //: 22 ://
  1789.     _CHAR_MAPS.W = _W; //: 23 ://
  1790.     _CHAR_MAPS.X = _X; //: 24 ://
  1791.     _CHAR_MAPS.Y = _Y; //: 25 ://
  1792.     _CHAR_MAPS.Z = _Z; //: 26 ://
  1793.     _CHAR_MAPS.SPACE = _SPACE;
  1794.     _CHAR_MAPS.SLIVER= _SLIVER;
  1795.     _CHAR_MAPS.DOT   = _DOT;
  1796.     _CHAR_MAPS.COMMA = _COMMA;
  1797.  
  1798.     function _loadMessage(
  1799.         msg,//:Message to write.
  1800.         PIX,//:Tile-Data
  1801.         WID,//:Width of tile-data
  1802.         HIG //:Height of tile-data
  1803.     ){
  1804.  
  1805.         var cm   = null; //character map object.
  1806.         var  c   = ""  ; //current char string.
  1807.         var os_x = 0; //:offset x.
  1808.         var next_os_x = 0;
  1809.         var num_chars = msg.length;
  1810.         for(var i =0; i < num_chars; i++){
  1811.            c = msg.charAt( i );
  1812.            if(c==""){
  1813.                慌("[EMPTY_CHARACTER_FOUND]");
  1814.            }else
  1815.            if(c==" "){
  1816.                cm = _CHAR_MAPS.SPACE;
  1817.            }else
  1818.            if(c=="."){
  1819.                cm  = _CHAR_MAPS.DOT;
  1820.            }else
  1821.            if(c==","){
  1822.                cm = _CHAR_MAPS.COMMA;
  1823.            }else{
  1824.            
  1825.                cm = _CHAR_MAPS[ c ];
  1826.            }
  1827.            
  1828.            _stamp(cm,os_x,0, PIX,WID,HIG);
  1829.            
  1830.            //:Next offset origin:
  1831.            next_os_x = os_x        +
  1832.                        cm     .WID +
  1833.                        _SLIVER.WID;
  1834.                        
  1835.            os_x = next_os_x;    
  1836.        }
  1837.  
  1838.              
  1839.    }
  1840.  
  1841.    
  1842.    function _stamp(
  1843.    cm  , //Character map to stamp.
  1844.    os_x, //Glyph stamping origin/offset.
  1845.    os_y, //Glyph stamping origin/offset.
  1846.    
  1847.    PIX , //Data/tilemap to stamp onto.
  1848.          //This is RGBA byte array. We
  1849.          //Use the red channel for tile values.
  1850.    
  1851.    WID , //Width  of tilemap.
  1852.    HIG   //Height of tilemap.
  1853.    ){
  1854.        if(!WID || !HIG){
  1855.            throw("[Problem_WIDHIG]");
  1856.        }
  1857.        
  1858.        if(!cm){
  1859.            throw("[null cm input]");
  1860.        }
  1861.        if(!cm.WID || !cm.HIG){
  1862.            throw("[Glyph_Has_Issues]");
  1863.        }
  1864.    
  1865.        var max_x = 0;
  1866.        var max_y = 0;
  1867.        max_x = cm.WID-1;
  1868.        max_y = cm.HIG-1;
  1869.        
  1870.        var dst_x = 0; //destination X.
  1871.        var dst_y = 0; //destination Y.
  1872.        var dst_i = 0; //destination INDEX
  1873.        var src_i = 0; //source      INDEX
  1874.        
  1875.        var first_component = 0;
  1876.        var sy = 0;
  1877.        
  1878.        var tile_val = 0;
  1879.        var rgb_val  = 0;
  1880.        
  1881.        for(var x = 0; x<=max_x; x++){
  1882.        for(var y = 0; y<=max_y; y++){
  1883.        
  1884.            //:Get source and destination indicies;
  1885.            //////////////////////////
  1886.            sy = (cm.HIG-1-y); //<<Flip Glyph.
  1887.            src_i = (cm.WID*sy)+x;
  1888.        
  1889.            dst_x = os_x + x;
  1890.            dst_y = os_y + y;
  1891.            dst_i = (WID*dst_y)+dst_x;
  1892.            //////////////////////////
  1893.            
  1894.            //:Convert index value to
  1895.            //:RGB:0-255 byte scale:
  1896.            tile_val = cm.MAP[ src_i ];
  1897.            rgb_val = ( tile_val * 10) + 5;
  1898.            
  1899.            //:Must multiply by 4 because there
  1900.            //:are 4 bytes per pixel.
  1901.            first_component = dst_i * 4;
  1902.            
  1903.            //:Put value into tilemap:
  1904.            if(tile_val > 0){ //<--No Erasing.
  1905.                PIX[ first_component ] = rgb_val;
  1906.            }
  1907.            
  1908.            
  1909.        }}
  1910.    }
  1911.  
  1912. } //:end of tile-writer class.    
  1913. //BHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBHBH//          
  1914.          
  1915.    //The width and height in PIXELS of a
  1916.    //single tile on our tile-map:
  1917.    GLOBAL_TIL_WID = 64;
  1918.    GLOBAL_TIL_HIG = 64;
  1919.  
  1920.  
  1921.    var UI_TILE_BRUSH_VALUE = 1; //<--script global
  1922.    function PUT_UI_TILE_BRUSH_VALUE( V ){
  1923.        if(V < 0 || V > 24){
  1924.             alert("[OUT_OF_RANGE]");
  1925.         }
  1926.        
  1927.         UI_TILE_BRUSH_VALUE = Math.floor( V );
  1928.         //alert( UI_TILE_BRUSH_VALUE);
  1929.     }
  1930.  
  1931.     //SOURCE:https://www.john-smith.me/hassles-with-array-access-in-webgl-and-a-couple-of-workarounds.html
  1932.     var HACK_CANVAS = document.createElement('canvas');
  1933.     HACK_CANVAS.width = 128*128;
  1934.     HACK_CANVAS.height= 1;
  1935.  
  1936.     //Global Array Container:
  1937.     var GLOBAL_GAC;
  1938.  
  1939.     var SCROLL_X    = (0-(10*GLOBAL_TIL_WID));
  1940.     var SCROLL_Y    = 0;
  1941.     var SCROLL_X_MAX_TILES = 95;
  1942.     var SCROLL_SPEED = 1;
  1943.     var FRAME_DELTA = SCROLL_SPEED;
  1944.    
  1945.    
  1946.    
  1947.    
  1948.     var TIME_UPUP   = 0;
  1949.     var TIME_0255   = 0;
  1950.     var TIME_2PI    = 0.0;
  1951.     var TIME_TICKER = 0.0;
  1952.     function UPDATE_TIMER(){
  1953.       TIME_UPUP = TIME_UPUP + 0.01;
  1954.       TIME_0255 += 0.75;
  1955.       if(TIME_0255 > 255){ TIME_0255 = 0; }
  1956.       TIME_2PI = (TIME_0255 / 255) * (Math.PI * 2);
  1957.      
  1958.       //Use cos to modulate value between 0 and 1:
  1959.       //To do so, need to offset by 1 and divide
  1960.       //by two to transform [-1, 1] range
  1961.       //into [0, 1] range.
  1962.       TIME_TICKER = ( Math.cos(TIME_2PI) + 1) / 2;
  1963.      
  1964.       //console.log( TIME_TICKER);
  1965.       SET_ATTR("TIME_TICKER", TIME_TICKER);
  1966.       SET_ATTR("TIME_UPUP"  , TIME_UPUP  );
  1967.      
  1968.       //:NOTE: If you scroll by fractional pixels,
  1969.       //:you will get artifacts along the seems
  1970.       //:between tiles.
  1971.       X_MAX = SCROLL_X_MAX_TILES * GLOBAL_TIL_WID;
  1972.       SCROLL_X += FRAME_DELTA;
  1973.       if( SCROLL_X > X_MAX && FRAME_DELTA > 0){
  1974.          FRAME_DELTA = (0-SCROLL_SPEED);
  1975.       }else
  1976.       if( SCROLL_X <= 0 && FRAME_DELTA < 0){
  1977.          FRAME_DELTA = (0+SCROLL_SPEED);
  1978.      }
  1979.      
  1980.      SCROLL_Y = 0;
  1981.      SET_ATTR("SCROLL_X", SCROLL_X);
  1982.      SET_ATTR("SCROLL_Y", SCROLL_Y);
  1983.    }
  1984.  
  1985.  
  1986.    function ON_LOADED_FUNCTION(){
  1987.        console.log("[ON_LOADED_FUNCTION]");
  1988.        main();
  1989.    }
  1990.    
  1991.    //:Takes the gl context object, if the input
  1992.    //:is null, we likely failed to get the
  1993.    //:context.
  1994.    function HAS_OPEN_GL_CHECK(gl){
  1995.      // Only continue if WebGL is
  1996.      // available and working
  1997.      if (!gl) {
  1998.        var msg = "";
  1999.        msg += "[Unable to initialize WebGL.]";
  2000.        msg += "[your browser or machine may]";
  2001.        msg +=  "[not support it.]"
  2002.        alert( msg );
  2003.        return;
  2004.      }
  2005.    }
  2006.    
  2007.    function GET_INPUT_BOX_VALUE( elem_id ){
  2008.        var box; //DOM input box
  2009.        var val; //Value in input box.
  2010.        box = document.getElementById( elem_id );
  2011.        val = box.value;
  2012.        return (0 + val); //cast to number.
  2013.    }
  2014.    
  2015.    function PUT_WID(){
  2016.        assert_program_and_gl_exist();
  2017.        var val = GET_INPUT_BOX_VALUE("INPUT_WID");
  2018.        var res = SET_ATTR_UI("TIL_WID_EDIT", val);
  2019.        
  2020.        //For click listener on canvas:
  2021.        if(res){ GLOBAL_TIL_WID = val; }
  2022.    }
  2023.    
  2024.    function PUT_HIG(){
  2025.        assert_program_and_gl_exist();
  2026.        var val = GET_INPUT_BOX_VALUE("INPUT_HIG");
  2027.        var res = SET_ATTR_UI("TIL_HIG_EDIT", val);
  2028.  
  2029.        //For click listener on canvas:
  2030.        if(res){ GLOBAL_TIL_HIG = val; }
  2031.    }
  2032.    
  2033.    //Integer Version of set-attribute helper:
  2034.    function SET_ATTR_INT(gl_var_name, val){
  2035.        var loc; //<--location of variable
  2036.        loc = gl.getUniformLocation(
  2037.            program,
  2038.            gl_var_name
  2039.        );
  2040.        
  2041.        gl.useProgram(program);
  2042.        gl.uniform1i(loc, val );
  2043.    }
  2044.    
  2045.    //Returns TRUE if successful:
  2046.    function SET_ATTR(gl_var_name, val){
  2047.        
  2048.        var loc; //<--location of variable.
  2049.        loc = gl.getUniformLocation(
  2050.            program    ,
  2051.            gl_var_name
  2052.        );
  2053.        gl.useProgram(program);
  2054.        gl.uniform1f(loc, val);
  2055.        
  2056.        return true;
  2057.    }
  2058.    
  2059.    //Version of SET_ATTR used for the
  2060.    //User Interface (UI):
  2061.    function SET_ATTR_UI(gl_var_name, val){
  2062.        if(val < 0 || val > 256 ){
  2063.             alert("choose value between 0 to 256");
  2064.            
  2065.             //Call was ignored, so return false:
  2066.             return false;
  2067.         }
  2068.        
  2069.         return SET_ATTR(gl_var_name, val);
  2070.     }
  2071.    
  2072.    
  2073.     function assert_program_and_gl_exist(){
  2074.         if(!program){慌("[NO_PROGRAM_EXISTS]");}
  2075.         if(!gl     ){慌("[NO_GL_EXISTS]");}
  2076.     }
  2077.    
  2078.     //慌: "disconcerted, be confused, lose one's head"
  2079.     //慌: In Code: ~Panic~
  2080.     function 慌( panic_message ){
  2081.         console.log( panic_message );
  2082.         alert      ( panic_message );
  2083.         throw      ( panic_message );
  2084.     }
  2085.  
  2086.     function makeOpenGlContextUsingCanvas(c){
  2087.        
  2088.         //:Try what works in chrome and all the
  2089.         //:respectable browsers first:
  2090.         gl = c.getContext("webgl");
  2091.        
  2092.         if(!gl){
  2093.             console.log("[Probably_In_IE]");
  2094.             gl = c.getContext("experimental-webgl");
  2095.         }else{
  2096.             console.log("[Probably_NOT_IE]");
  2097.         }
  2098.        
  2099.         HAS_OPEN_GL_CHECK( gl );
  2100.         return gl;
  2101.     }
  2102.    
  2103.     function CANVAS_CLICK_FUNCTION(event){
  2104.         var mp = getMousePos(canvas,event);
  2105.        
  2106.         //Correct to match openGL orientation:
  2107.         mp.y = canvas.height - mp.y;
  2108.        
  2109.         console.log( mp );  
  2110.  
  2111.         //:Offset by scroll amount:
  2112.         var MP_X = mp.x + SCROLL_X;
  2113.         var MP_Y = mp.y + SCROLL_Y;
  2114.  
  2115.         //Determine tile clicked on:
  2116.         var tx = MP_X / GLOBAL_TIL_WID;
  2117.         var ty = MP_Y / GLOBAL_TIL_HIG;
  2118.         tx = Math.floor(tx);
  2119.         ty = Math.floor(ty);
  2120.         console.log("tx:", tx, "ty:", ty);
  2121.        
  2122.         //Convert to index:
  2123.         var dex;
  2124.         dex = (GLOBAL_GAC.WID * ty) + tx;
  2125.       //val = GLOBAL_GAC.Get_R( dex );
  2126.       //val = GLOBAL_GAC.Get_TileValue( dex );
  2127.         val = UI_TILE_BRUSH_VALUE;
  2128.        
  2129.         var MAX_TILE_VALUE = 3;
  2130.        
  2131.         // No more auto-increment:
  2132.         // if(val >= MAX_TILE_VALUE ){
  2133.         //     val = 0;
  2134.         // }else{
  2135.         //     val = val + 1;
  2136.         // }
  2137.         if( val < 0 || val > MAX_TILE_VALUE){
  2138.             慌("[Out_Of_Valid_Tile_Value_Bounds]");
  2139.         }
  2140.        
  2141.        
  2142.       //GLOBAL_GAC.Put_R( dex , val );
  2143.         if(val==0){ console.log("[Putting0]");}
  2144.         GLOBAL_GAC.Put_TileValue( dex, val );
  2145.        
  2146.         //Update The Shader With New TileMap:
  2147.         GLOBAL_GAC.pushToGL();
  2148.     }
  2149.    
  2150.     function getMousePos(GMP_canvas, evt) {
  2151.         var rect = GMP_canvas.getBoundingClientRect();
  2152.         return {
  2153.           x: evt.clientX - rect.left,
  2154.           y: evt.clientY - rect.top
  2155.         };
  2156.     }
  2157.    
  2158.     //: No "var" prefix, making them global:
  2159.     function initGlobals(){
  2160.    
  2161.        
  2162.    
  2163.  
  2164.    
  2165.         canvas = document.querySelector("#glCanvas");
  2166.         if(!canvas){
  2167.             alert("FAILED_TO_GET_CANVAS");
  2168.         }else{
  2169.             console.log("[GOT_CANVAS]");
  2170.         }
  2171.        
  2172.         //Add listener to canvas:
  2173.         canvas.addEventListener('click',CANVAS_CLICK_FUNCTION);
  2174.        
  2175.        
  2176.         gl = makeOpenGlContextUsingCanvas(canvas);
  2177.        
  2178.        
  2179.         //These dimensions are hard-coded into
  2180.         //fragment shader code, so be careful
  2181.         //about changing them:
  2182.         canvas.width = 640;
  2183.         canvas.height= 480;
  2184.    
  2185.         buffer = gl.createBuffer();
  2186.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  2187.         gl.bufferData(
  2188.         gl.ARRAY_BUFFER,
  2189.         new Float32Array([
  2190.           -1.0, -1.0,
  2191.            1.0, -1.0,
  2192.           -1.0,  1.0,
  2193.           -1.0,  1.0,
  2194.            1.0, -1.0,
  2195.            1.0,  1.0]),
  2196.         gl.STATIC_DRAW
  2197.         );
  2198.        
  2199.         //G == Global Container.
  2200.         //To fix problems with rendering in I.E.
  2201.         //(Internet Explorer)
  2202.         //GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG//
  2203.         var G = {};
  2204.         G.canvas = canvas;
  2205.         G.gl     = gl;
  2206.         G.buffer = buffer;
  2207.        
  2208.         if( ! G.canvas ||
  2209.             ! G.gl     ||
  2210.             ! G.buffer  ){
  2211.             慌("[Global_Container_Broken]");
  2212.         }
  2213.        
  2214.         return G;
  2215.         //GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG//
  2216.     }
  2217.    
  2218.     function main(){
  2219.    
  2220.       G = initGlobals();
  2221.       HAS_OPEN_GL_CHECK( G );
  2222.      
  2223.       gl.viewport(0,0,gl.drawingBufferWidth ,
  2224.                       gl.drawingBufferHeight);
  2225.  
  2226.       setup();
  2227.       render();
  2228.      
  2229.      
  2230.       SETUP_TILE_MAP_DATA();
  2231.      
  2232.       _initMessage();
  2233.      
  2234.     }
  2235.    
  2236.     function _initMessage(){
  2237.         var TW = new TileWriter();
  2238.        
  2239.         var PIX = GLOBAL_GAC.PIX;
  2240.         var WID = GLOBAL_GAC.WID;
  2241.         var HIG = GLOBAL_GAC.HIG;
  2242.         TW.LoadMessage("HELLO MATT",PIX,WID,HIG);
  2243.         GLOBAL_GAC.pushToGL();
  2244.     }
  2245.    
  2246.     //Need texture/buffer container: 斗
  2247.     var GLArrayContainer = function(){
  2248.         var _self = this;
  2249.        
  2250.         //Max is 245 because:
  2251.         //Math.floor( 245/10 ) --> 24.
  2252.         //We are only using 24 tile values.
  2253.         var _MAX_RGB_VAL = 245;
  2254.        
  2255.         //web-gl texture handle:
  2256.         this.TEX = null;
  2257.        
  2258.         //Pixel Array:
  2259.         this.PIX = null;
  2260.        
  2261.         //Number of pixels in Pixel Array:
  2262.         this.PIX_NUM = 0;
  2263.         this.WID     = 0; //width in pixels.
  2264.         this.HIG     = 0; //height in pixels. Sure pixels?
  2265.        
  2266.         //Publically Exposed Functions:
  2267.         //PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP//
  2268.         this.setPixelByIndex   = _setPixelByIndex;
  2269.         this.makePattern       = _makePattern    ;
  2270.         this.solidFill         = _solidFill      ;
  2271.         this.pushToGL          = _pushToGL       ;
  2272.        
  2273.         this.Put_TileValue     = _put_TileValue  ;
  2274.         this.Get_TileValue     = _get_TileValue  ;
  2275.        
  2276.         this.Get_R             = _get_R;
  2277.         this.Put_R             = _put_R;
  2278.        
  2279.         //PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP//
  2280.        
  2281.         //: i == index.
  2282.         function _get_R( i ){
  2283.             var RED_INDEX = 0;
  2284.             var r = _self.PIX[(i*4) + RED_INDEX];
  2285.             return r;
  2286.         }
  2287.        
  2288.         //: i == index.
  2289.         function _put_R( i, val){
  2290.             var RED_INDEX = 0;
  2291.             _self.PIX[(i*4) + RED_INDEX] = val;
  2292.         }
  2293.        
  2294.         //Put a tile-value by INDEX:
  2295.         function _get_TileValue( i ){
  2296.             var _0245 = _get_R( i );
  2297.             var TV    = _0245_to_index24( _0245 );
  2298.             return TV;
  2299.         }
  2300.        
  2301.         //Get a tile-value by INDEX:
  2302.         function _put_TileValue( i, TV ){
  2303.             var _0245 = _index24_to_0245( TV );
  2304.             _put_R( i, _0245 );
  2305.         }
  2306.        
  2307.         //////////////////////////////////////////
  2308.         //Array stores RGB values in 0-255 range,
  2309.         //But we only want to store 24 tile
  2310.         //values. We need to spread out the
  2311.         //values, since OpenGL is going to normalize
  2312.         //the values into [0.0 to 1.0] range,
  2313.         //Spreading them out will make it easier
  2314.         //to determine what tile values you have
  2315.         //when you get to the fragment shader.
  2316.         //////////////////////////////////////////
  2317.         //Convert RGB 0-255 value to range 0-24
  2318.         function _0245_to_index24( _0245 ){
  2319.             if(!(_0245>=0 && _0245 <= 245)){
  2320.                慌("[0245_INPUT_OOB]:"+_0245);
  2321.             }
  2322.        
  2323.             var op = Math.floor( _0245/10 );
  2324.             if(op < 0 || op > 24){
  2325.                 慌("[BAD_OUTPUT:RGB->DEX24]:" + op);
  2326.             }
  2327.             return op;
  2328.         }
  2329.        
  2330.         //Convert 0-24 to RGB 0-255
  2331.         function _index24_to_0245( _index24 ){
  2332.             if( !(_index24>=0 && _index24<=24)){
  2333.                慌("[INPUT_0-24_OUT_OF_RANGE]:" + _index24);
  2334.                 return 0;
  2335.             }
  2336.            
  2337.             //Multiply by 10 to maximize spacing
  2338.             //with an easy to comprehend value.
  2339.             //Add 5 so when values are normalized,
  2340.             //our conversion calculations wont
  2341.             //get #EDGE_MISCALCULATIONS#
  2342.            
  2343.             //example: 0 --> 5
  2344.             //example: 1 --> 15
  2345.             var op = ((_index24*10)+5);
  2346.             if(op < 0 || op > 245){
  2347.                 慌("[Calcs_Are_Wrong]");
  2348.             }
  2349.             return op;
  2350.         }
  2351.         //////////////////////////////////////////
  2352.        
  2353.         function _setPixelByIndex(i, r,g,b, a){
  2354.        
  2355.             //Make sure RGB is in valid range:
  2356.             //////////////////////////////
  2357.             if(!(r>=0 && r<=_MAX_RGB_VAL)){
  2358.                慌("[SPBI:R-OOB]" + r);
  2359.             }
  2360.             if(!(g>=0 && g<=_MAX_RGB_VAL)){
  2361.                慌("[SPBI:G-OOB]" + g);
  2362.             }
  2363.             if(!(b>=0 && b<=_MAX_RGB_VAL)){
  2364.                慌("[SPBI:B-OOB]" + b);
  2365.             }
  2366.             //////////////////////////////
  2367.            
  2368.             //Make sure alpha is in valid range:
  2369.             //Lets use same Cap for consistency.
  2370.             //////////////////////////////////////
  2371.             if(!(a>=0 && a<=_MAX_RGB_VAL)){
  2372.                慌("[SPBI:A-OOB]" + a);
  2373.             }
  2374.             //////////////////////////////////////
  2375.            
  2376.        
  2377.             //Multiply by 4 to get address
  2378.             //of first component of pixel [i]
  2379.             //Because each pixel is 4-bytes:
  2380.             var b = i*4;
  2381.            
  2382.             //RGBA (alpha last)  (NOT : argb)
  2383.             _self.PIX[ b + 0 ] = r;
  2384.             _self.PIX[ b + 1 ] = g;
  2385.             _self.PIX[ b + 2 ] = b;
  2386.             _self.PIX[ b + 3 ] = a;
  2387.         }
  2388.        
  2389.         function _solidFill(){
  2390.             //PIX_NUM: Number of pixels on buffer.
  2391.             if(_self.PIX_NUM <= 0){
  2392.                慌("[BAD_PIX_NUM]");
  2393.            }
  2394.        
  2395.            var r = 245;
  2396.            var g = 22;
  2397.            var b = 64;
  2398.            var a = _MAX_RGB_VAL;
  2399.            for(var i = 0; i < _self.PIX_NUM; i++){
  2400.                _setPixelByIndex(i,r,g,b,a);
  2401.            }
  2402.        }
  2403.        
  2404.        //Make a checker pattern:
  2405.        function _makePattern(){
  2406.            var EVERY_OTHER = false;
  2407.            var i_r = 0;
  2408.            var i_g = 0;
  2409.            var i_b = 0;
  2410.            for(var i = 0; i < _self.PIX_NUM; i++){
  2411.                EVERY_OTHER = (!EVERY_OTHER);
  2412.                if( EVERY_OTHER ){
  2413.                    i_r = _MAX_RGB_VAL;
  2414.                    i_g = _MAX_RGB_VAL;
  2415.                    i_b = _MAX_RGB_VAL;
  2416.                }else{
  2417.                    //alert("HEY");
  2418.                    i_r = 0;
  2419.                    i_g = 0;
  2420.                    i_b = 0;
  2421.                }
  2422.                _setPixelByIndex(
  2423.                // DEX| R  | G  | B | ALPHA //////
  2424.                    i, i_r, i_g, i_b,_MAX_RGB_VAL
  2425.                );
  2426.            }
  2427.        }
  2428.        
  2429.        //Push changes to Web-GL so fragment
  2430.        //shader can use the values:
  2431.        function _pushToGL(){
  2432.            if(!_self.TEX){慌("[TEX_PROBLEM]");}
  2433.            console.log("[push_to_gl]");
  2434.            
  2435.            
  2436.            gl.activeTexture( gl.TEXTURE1 );
  2437.            gl.bindTexture(
  2438.                gl.TEXTURE_2D,
  2439.                _self.TEX
  2440.            );
  2441.            
  2442.           //Will get error:
  2443.           //[ WebGL: INVALID_OPERATION:                ]
  2444.           //[ texParameter: no texture bound to target ]
  2445.           //If no texture is bound to active slot before doing this.
  2446.           //:SOURCE:https://stackoverflow.com/questions/42358462/no-texture-bound-to-the-unit-0
  2447.           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  2448.           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  2449.           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  2450.           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  2451.              
  2452.            //:will also throw error if no texture
  2453.            //in active texture slot:
  2454.            gl.texImage2D(
  2455.                gl.TEXTURE_2D    ,
  2456.                0                , //LEVEL
  2457.                gl.RGBA          , //internalFormat,
  2458.                _self.WID        ,
  2459.                _self.HIG        ,
  2460.                0                , //border
  2461.                gl.RGBA          , //srcFormat
  2462.                gl.UNSIGNED_BYTE , //srcType
  2463.                _self.PIX          //<--ArrayBufferView object
  2464.            );
  2465.  
  2466.            SET_ATTR_INT(
  2467.           "HAS_TEXTURE_BEEN_PUSHED_FROM_JAVASCRIPT",
  2468.           1 );
  2469.          
  2470.           //Let shader know tile-map width and height:
  2471.           SET_ATTR_INT("CMAP_WID", _self.WID);
  2472.           SET_ATTR_INT("CMAP_HIG", _self.HIG);
  2473.            
  2474.        }
  2475.    
  2476.    }
  2477.    
  2478.    TILE_MAP_HAS_BEEN_SETUP = false;
  2479.    function SETUP_TILE_MAP_DATA(){
  2480.        if(TILE_MAP_HAS_BEEN_SETUP){
  2481.            alert("[MAP_ALREADY_SETUP]");
  2482.            return;
  2483.        }
  2484.        TILE_MAP_HAS_BEEN_SETUP = true;
  2485.    
  2486.        //Decided on 128x128:
  2487.        //Because it is maximum dimensions of
  2488.        //a project I am working on.
  2489.        const WID = 128;
  2490.        const HIG = 128;
  2491.      
  2492.        //4 components/bytes in 1 ARGB pixel:
  2493.        const NUM_COM_ARGB = 4; //4;
  2494.        const ARRAY_LENGTH = WID*HIG*NUM_COM_ARGB;
  2495.        const pixel = new Uint8Array( ARRAY_LENGTH );
  2496.  
  2497.        //Create Texure slot at TEXTURE1 because
  2498.        //seems to be bug "there is no texture bound to unit 0"
  2499.        //in chrome.
  2500.        gl.activeTexture(gl.TEXTURE1);
  2501.        const texture = gl.createTexture();
  2502.        if(!texture){慌("[NOT_TEXTURE]");}
  2503.  
  2504.        //Our texture sampler needs to be bound to
  2505.        //the same texture slot. Hence the "1"
  2506.        //https://www.john-smith.me/hassles-with-array-access-in-webgl-and-a-couple-of-workarounds.html
  2507.        gl.uniform1i(
  2508.            gl.getUniformLocation(
  2509.                 program   ,
  2510.                "u_texture" //<--Sampler2D's Name.
  2511.            ),
  2512.            1  //<--Texture Slot To Bind To.
  2513.        );
  2514.      
  2515.        //Our pixel array is 4-component, so we
  2516.        //can use alignment 4. An alignment of
  2517.        //1 will also work.
  2518.        //SOURCE: https://webglfundamentals.org/webgl/lessons/webgl-data-textures.html
  2519.        const alignment = 4;
  2520.        gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);
  2521.      
  2523.      //Populate our helper container:
  2524.      //PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP//
  2525.      GLOBAL_GAC         = new GLArrayContainer();
  2526.      GLOBAL_GAC.PIX     = pixel;
  2527.      GLOBAL_GAC.TEX     = texture;      
  2528.      GLOBAL_GAC.PIX_NUM = WID*HIG;
  2529.      GLOBAL_GAC.WID     = WID;
  2530.      GLOBAL_GAC.HIG     = HIG;
  2531.      //GLOBAL_GAC.makePattern();
  2532.      GLOBAL_GAC.solidFill();
  2533.      GLOBAL_GAC.pushToGL();
  2534.      //setTimeout( 1, GLOBAL_GAC.pushToGL() );
  2535.      //PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP//  
  2536.    }
  2537.    
  2538.    function setup(){
  2539.        var frag_src = "";
  2540.        
  2541.        var frag_dom_H = document.getElementById(
  2542.            "FRAG_SHADER_HEAD"
  2543.        );
  2544.        var frag_dom_T = document.getElementById(
  2545.            "FRAG_SHADER_TAIL"
  2546.        );
  2547.        
  2548.        var DOM_R01 = document.getElementById(
  2549.            "FRAG_SHADER_TILE_R01"
  2550.        );
  2551.        
  2552.        var DOM_R02 = document.getElementById(
  2553.            "FRAG_SHADER_TILE_R02"
  2554.        );
  2555.        
  2556.        var DOM_R03 = document.getElementById(
  2557.            "FRAG_SHADER_TILE_R03"
  2558.        );
  2559.        
  2560.        
  2561.        var FRAG_SRC_HEAD = frag_dom_H.text;
  2562.        var FRAG_SRC_TAIL = frag_dom_T.text;
  2563.        var FRAG_SRC_R_01 = DOM_R01.text;
  2564.        var FRAG_SRC_R_02 = DOM_R02.text;
  2565.        var FRAG_SRC_R_03 = DOM_R03.text;
  2566.        
  2567.        var frag_src =
  2568.            FRAG_SRC_HEAD +
  2569.            
  2570.            FRAG_SRC_R_01 +
  2571.            FRAG_SRC_R_02 +
  2572.            FRAG_SRC_R_03 +
  2573.            
  2574.            FRAG_SRC_TAIL ;
  2575.        
  2576.        
  2577.        //console.log( frag_src );
  2579.        F = createShader(
  2580.            gl,gl.FRAGMENT_SHADER, frag_src
  2581.        );
  2583.        var vert_dom = document.getElementById("VERT_SHADER");
  2584.        var vert_src = vert_dom.text;
  2585.        console.log( vert_src );
  2587.        V = createShader(
  2588.            gl, gl.VERTEX_SHADER, vert_src
  2589.        );
  2591.        //**** MAKE "program" a GLOBAL VAR  ****//
  2592.        program = createProgram(gl,V,F);
  2593.        gl.useProgram( program );
  2594.        
  2595.        if(!program){ 慌("[PROGRAM_IS_NULL]");}
  2596.    }
  2597.    
  2598.    function render(){
  2599.      window.requestAnimationFrame(render,canvas);
  2600.    
  2601.      // Set clear color to black, fully opaque
  2602.      gl.clearColor(0.0, 0.0, 0.5, 1.0);
  2603.      
  2604.      // Clear the color buffer with specified clear color
  2605.      gl.clear(gl.COLOR_BUFFER_BIT);
  2606.      
  2607.      //Directly before call to gl.drawArrays:
  2608.      positionLocation = gl.getAttribLocation(program, "a_position");
  2609.      gl.enableVertexAttribArray( positionLocation );
  2610.      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  2611.      
  2612.      UPDATE_TIMER();
  2613.      
  2614.      gl.drawArrays(gl.TRIANGLES, 0, 6);
  2615.    }
  2616.    
  2617.    function createShader(gl,type,source){
  2618.        //:Error Check For Bad Inputs:
  2619.        if(!gl    ){慌("[NULL_GL]");}
  2620.        if(!type  ){慌("[NULL_TY]");}
  2621.        if(!source){慌("[NULL_SR]");}
  2622.    
  2623.        var shader = gl.createShader(type);
  2624.        gl.shaderSource(shader, source);
  2625.        gl.compileShader(shader);
  2626.        var res = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  2627.        if( res ){
  2628.            console.log("[SHADER_COMPILED!]");
  2629.            return shader;
  2630.        }
  2631.        
  2632.        console.log(gl.getShaderInfoLog(shader));
  2633.        gl.deleteShader(shader);
  2634.        慌("[FAILED_TO_COMPILE_SHADER]");
  2635.    }
  2636.    
  2637.    //:gl  : openGL context :
  2638.    //:vert: vertex shader  :
  2639.    //:frag: fragment shader:
  2640.    function createProgram(gl,vert, frag){
  2641.        var program = gl.createProgram();
  2642.        gl.attachShader(program, vert);
  2643.        gl.attachShader(program, frag);
  2644.        gl.linkProgram (program);
  2645.        var res = gl.getProgramParameter(program, gl.LINK_STATUS);
  2646.        if( res ){
  2647.            console.log("[PROGRAM_CREATED!]");
  2648.            return program;
  2649.        }
  2650.        
  2651.        console.log(gl.getProgramInfoLog(program));
  2652.        gl.deleteProgram(program);
  2653.    }
  2655. </script>
  2656. <!-- SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS -->
  2657.      
  2658. <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
  2659. </body>
  2660. </html>
  2661.  
  2662.  
  2663. <!-- ####### #EDGE_MISCALCULATIONS# #########  -->
  2664. <!--
  2665. Above text taken from my daily log (data.xml):
  2666. SPECIFICALLY ENTRY: | 09_25PM    |
  2667.                    | 2017_11_30 |
  2668.                    | ENTRY_0107 |
  2669.  
  2670.    Why the 0.5 ?
  2671.    
  2672.    ASCII_DIAGRAM[  ******************************
  2673.    Your texture coordinates go like this
  2674.  
  2675.       0    0.25  0.5   0.75       《- texture coords you're computing
  2676.       |     |     |     |    
  2677.       V     V     V     V    
  2678.       +-----+-----+-----+-----+
  2679.       |     |     |     |     |
  2680.       |     |     |     |     |   《- texels
  2681.       +-----+-----+-----+-----+
  2682.    But the texture coords you want are like this
  2683.  
  2684.         0.125 0.375 0.625 0.875  
  2685.          |     |     |     |  
  2686.          V     V     V     V  
  2687.       +-----+-----+-----+-----+
  2688.       |     |     |     |     |
  2689.       |     |     |     |     |   《- texels
  2690.       +-----+-----+-----+-----+
  2691.    The easiest fix is to add 1/2 a texel
  2692.    ]ASCII_DIAGRAM  ******************************
  2693.    
  2694.    URL[
  2695.        https://stackoverflow.com/questions/27414701/
  2696.        webgl-three-js-particles-colored-by-texture-
  2697.        flicker-erratically-while-moving/27439675#27439675
  2698.    ]URL
  2699. -->
Tags: BOMB_GAME_TUTORIAL
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!