API tools faq
paste
CODE_TOLD_FAST

GLSL/MATH/V2M.JS

CODE_TOLD_FAST
May 27th, 2020
461
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 19.48 KB | None | 0 0
raw download clone embed print report
  1.  
  2. //:==========================================================://
  3. //|AUTHOR: John Mark Isaac Madison                           |//
  4. //|EMAIL:: HeavyMetalCookies[ at ][ letterAfter_f-mail ].com |//
  5. //|THIS_FILE_ON_PASTE_BIN[ https://pastebin.com/VvTNDiyi  ]  |//
  6. //|YOUTUBE_CODE_OVERVIEW[ youtube.com/watch?v=vkkkeS4t2EU ]  |//
  7. //:==========================================================://
  8. //: GOAL/SUMMARY:                                            ://
  9. //:     1: When viewport "#2" (rec_vp2) is snapped onto      ://
  10. //:        viewport "C", the fragment shader code will       ://
  11. //:        render at a "1:1" scale with zero translation.    ://
  12. //:                                                          ://
  13. //:     2: As viewport "#2" is resized, it performs a        ://
  14. //:        sub-sample of the shader code input coordinates.  ://
  15. //:                                                          ://
  16. //:        2.1: If rec_vp2 is:                               ://
  17. //:                 A: Same size as rec_vpc                  ://
  18. //:                 B: Different location than vpc           ://
  19. //:             You have a PAN.                              ://
  20. //:                                                          ://
  21. //:        2.2: If rec_vp2 is:                               ://
  22. //:                 A: Different size than rec_vpc           ://
  23. //:                 B: Same exact centerpoint as rec_vpc     ://
  24. //:             You have a ZOOM into the CENTER.             ://
  25. //:                                                          ://
  26. //:        2.3: If rec_vp2 is:                               ://
  27. //:                 A: Different size then rec_vpc           ://
  28. //:                 B: Different centerpoint than rec_vpc    ://
  29. //:             You have a PAN + ZOOM.                       ://
  30. //:==========================================================://
  31. //|//////////////////////////////////////////////////////////|//
  32. //| GIVENS:                                                  |//
  33. //|     1: vpc is always snapped 100% to opengl              |//
  34. //|        context and thus can represent the                |//
  35. //|        gl_FragCoord set of points.                       |//
  36. //|                                                          |//
  37. //|     2: vp2 is a SOURCE viewport like vp1 (not pictured). |//
  38. //|        Except the source it samples is vpc's datapoints. |//
  39. //|                                                          |//
  40. //|        The smaller vp2 is relative to vpc, the more      |//
  41. //|        "zoomed in" you are on the gl_FragCoord(s).       |//
  42. //|                                                          |//
  43. //| SOLVE:                                                   |//
  44. //|     1: EASY: Fill vpc with grey pixels if gl_FragCoord   |//
  45. //|              is NOT within vp0.                          |//
  46. //|                                                          |//
  47. //|     2: HARD: For each pixel inside of vp0,               |//
  48. //|              map to vp2's data.                          |//
  49. //|            ( vp2's data is a sub-sample of vpc's )       |//
  50. //|            ( normalized screen coordinates.      )       |//
  51. //|                                                          |//
  52. //|                                                          |//
  53. //| SUMMARY:                                                 |//
  54. //|     INPUT: [ glFragCoord.x , glFragCoord.y ]             |//
  55. //|       OUT: [     vpc_n_o.x ,     vpc_n_o.y ]             |//
  56. //|//////////////////////////////////////////////////////////|//
  57.  
  58.         //[//////////////////////////////////////////////////]//
  59.         //[                                                  ]//
  60.         //[  DIAGRAM_NAME[ SC[ DIA_VPC_TO_VP2_NORMALIZED ] ] ]//
  61.         //[  CODE_EXAMPLE[ SC[ COD_VPC_TO_VP2_NORMALIZED ] ] ]//
  62.         //[                                                  ]//
  63.         //|                                                  |//
  64.         //|   #############################################  |//
  65.         //|   ##                                         ##  |//
  66.         //|   ##  VP2/vp2: ViewPort2: (ZOOMER_SOURCE)    ##  |//
  67.         //|   ##  VPC/vpc: ViewPortC: (CANVAS/CLIENT)    ##  |//
  68.         //|   ##  VP0/vp0: ViewPort0: (DESTINATION  )    ##  |//
  69.         //|   ##                                         ##  |//
  70.         //|   ##  vp2: 0% zoomed when covering vpc 100%. ##  |//
  71.         //|   ##  CHANGES TO VP0 POSITION:               ##  |//
  72.         //|   ##      Should not alter image in VP0.     ##  |//
  73.         //|   ##  CHANGES TO VP0     SIZE:               ##  |//
  74.         //|   ##      Should squash+stretch the image    ##  |//
  75.         //|   ##      but NOT expand or contract the     ##  |//
  76.         //|   ##      upper+lower bounds of the data     ##  |//
  77.         //|   ##      set being rendered to VP0.         ##  |//
  78.         //|   ##                                         ##  |//
  79.         //|   #############################################  |//
  80.         //[                                                  ]//
  81.         //[  DIAGRAM_NAME[ SC[ DIA_VPC_TO_VP2_NORMALIZED ] ] ]//
  82.         //[  CODE_EXAMPLE[ SC[ COD_VPC_TO_VP2_NORMALIZED ] ] ]//
  83.         //[  PASTE____BIN[ https://pastebin.com/VvTNDiyi ] ] ]//
  84.         //[                                                  ]//
  85.         //+  |<----------- EXAMPLE_SPAN==(11)----------->|  -+//
  86.         //+  |<------------- gl_FragCoord(s) ----------->|  -+//
  87.         //+  |<------------------ vpc ------------------>|  -+//
  88.         //+  |                 (rec_vpc)                 |  -+//
  89.         //+  |                                           |  -+//
  90.         //+  |   |<-------------- vp0 -------------->|   |  -+//
  91.         //+  |   |             (rec_vp0)             |   |  -+//
  92.         //+  |   |                                   |   |  -+//
  93.         //+  |   |                                   |   |  -+//
  94.         //[  +---+---=---=---=---=---=---=---=---=---+---+  -]//
  95.         //[  | 0 | 1   2   3 | 4   5 . 6 | 7 . 8 . 9 |10 |  0]//
  96.         //[  +---+---=---=---=---=---=---=---=---=---+---+  -]//
  97.         //[  | 1 |                   .   .   .   .   |   |  1]//
  98.         //[  *   *                   .   .   .   .   *   *  -]//
  99.         //[  | 2 |                   .   .   .   .   |   |  2]//
  100.         //[  *   *                   .   .   .   .   *   *  -]//
  101.         //[  | 3 |                   .   .   .   .   |   |  3]//
  102.         //[  * - *                   .   .   .   .   * - *  -]//
  103.         //[  | 4 |                   .   .   .   .   |   |  4]//
  104.         //[  *   *...................+-----------+...*...*  -]//
  105.         //[  | 5 |                   |           |   |0.5|  5]//
  106.         //[  *   *...................|           |...*...*  -]//
  107.         //[  | 6 |                   |    vp2    |   |0.6|  6]//
  108.         //[  * - *...................| (rec_vp2) |...* - *  -]//
  109.         //[  | 7 |                   |           |   |0.7|  7]//
  110.         //[  *   *...................+-----------+...*...*  -]//
  111.         //[  | 8 |                   .   .   .   .   |   |  8]//
  112.         //[  *   *                   .   .   .   .   *   *  -]//
  113.         //[  | 9 |                   .   .   .   .   |   |  9]//
  114.         //[  +---+---=---=---=---=---=---=---=---=---+---+  -]//
  115.         //[  |10 |           |       |0.6|0.7|0.8|   |   | 10]//
  116.         //[  +---+---=---=---=---=---=---=---=---=---+---+  -]//
  117.         //+      |                                   |       +//
  118.         //+      |                                   |       +//
  119.         //+      +---+---+---+---+---+---+---+---+---+       +//
  120.         //+      |0.6|   |.65|   |0.7|   |.75|   |0.8|       +//
  121.         //+      +-----------------------------------+       +//
  122.         //+      |                                   |       +//
  123.         //+      |<----------- vpc_n_o.x ----------->|       +//
  124.         //+      |( Output gl_FragCoord(s) mapped   )|       +//
  125.         //+      |( onto rec_vp0                    )|       +//
  126.         //[                                                  ]//
  127.         //[//////////////////////////////////////////////////]//
  128.  
  129.  
  130.         //: Q: WHAT IS WRONG WITH FORMULA BELOW?
  131.         //:
  132.         //: [ rec_vp0 / vp0_m_i ]TO[ rec_vp2 / vp2_m_o ]
  133.         //:--------------------------------------------------://
  134.         //:.................|<---- rec_vp0.wid - 1 ---->|
  135.         //:     vp0_m_i.x / ( rec_vp0.x_1 - rec_vp0.x_0 )
  136.         //: === vp2_m_o.x / ( rec_vp2.x_1 - rec_vp2.x_0 )
  137.         //:.................|<---- rec_vp2.wid - 1 ---->|
  138.         //:--------------------------------------------------://
  139.         //:
  140.         //:
  141.         //: A: vp0_m_i & vp2_m_0 values need to be offset
  142.         //:    so they fit within range: 0 -to- (wid-1)
  143.         //:
  144.         //:
  145.         //:--------------------------------------------------://
  146.         //:      ( vp0_m_i.x   - rec_vp0.x_0 )  <-- On__Range
  147.         //:    / ( rec_vp0.x_1 - rec_vp0.x_0 )  <-- The_Range
  148.         //:      |<---- rec_vp0.wid - 1 ---->|
  149.         //:   ===
  150.         //:      |<---- rec_vp2.wid - 1 ---->|
  151.         //:      ( vp2_m_o.x   - rec_vp2.x_0 )  <-- On__Range
  152.         //:    / ( rec_vp2.x_1 - rec_vp2.x_0 )  <-- The_Range
  153.         //:--------------------------------------------------://
  154.         //:                                                  ://
  155.         //: Q: Solve formula above for vp2_m_0.x             ://
  156.         //: A: Answer below:                                 ://
  157.         //:                                                  ://
  158.         //: vp2_m_o.x =( ( vp0_m_i.x   - rec_vp0.x_0 )       ://
  159.         //:            / ( rec_vp0.x_1 - rec_vp0.x_0 )       ://
  160.         //:            * ( rec_vp2.x_1 - rec_vp2.x_0 )       ://
  161.         //:            ) + rec_vp2.x_0 ;;;;;;;;;;;;;;;       ://
  162.         //:                                                  ://
  163.         //: Lets re-name:                                    ://
  164.         //:     [vp2] to [OUT] for Output.                   ://
  165.         //:     [vp0] to [INN] for Input .                   ://
  166.         //:                                                  ://
  167.         //: OUT_m_o.x =( ( INN_m_i.x   - rec_INN.x_0 )       ://
  168.         //:            / ( rec_INN.x_1 - rec_INN.x_0 )       ://
  169.         //:            * ( rec_OUT.x_1 - rec_OUT.x_0 )       ://
  170.         //:            ) + rec_OUT.x_0 ;;;;;;;;;;;;;;;       ://
  171.         //:                                                  ://
  172.         //: When converting coordinate from 1 viewport       ://
  173.         //: to another, we can replace "INN" with the        ://
  174.         //: input viewport name and "OUT" with the output    ://
  175.         //: viewport name. The viewports in this example     ://
  176.         //: are named:                                       ://
  177.         //:                                                  ://
  178.         //:         [ vpc , vp0 , vp2 ]                      ://
  179.         //:                                                  ://
  180.         //:--------------------------------------------------://
  181.  
  182.     document.title = ( "[V2M.JS]" );
  183.  
  184.     //:Fake cast because I will need it in GLSL code.
  185.     function float( any_num ){
  186.         return(     any_num );
  187.     };;
  188.  
  189.     function DEBUG_BOUNDS_CHECK(
  190.         cxy_inn
  191.     ,   rec_inn //:AKA[ rec_bou / bounds_rectangle ]
  192.     ){
  193.         if( cxy_inn.x >= rec_inn.x_0 //:LEF : GTE
  194.         &&  cxy_inn.x <= rec_inn.x_1 //:RIG : LTE
  195.         &&  cxy_inn.y >= rec_inn.y_0 //:TOP : GTE
  196.         &&  cxy_inn.y <= rec_inn.y_1 //:BOT : LTE
  197.         ){      
  198.             //:Okay. Do nothing.
  199.         }else{
  200.             var err_msg =( "[OUT_OF_BOUNDS]" );
  201.             console.log( err_msg );
  202.             throw(       err_msg );
  203.         };;
  204.     };;
  205.  
  206.     var gl_FragCoord = Object.seal({ x: 0 , y: 0});
  207.     var EXAMPLE_SPAN = ( 11 );
  208.  
  209.     //:Coordinates:
  210.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  211.     var vp0_m_o = Object.seal({ x: 0 , y: 0});
  212.     var vp0_m_i = Object.seal({ x: 0 , y: 0});
  213.     var vp2_m_o = Object.seal({ x: 0 , y: 0});
  214.     var vp2_m_i = Object.seal({ x: 0 , y: 0});
  215.     var vpc_m_o = Object.seal({ x: 0 , y: 0});
  216.     var vpc_m_i = Object.seal({ x: 0 , y: 0});
  217.     var vpc_mi2 = Object.seal({ x: 0 , y: 0});
  218.  
  219.     var vpc_n_o = Object.seal({ x: 0 , y: 0});
  220.     var vpc_n_i = Object.seal({ x: 0 , y: 0});
  221.                                            
  222.     //: tbs_noc: My "NOrmalized Coordinate" to execute
  223.     //:          GLSL shader code on. AKA: transformed
  224.     //:          gl_FragCoord.
  225.     var tbs_noc = Object.seal({ x: 0 , y: 0});
  226.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  227.  
  228.     //:R:Rectangles:
  229.     //:RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR://
  230.     var rec_vpc =(Object.freeze({
  231.          x_0 :  0  //:TOP_LEF: (inclusive)
  232.         ,y_0 :  0  //:TOP_LEF: (inclusive)
  233.  
  234.         ,x_1 : 10  //:BOT_RIG: (inclusive)
  235.         ,y_1 : 10  //:BOT_RIG: (inclusive)
  236.     }));;
  237.     var rec_vp0 = (Object.freeze({
  238.          x_0 : 1  //:TOP_LEF: (inclusive)
  239.         ,y_0 : 1  //:TOP_LEF: (inclusive)
  240.                
  241.         ,x_1 : 9  //:BOT_RIG: (inclusive)
  242.         ,y_1 : 9  //:BOT_RIG: (inclusive)
  243.     }));;
  244.     var rec_vp2 = (Object.freeze({
  245.          x_0 : 6  //:TOP_LEF: (inclusive)
  246.         ,y_0 : 5  //:TOP_LEF: (inclusive)
  247.                
  248.         ,x_1 : 8  //:BOT_RIG: (inclusive)
  249.         ,y_1 : 7  //:BOT_RIG: (inclusive)
  250.     }));;
  251.     //:RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR://
  252.  
  253.     for( gl_FragCoord.y = 0
  254.         ;gl_FragCoord.y < EXAMPLE_SPAN
  255.         ;gl_FragCoord.y++
  256.     ){
  257.     for( gl_FragCoord.x = 0
  258.         ;gl_FragCoord.x < EXAMPLE_SPAN
  259.         ;gl_FragCoord.x++
  260.     ){
  261.  
  262.         //:vpc is always snapped to entire [ client/canvas ]
  263.         //:so we can make this assumption:
  264.         vpc_m_i.x = float( gl_FragCoord.x );//:Maverick_Input:X
  265.         vpc_m_i.y = float( gl_FragCoord.y );//:Maverick_Input:Y
  266.  
  267.  
  268.         //:IS[ vpc_m_i ]OUTSIDE_OF[ rec_vp0 ]? SC[ PT_IN_VP ]://
  269.         if( vpc_m_i.x < rec_vp0.x_0 //:LEF ( -X- )[ LT ]:////://
  270.         ||  vpc_m_i.x > rec_vp0.x_1 //:RIG ( +X+ )[ GT ]:////://
  271.         ||  vpc_m_i.y < rec_vp0.y_0 //:TOP ( -Y- )[ LT ]:////://
  272.         ||  vpc_m_i.y > rec_vp0.y_1 //:BOT ( +Y+ )[ GT ]:////://
  273.         ){ //:NOT:inside_the_rectangle[ rec_vp0 ]:////://////://
  274.         //://////:OUT_OF_BOUNDS_OF_REC[ rec_vp0 ]:////://////://
  275.        
  276.             //:HERE: Make output pixel color some type of
  277.             //:      solid color that will letterbox/outline
  278.             //:      rec_vp0 when we draw all pixels on rec_vpc.
  279.        
  280.         }else{ //:INSIDE_THE_RECTANGLE[ rec_vp0 ]:////://////://
  281.  
  282.             //|¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯|//
  283.             //|VARIABLES_BELOW:                              |//
  284.             //|- - - - - - - - - - - -- - - - - - - - - - - -|//
  285.             //| vp0_m_o : Viewport[ 0 ][ Maverik ][ Output ] |//
  286.             //| vp0_m_i : Viewport[ 0 ][ Maverik ][ Input  ] |//
  287.             //| vp2_m_o : Viewport[ 2 ][ Maverik ][ Output ] |//
  288.             //| vp2_m_i : Viewport[ 2 ][ Maverik ][ Input  ] |//
  289.             //| vpc_m_o : Viewport[ c ][ Maverik ][ Output ] |//
  290.             //| vpc_m_i : Viewport[ c ][ Maverik ][ Input  ] |//
  291.             //| vpc_n_o : Viewport[ c ][ Normali ][ Output ] |//
  292.             //| vpc_n_i : Viewport[ c ][ Normali ][ Input  ] |//
  293.             //|__ __ __ __ __ __ __ ____ __ __ __ __ __ __ __|//
  294.  
  295.             //|//////////////////////////////////////////////|//
  296.             //| [ rec_vpc / vpc_m_i ]TO[ rec_vp0 / vp0_m_i ] |//
  297.             //[>>>>> "  Because rec_vp0 is sub region  "<<<<<]//
  298.             //[>>>>> "  of rec_vpc all we need is a    "<<<<<]//
  299.             //[>>>>> "  simple assignment.             "<<<<<]//
  300.             vp0_m_o.x = vpc_m_i.x;  
  301.             vp0_m_o.y = vpc_m_i.y;  
  302.             //|//////////////////////////////////////////////|//
  303.  
  304.             //:Output_Becomes_Input
  305.             vp0_m_i.x = vp0_m_o.x;  
  306.             vp0_m_i.y = vp0_m_o.y;  
  307.  
  308.             //:----------------------------------------------://
  309.             //: [ rec_vp0 / vp0_m_i ]TO[ rec_vp2 / vp2_m_o ]
  310.             //: INN: vp0 ( rec_vp0 & vp0_m_i )
  311.             //: OUT: vp2 ( rec_vp2 & vp2_m_o )
  312.             //:----------------------------------------------://
  313.             vp2_m_o.x =( ( vp0_m_i.x   - rec_vp0.x_0 )    
  314.                        / ( rec_vp0.x_1 - rec_vp0.x_0 )        
  315.                        * ( rec_vp2.x_1 - rec_vp2.x_0 )        
  316.                        ) + rec_vp2.x_0 ;;;;;;;;;;;;;;;  
  317.             vp2_m_o.y =( ( vp0_m_i.y   - rec_vp0.y_0 )    
  318.                        / ( rec_vp0.y_1 - rec_vp0.y_0 )        
  319.                        * ( rec_vp2.y_1 - rec_vp2.y_0 )        
  320.                        ) + rec_vp2.y_0 ;;;;;;;;;;;;;;;      
  321.             //:----------------------------------------------://
  322.             DEBUG_BOUNDS_CHECK( vp2_m_o, rec_vp2 );
  323.  
  324.             //: Output_Becomes_Input:
  325.             vp2_m_i.x = vp2_m_o.x;
  326.             vp2_m_i.y = vp2_m_o.y;
  327.  
  328.             //:----------------------------------------------://
  329.             //: YES. we are using rec_vpc AGAIN!
  330.             //: The formula is just an assignment, because
  331.             //: vp2 is a sub-sample of vpc.
  332.             //:
  333.             //: [ rec_vp2 / vp2_m_i ]TO[ rec_vpc / vpc_m_o ]
  334.             //: INN: vp2 ( rec_vp2 & vp2_m_i )
  335.             //: OUT: vpc ( rec_vpc / vpc_m_o )
  336.             //:----------------------------------------------://
  337.             vpc_m_o.x =( vp2_m_i.x );    
  338.             vpc_m_o.y =( vp2_m_i.y );  
  339.             //:----------------------------------------------://
  340.             DEBUG_BOUNDS_CHECK( vpc_m_o, rec_vpc );
  341.  
  342.             //: Output_Becomes_Input:
  343.             //: We already used[ vpc_m_i ]so we will call
  344.             //: this variable  [ vpc_mi2 ]to avoid problems.
  345.             vpc_mi2.x = vpc_m_o.x;
  346.             vpc_mi2.y = vpc_m_o.y;
  347.  
  348.             //: [ rec_vpc / vpc_m_i ]TO[ rec_vpc / vpc_n_o ]
  349.             //: Formula is simpler this time because we only
  350.             //: want the percentage_along_path on the sides
  351.             //: of rec_vpc.
  352.             //:----------------------------------------------://
  353.             vpc_n_o.x =(( vpc_mi2.x  - rec_vpc.x_0 )
  354.                        /( rec_vpc.x_1- rec_vpc.x_0 ));;
  355.             vpc_n_o.y =(( vpc_mi2.y  - rec_vpc.y_0 )
  356.                        /( rec_vpc.y_1- rec_vpc.y_0 ));;
  357.             //:----------------------------------------------://
  358.  
  359.             //: Output_Becomes_Input:
  360.             vpc_n_i.x = vpc_n_o.x;
  361.             vpc_n_i.y = vpc_n_o.y;
  362.        
  363.             //:These normalized coordinates represent
  364.             //:rec_vpc coordinates after rec_vp2 has
  365.             //:ZOOMED and PANNED over rec_vpc.
  366.             tbs_noc.x = vpc_n_i.x;
  367.             tbs_noc.y = vpc_n_i.y;
  368.  
  369.             //:L:Log:Log_The_Results:(BELOW):----------------://
  370.             //:LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL://
  371.             var x = tbs_noc.x;
  372.             var y = tbs_noc.y;
  373.             console.log("[x,y]:[" + x +"]["+ y + "]");
  374.  
  375.             //:If all the math is correct, the coordinates
  376.             //:should be within the bounds of the diagram.
  377.             if( tbs_noc.x < 0.6 || tbs_noc.x > 0.8
  378.             ||  tbs_noc.y < 0.5 || tbs_noc.y > 0.7
  379.             ){
  380.  
  381.                 var err_msg =("[YOUR_MATH_IS_WRONG]");
  382.                 console.log( err_msg );
  383.                 throw(       err_msg );
  384.  
  385.             };;
  386.             //:LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL://
  387.        
  388.         };; //:///////////////////////////////:SC[ PT_IN_VP ]://
  389.  
  390.     };;};;//:NEXT[ frag_coord ]
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!