API tools faq
paste
Advertisement
CODE_TOLD_FAST

JS/DAS_BOR.HTM

CODE_TOLD_FAST
May 12th, 2020
431
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 31.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML ><html lang="en"><head><title>
  2.  
  3.     DAS_BOR
  4.  
  5. </title></head><body></body><script> //://///////////////////://
  6. //://////////////////////////////////////////////////////////://
  7.  
  8.     //:GW: Global_Whatever:----------------------------------://
  9.     //:GWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGW:SC[JSGW_VARS]://
  10.  
  11.     //:Containers organized in initialization order.
  12.     //:GLO_DAT: DATA
  13.     //:     Primitive types and structs.
  14.     //:    ( struct ~=~ class with no methods )
  15.     //:
  16.     //:GLO_FUN: FUNCTIONS:
  17.     //:     Functions in the procedural sense. They are
  18.     //:     loose functions that are NOT part of a class.
  19.     //:     MEMBER METHODS DO NOT BELONG HERE.
  20.     //:     If function put into GLO_FUN is namespaced,
  21.     //:     the namespace should be accomplished using
  22.     //:     "plain C" style syntax.
  23.     //:
  24.     //:         YES:  MYNAMESPACE_FunctionName
  25.     //:       WRONG:  MYNAMESPACE.FunctionName
  26.     //:
  27.     //:GLO_CLA: CLASSES:
  28.     //:     Previously named "GLO_OBJ" but the word "object"
  29.     //:     is much to vauge. Any data structure that
  30.     //:     combines both DATA and FUNCTIONS.
  31.     //:GWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGW:SC[JSGW_VARS]://
  32.  
  33.     var GLO_DAT = null; //:GLOBAL_DATA
  34.     var GLO_FUN = null; //:GLOBAL_FUNCTIONS
  35.     var GLO_CLA = null; //:GLOBAL_CLASSES (AKA:GLO_OBJ)
  36.  
  37.     //:GWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGW:SC[JSGW_VARS]://
  38.  
  39. //://////////////////////////////////////////////////////////://
  40.  
  41. //: Main function to execute once all script is loaded:
  42. function main(){
  43. "use strict"
  44.  
  45.     //:IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII:SC[ JSGW_INIT ]://
  46.     GLO_DAT=( INI_GLO_DAT( ) ); //:DATA
  47.     Object.seal(  GLO_DAT    ); //:DATA
  48.  
  49.     GLO_FUN=( INI_GLO_FUN( ) ); //:FUNCTIONS
  50.     Object.seal(  GLO_FUN    ); //:FUNCTIONS
  51.  
  52.     GLO_CLA=( INI_GLO_CLA( ) ); //:CLASSES/OBJECTS:AKA:GLO_OBJ
  53.     Object.seal(  GLO_CLA    ); //:CLASSES/OBJECTS:AKA:GLO_OBJ
  54.     //:IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII:SC[ JSGW_INIT ]://
  55.  
  56.     //:******************************************************://
  57.     //:******************************************************://
  58.     //:******************************************************://
  59.     //:******************************************************://
  60.  
  61.     //[ BUF_VEW --> UIN_ADA, upgrades:                       ]//
  62.     //[ 1:When pressing arrow keys, the camera will move     ]//
  63.     //[   exactly one camera in the direction of arrow press.]//
  64.     //[ 2:Pressing "+" or "-" keys will zoom in or out       ]//
  65.     //[   by doubling or halving off-screen viewport size.   ]//
  66.                                                            
  67.     //:GLO_FUN.DoMapping_vp1_TO_vp0();
  68.     GLO_CLA.vp1_sna.ForceUpdate();
  69.  
  70.     //:******************************************************://
  71.     //:******************************************************://
  72.     //:******************************************************://
  73.     //:******************************************************://
  74. };;
  75.  
  76. //://////////////////////////////////////////////////////////://
  77.  
  78. //:GIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGI:SC[JSGW_BODY]://
  79. //:                                                          ://
  80. //:     ORDER:                                               ://
  81. //:         1. INI_GLO_DAT  ( DATA / PRIMITIVES / STRUCTS )  ://
  82. //:         2. INI_GLO_FUN  ( FUNCTIONS / PROCEDURES      )  ://
  83. //:         3. INI_GLO_CLA  ( CLASSES / OBJECTS           )  ://
  84. //:                                                          ://
  85. //:GIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGI:SC[JSGW_BODY]://
  86.  
  87.     //://////////////////////////////////////////////////////://
  88.     function INI_GLO_DAT( ){     //://///////////////////////://
  89.     "use strict"                 //://///////////////////////://
  90.     //://////////////////////////////////////////////////////://
  91.  
  92.         var til_map=( CreateTileMap(512) );
  93.  
  94.         var ini_til_wid=( til_map.map_wid );
  95.         var ini_til_hig=( til_map.map_hig );
  96.  
  97.         var ini_can_wid = 640 ; //:ini_wid:of:Canvas
  98.         var ini_can_hig = 640 ; //:ini_hig:of:Canvas
  99.  
  100.         //: [0]: INPUT VIEWPORT:
  101.         var rec_vp0 ={
  102.             x_0 :      0      + 32
  103.         ,   y_0 :      0      + 32
  104.         ,   x_1 : ini_can_wid - 32
  105.         ,   y_1 : ini_can_hig - 32
  106.         };; Object.seal( rec_vp0 );
  107.        
  108.         //: [1]: INPUT VIEWPORT:
  109.         var rec_vp1 ={
  110.             x_0 :      0      + 64
  111.         ,   y_0 :      0      + 64
  112.         ,   x_1 : ini_til_wid - 64
  113.         ,   y_1 : ini_til_hig - 64
  114.         };;Object.seal( rec_vp1 );
  115.  
  116.         var GLO_DAT={
  117.             til_map : til_map
  118.         ,   rec_vp0 : rec_vp0
  119.         ,   rec_vp1 : rec_vp1
  120.  
  121.         ,   ini_can_wid : ini_can_wid //:initial_canvas_wid
  122.         ,   ini_can_hig : ini_can_hig //:initial_canvas_hig
  123.  
  124.         ,   ini_til_wid : ini_til_wid //:initial_tilemap_wid
  125.         ,   ini_til_hig : ini_til_hig //:initial_tilemap_hig
  126.  
  127.         ,   glo_eve     : NEW_GlobalEventStruct( )
  128.         };;
  129.  
  130.         Object.seal( GLO_DAT );
  131.         return(      GLO_DAT );
  132.  
  133.     //://////////////////////////////////////////////////////://
  134.     };;function INI_GLO_FUN( ){  //://///////////////////////://
  135.     "use strict"                 //://///////////////////////://
  136.     //://////////////////////////////////////////////////////://
  137.  
  138.         var GLO_FUN ={ //:GLO_FUN:GLObal_FUNctions (container )
  139.  
  140.             //::::::::vp1_TO_vp0::::::::::::::::::vp1_TO_vp0
  141.             DoMapping_vp1_TO_vp0 : SOTM_DoMapping_vp1_TO_vp0
  142.         };;
  143.  
  144.         Object.seal( GLO_FUN );
  145.         return(      GLO_FUN );
  146.  
  147.     //://////////////////////////////////////////////////////://
  148.     };;function INI_GLO_CLA( ){  //://///////////////////////://
  149.     "use strict"                 //://///////////////////////://
  150.     //://////////////////////////////////////////////////////://
  151.  
  152.         //: Create a [ can / canvas ]:
  153.         var can = attachCanvasToDom(
  154.             GLO_DAT.ini_can_wid
  155.         ,   GLO_DAT.ini_can_hig
  156.         );;
  157.  
  158.         var GLO_CLA={
  159.             uin_ada : NEW_UserInputAdapterSingleton( can )
  160.         ,   can_ada : NEW_CanvasAdapter(             can )
  161.         ,   vp1_sna : NEW_ViewportOneSnapper( )
  162.         };;
  163.  
  164.         //: can_ada: Has pixel putting and getting functions:
  165.  
  166.         Object.seal( GLO_CLA );
  167.         return(      GLO_CLA );
  168.  
  169.     };; //://////////////////////////////////////////////////://
  170.     //://////////////////////////////////////////////////////://
  171.  
  172. //:GIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGI:SC[JSGW_BODY]://
  173. //:GI:Global_Initialization:(ABOVE):-------------------------://
  174.  
  175. //://////////////////////////////////////////////////////////://
  176.  
  177. function NEW_ViewportOneSnapper( ){ //:GLO_CLA.vp1_sna
  178. "use strict"
  179.     var vp1_sna =( new ViewportOneSnapper( ) );
  180.     Object.seal( vp1_sna );
  181.     return(      vp1_sna );
  182. };;
  183. function ViewportOneSnapper( ){ //: vp1_sna
  184. "use strict"
  185.  
  186.     //:V:Visible (Exported/Public) Functions:
  187.     //:VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV://
  188.  
  189.         this.ReadEvent   = ( _ReadEvent   );
  190.         this.ForceUpdate = ( _ForceUpdate );
  191.  
  192.     //:VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV://
  193.     //:H:Hidden_Variables:
  194.     //:HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH://
  195.     var _ = {};
  196.  
  197.         _.til_exp = 7; //:Tile_Exponent/ViewportSize
  198.         _.t_x     = 1; //:Tile_X:Coordinate_Of_VP1_Position
  199.         _.t_y     = 1; //:Tile_Y:Coordinate_Of_VP1_Position
  200.  
  201.     Object.seal( _ );
  202.     //:HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH://
  203.    
  204.     function _UpdateGraphics( ){
  205.         console.log("[TODO:_UpdateGraphics]");
  206.  
  207.         GLO_FUN.DoMapping_vp1_TO_vp0();
  208.     };;
  209.     function _UpdateCoordinates_VP1( ){
  210.  
  211.         var map_wid = GLO_DAT.til_map.map_wid ;  //:pix_wid
  212.         var map_hig = GLO_DAT.til_map.map_hig ;  //:pix_hig
  213.         if( map_wid != map_hig ){
  214.             throw("[DesignedForPerfectlySquareTileMaps]");
  215.         };;
  216.         var map_san = ( map_wid | map_hig );
  217.  
  218.         var max_exp = ( Math.log2( map_san ) );
  219.         if( _.til_exp <    0    ){ _.til_exp =    0   ; };
  220.         if( _.til_exp > max_exp ){ _.til_exp = max_exp; };
  221.  
  222.         var til_san=( Math.pow( 2, _.til_exp ) );//:pix_san
  223.  
  224.         //://////////////////////////////////////////////////://
  225.         //:How big is the tilemap when measured in terms
  226.         //:of cameras stacked ajacently next to each other
  227.         //:until they fill entire til_map 100% without
  228.         //:any overlap.
  229.         //:SUMMARY:
  230.         //:     How big is the grid in camera_tiles.
  231.         //:     ( camera_tiles === til_san )
  232.         var gri_wid = map_wid / til_san ; //:grid_wid
  233.         var gri_hig = map_hig / til_san ; //:grid_hig
  234.         //://////////////////////////////////////////////////://
  235.  
  236.         var m_x     = ( gri_wid - 1 ); //:max_index:t_x
  237.         var m_y     = ( gri_hig - 1 ); //:max_index:t_y
  238.         if( _.t_x <  0 ){ _.t_x = 0; }; //:LOWER_BOUND : t_x
  239.         if( _.t_y <  0 ){ _.t_y = 0; }; //:LOWER_BOUND : t_y
  240.         if( _.t_x > m_x){ _.t_x =m_x;};
  241.         if( _.t_y > m_y){ _.t_y =m_y;};
  242.  
  243.         var rec_vp1 = GLO_DAT.rec_vp1;
  244.  
  245.         var x_0 = _.t_x * til_san;
  246.         var y_0 = _.t_y * til_san;
  247.  
  248.         GLO_DAT.rec_vp1.x_0 = x_0;
  249.         GLO_DAT.rec_vp1.y_0 = y_0;
  250.  
  251.         GLO_DAT.rec_vp1.x_1 = ( x_0 + til_san - 1 );
  252.         GLO_DAT.rec_vp1.y_1 = ( y_0 + til_san - 1 );
  253.        
  254.     };;
  255.     function _ReadEvent( glo_eve ){
  256.  
  257.         var key = glo_eve.key;
  258.         var val =( 0 - 666 );
  259.  
  260.         if( 0
  261.         || "ARR_UPP" == key
  262.         || "ARR_DOW" == key
  263.         || "ARR_LEF" == key
  264.         || "ARR_RIG" == key
  265.         ){
  266.             if( key == "ARR_UPP" ){ _SnapMoveVP1_UPP( ); }else
  267.             if( key == "ARR_DOW" ){ _SnapMoveVP1_DOW( ); }else
  268.             if( key == "ARR_LEF" ){ _SnapMoveVP1_LEF( ); }else
  269.             if( key == "ARR_RIG" ){ _SnapMoveVP1_RIG( ); }else
  270.             {
  271.                 //:EDCL:Expected_Dead_Code_Line:
  272.                 throw("[EDCL:EXPECTED_ONE_OF_FOUR_KEYS_ABOVE]");
  273.             };;
  274.  
  275.             _Update();
  276.         };;
  277.         if( 0
  278.         || "+" == key
  279.         || "=" == key
  280.         || "-" == key
  281.         || "_" == key
  282.         ){
  283.             if( "+"==key || "="==key ){
  284.  
  285.                 //:ZOOM_IN
  286.                 _.til_exp =( _.til_exp - 1 );
  287.  
  288.             };;
  289.             if( "-"==key || "_"==key ){
  290.  
  291.                 //:ZOOM_OUT:
  292.                 _.til_exp =( _.til_exp + 1 );
  293.             };;
  294.  
  295.             _Update();
  296.         };;
  297.     };;
  298.  
  299.  
  300.  
  301.     function _Update(){
  302.         _UpdateCoordinates_VP1();
  303.         _UpdateGraphics();
  304.     };;
  305.     function _ForceUpdate( ){
  306.         _Update();
  307.     };;
  308.  
  309.  
  310.  
  311.     function _SnapMoveVP1_UPP( ){
  312.         _.t_y =( _.t_y - 1 );
  313.         console.log("_SnapMoveVP1_UPP");
  314.     };;
  315.     function _SnapMoveVP1_DOW( ){
  316.         _.t_y =( _.t_y + 1 );
  317.         console.log("_SnapMoveVP1_DOW");
  318.     };;
  319.     function _SnapMoveVP1_LEF( ){
  320.         _.t_x =( _.t_x - 1 );
  321.         console.log("_SnapMoveVP1_LEF");
  322.     };;
  323.     function _SnapMoveVP1_RIG( ){
  324.         _.t_x =( _.t_x + 1 );
  325.         console.log("_SnapMoveVP1_RIG");
  326.     };;
  327.  
  328. };;
  329. //://////////////////////////////////////////////////////////://
  330.  
  331. function NEW_UserInputAdapterSingleton( can /**canvas**/ ){
  332. "use strict"
  333.     var uin_ada=( new UserInputAdapterSingleton( can ) );
  334.     Object.seal( uin_ada );
  335.     return(      uin_ada );
  336. };;
  337. function UserInputAdapterSingleton(
  338.     can /** html5_canvas **/
  339. ){
  340. "use strict"
  341.     //:Private Variables:
  342.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  343.  
  344.     var _ = {};
  345.         _.can = null;
  346.  
  347.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  348.  
  349.     function _Constructor( can ){
  350.         if(!can){throw("[ERR:2020_05_08:0303PM]");};
  351.         _.can = can;
  352.  
  353.         _.can.addEventListener(
  354.             "click"  //:<------------ TypeOfEventAsString
  355.         ,  _NativeClickEventHandler //:Callback_Function
  356.         );;
  357.  
  358.         document.addEventListener(
  359.             "keydown"  //:<----------- TypeOfEventAsString
  360.         ,  _NativeKeyboardEventHandler //:Callback_Function
  361.         );;
  362.  
  363.     };;
  364.     function _NativeKeyboardEventHandler( nat_eve ){
  365.         var glo_eve = GLO_DAT.glo_eve;
  366.         //://////////////////////////////////////////////////://
  367.    
  368.             //:Store keyboard key that was pressed:
  369.             //://////////////////////////////////////////////://
  370.             var key = nat_eve.key.toUpperCase( );
  371.             if( "ARROWLEFT"  == key ){ key = "ARR_LEF"; };
  372.             if( "ARROWRIGHT" == key ){ key = "ARR_RIG"; };
  373.             if( "ARROWUP"    == key ){ key = "ARR_UPP"; };
  374.             if( "ARROWDOWN"  == key ){ key = "ARR_DOW"; };
  375.             glo_eve.key      =  key;
  376.             //://////////////////////////////////////////////://
  377.  
  378.             GLO_CLA.vp1_sna.ReadEvent( glo_eve );
  379.  
  380.             console.log( glo_eve );
  381.  
  382.         //://////////////////////////////////////////////////://
  383.     };;
  384.     function _NativeClickEventHandler( nat_eve ){
  385.  
  386.         var glo_eve = GLO_DAT.glo_eve;
  387.         //://////////////////////////////////////////////////://
  388.  
  389.             var rec  =( _.can.getBoundingClientRect() );
  390.             var CAN_X=( nat_eve.clientX - rec.left   );
  391.             var CAN_Y=( nat_eve.clientY - rec.top    );
  392.  
  393.             glo_eve.c_x=( CAN_X );  //:Click_X
  394.             glo_eve.c_y=( CAN_Y );  //:Click_Y
  395.  
  396.         //://////////////////////////////////////////////////://
  397.  
  398.         console.log("[CLICKITY_CLICK]");
  399.  
  400.     };;
  401.     _Constructor( can );
  402. };;
  403. //://////////////////////////////////////////////////////////://
  404.  
  405. function NEW_GlobalEventStruct( /** void **/ ){
  406. "use strict"
  407.     var glo_eve ={
  408.  
  409.         TYP : "glo_eve"
  410.  
  411.         //: sub_typ : "mouse_event" or "keyboard_event" ?
  412.  
  413.         //:KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK://
  414.     ,   key : "" //:What key was pressed?
  415.     ,   k_d :  0 //:IsKeyCurrentlyDown?
  416.     ,   k_u :  0 //:IsKeyCurrentlyUp?
  417.         //:KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK://
  418.  
  419.         //:M:Mouse Event Stuff:
  420.         //:MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM://
  421.  
  422.     ,   m_x : 0  //:Mouse x
  423.     ,   m_y : 0  //:Mouse y
  424.                
  425.     ,   c_x : 0  //:Mouse CLICK: x
  426.     ,   c_y : 0  //:Mouse CLICK: y
  427.                
  428.     ,   u_x : 0  //:Mouse UP ( u_x == "Up X" )
  429.     ,   u_y : 0  //:Mouse UP ( u_y == "Up Y" )
  430.                
  431.     ,   d_x : 0  //:Mouse DOWN
  432.     ,   d_y : 0  //:Mouse DOWN
  433.  
  434.         //:If both are set or unset,
  435.         //:that is an error:
  436.     ,   m_d : 0  //:IsMouseCurrentlyDown?
  437.     ,   m_u : 0  //:IsMouseCurrentlyUp?
  438.  
  439.         //:MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM://
  440.  
  441.     };;Object.seal( glo_eve );
  442.  
  443.     return( glo_eve );
  444. };;
  445. //://////////////////////////////////////////////////////////://
  446.    
  447. function CreateTileMap( map_san /** span==wid==hig **/ ){
  448. "use strict"
  449.     var til_map={ /** map_dat **/
  450.  
  451.         map_u8a : null
  452.     ,   map_wid : map_san
  453.     ,   map_hig : map_san
  454.     ,   map_com :  4 /**NumberOfComponentsPerPixel:ARGB**/
  455.  
  456.     };;
  457.     Object.seal( til_map );
  458.  
  459.     var map_len=( 1
  460.     *   til_map.map_wid
  461.     *   til_map.map_hig
  462.     *   til_map.map_com
  463.     );;
  464.  
  465.     til_map.map_u8a= new Uint8Array( map_len );
  466.     FillTilemapWithTestPattern( til_map );
  467.  
  468.     return( til_map );
  469. };;
  470. //://////////////////////////////////////////////////////////://
  471.  
  472.     //:   GLO_FUN.DoMapping_vp1_TO_vp0();
  473.     function SOTM_DoMapping_vp1_TO_vp0( ){
  474.     "use strict"
  475.         var til_map =  GLO_DAT.til_map;
  476.         var can_ada =( GLO_CLA.can_ada = GLO_CLA.can_ada );
  477.  
  478.         var rec_src = GLO_DAT.rec_vp1; //: [vp1|vp2|vp3]
  479.         var rec_dst = GLO_DAT.rec_vp0;
  480.         DoMapping(
  481.             can_ada //: <--------- rec_dst puts  to   here.
  482.         ,   til_map //: <--------- rec_src takes from here.
  483.         ,   rec_src //:source______rectangle
  484.         ,   rec_dst //:destination_rectangle
  485.         );;
  486.     };;
  487. //://////////////////////////////////////////////////////////://
  488.  
  489.     //:Read data off of til_map using rec_dst
  490.     //:and then write to canvas_adapter using rec_src.
  491.     function DoMapping(
  492.         canvas_adapter
  493.     ,   til_map
  494.     ,   rec_src //:source______rectangle
  495.     ,   rec_dst //:destination_rectangle
  496.     ){
  497.         "use strict"
  498.  
  499.         //://////////////////////////////////////////////////://
  500.         if(!canvas_adapter){ throw("[2020_05_07:300PM:A]"); };
  501.         if(!til_map       ){ throw("[2020_05_07:300PM:B]"); };
  502.         if(!rec_src       ){ throw("[2020_05_07:300PM:C]"); };
  503.         if(!rec_dst       ){ throw("[2020_05_07:300PM:D]"); };
  504.         if( rec_src === rec_dst ){
  505.             throw("[Rectangle_Objects_Are_Identical]");
  506.         };;
  507.         //://////////////////////////////////////////////////://
  508.  
  509.         var rgb_black=[0,0,0,255];
  510.         var rgb_grey =[128,128,128,255];
  511.         var rgb_light_grey=[ 230,230,230,255 ];
  512.         var rgb=[1,2,3,4];//:rgba
  513.  
  514.         var rgb_ref=null;
  515.  
  516.         var loc={}; //:loc == local coordinates | values.
  517.             loc.s_x = 0;
  518.             loc.s_y = 0;
  519.         Object.seal( loc );
  520.  
  521.         //:SOURCE:
  522.         var sx0 = rec_src.x_0; //: rec_vp1
  523.         var sx1 = rec_src.x_1; //: rec_vp1
  524.         var sy0 = rec_src.y_0; //: rec_vp1
  525.         var sy1 = rec_src.y_1; //: rec_vp1
  526.  
  527.         //:DEST:
  528.         var dx0 = rec_dst.x_0; //: rec_vp0
  529.         var dx1 = rec_dst.x_1; //: rec_vp0
  530.         var dy0 = rec_dst.y_0; //: rec_vp0
  531.         var dy1 = rec_dst.y_1; //: rec_vp0
  532.  
  533.         var vp0_wid = (dx1-dx0+1); //:DESTINATION:WID
  534.         var vp0_hig = (dy1-dy0+1); //:DESTINATION:HIG
  535.                    
  536.  
  537.         //:VN:Viewport1(wid/hig)_and_N_(X|Y)_Values:---------://
  538.         //:VNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVN://
  539.         //:This equality is only true if ONE pixel on the
  540.         //:source viewport (rec_vp1) is used to encode
  541.         //:a tile value. For example, if a cluster of 4
  542.         //:pixels were used to encode a tile value,
  543.         //:then:  n_x != vp1_wid
  544.         //:       n_y != vp1_hig
  545.         //:n_x === vp1_wid  (n_x: NumberOfSections: x )
  546.         //:n_y === vp1_hig  (n_y: NumberOfSections: y )
  547.         //:VNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVN://
  548.  
  549.         var vp1_wid = (sx1-sx0+1); //:SOURCE::::::WID
  550.         var vp1_hig = (sy1-sy0+1); //:SOURCE::::::HIG
  551.  
  552.         var SRC_ENC_CLU_X=( 1 ); //:Tile_Encoding_Scheme:X
  553.         var SRC_ENC_CLU_Y=( 1 ); //:Tile_Encoding_Scheme:Y
  554.         var n_x = (sx1-sx0+1) / SRC_ENC_CLU_X;
  555.         var n_y = (sy1-sy0+1) / SRC_ENC_CLU_Y;
  556.  
  557.         //:VNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVNVN://
  558.        
  559.         //:Size of tile:
  560.         //:     1: Measured in pixels.
  561.         //:     2: As seen in destination ( rec_vp0 ) viewport.
  562.         var tp0_wid = ( vp0_wid / n_x ); //:TilePixels_DEST( 0 )
  563.         var tp0_hig = ( vp0_hig / n_y ); //:TilePixels_DEST( 0 )
  564.  
  565.             var tincox0 = 0; //:TileINternalCOordinate:(X0/MIN)
  566.             var tincoy0 = 0; //:TileINternalCOordinate:(Y0/MIN)
  567.  
  568.             //:TINCO-( MAX( X1 | Y1 ) )
  569.             //:If rec_vp1 can be overlayed completely evenly
  570.             //:into rec_vp0, then [sp0_(wid|hig)]===1
  571.             var tincox1 =( tp0_wid - 1 );
  572.             var tincoy1 =( tp0_hig - 1 );  
  573.  
  574.         //:Rather than just looping over every pixel of
  575.         //:destination viewport, we will loop through every
  576.         //:pixel of canvas and draw a BLACK pixel if the
  577.         //:point is outside of the viewport to create a
  578.         //:letter-boxing effect.
  579.         var cx0 = 0;
  580.         var cy0 = 0;
  581.         var cx1 = canvas_adapter.GetWid() - 1;
  582.         var cy1 = canvas_adapter.GetHig() - 1;
  583.    
  584.         //:Loop through every pixel of CANVAS
  585.         //:instead of every pixel of destination
  586.         //:viewport.
  587.         for(var d_x = cx0; d_x <= cx1; d_x++){
  588.         for(var d_y = cy0; d_y <= cy1; d_y++){
  589.  
  590.             var outside_destination_viewport=( true );
  591.             if( d_x >= rec_dst.x_0 ){ //:LEFT
  592.             if( d_x <= rec_dst.x_1 ){ //:RIGT
  593.             if( d_y >= rec_dst.y_0 ){ //:TOP
  594.             if( d_y <= rec_dst.y_1 ){ //:BOT
  595.                 outside_destination_viewport=( false );
  596.             };;};;};;};;
  597.  
  598.             if( outside_destination_viewport ){
  599.                 canvas_adapter.PutPix(d_x,d_y,rgb_light_grey);
  600.             }else{
  601.  
  602.                 //:Convert [d_x,d_y] to local coords [ldx,ldy]:
  603.                 var ldx = ( d_x - dx0 ); //:ldx:LocalCord:Dest:X
  604.                 var ldy = ( d_y - dy0 ); //:ldy:LocalCord:Dest:Y
  605.              
  606.                 //: Percentages (dpx & spy):
  607.                 //: dpx = (d_x - dx0) / ( dx1 - dx0 )
  608.                 //: spx = (s_x - sx0) / ( sx1 - sx0 )
  609.        
  610.                 //:........................SOLVE_FOR
  611.                 //:..........................|||
  612.                 //:..........................VVV
  613.                 //: (d_x-dx0)/(dx1-dx0) === (s_x-sx0)/(sx1-sx0)
  614.                 //:((d_x-dx0)/(dx1-dx0))*(sx1-sx0) === s_x-sx0
  615.                 //:(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0 === s_x
  616.  
  617.                  //[ OLD_FORMULA_HAS_OFF_BY_ONE_ERROR:       ]//
  618.             //:  var s_x =(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0;
  619.             //:  var s_y =(((d_y-dy0)/(dy1-dy0))*(sy1-sy0))+sy0;
  620.  
  621.                 //: s_x === t_x  //:Identical_Results
  622.                 //: s_y === t_y  //:Identical_Results
  623.  
  624.                 var s_x; //:s_x: Source_X
  625.                 var s_y; //:s_y: Source_Y
  626.  
  627.                 var t_x; //:t_x: Tile_X
  628.                 var t_y; //:t_y: Tile_Y
  629.  
  630.                 //://////////////////////////////////////////://
  631.                 var   F = ( Math.floor );
  632.  
  633.                 s_x = F(((ldx)/  (vp0_wid))*(vp1_wid) ) + sx0 ;
  634.                 s_y = F(((ldy)/  (vp0_hig))*(vp1_hig) ) + sy0 ;
  635.  
  636.                 t_x = F( (ldx)/( (vp0_wid) /(vp1_wid))) + sx0 ;
  637.                 t_y = F( (ldy)/( (vp0_hig) /(vp1_hig))) + sy0 ;
  638.                 //://////////////////////////////////////////://
  639.                  
  640.                 s_x = Math.floor( s_x );
  641.                 s_y = Math.floor( s_y );
  642.  
  643.                 //# THIS_IS_NOT_THE_VALUE_OF_THE_CURRENT     #//
  644.                 //# TILE_THE_PIXEL [ d_x, d_y ] IS_INSIDE_OF!#//
  645.                 t_x = Math.floor( t_x ); //:TILE_ON:SRC(rec_vp1)
  646.                 t_y = Math.floor( t_y ); //:TILE_ON:SRC(rec_vp1)
  647.  
  648.                 if( s_x != t_x ){
  649.                     throw("[s_x!=t_x]");
  650.                 };;
  651.                 if( s_y != t_y ){
  652.                     throw("[s_y!=t_y]");
  653.                 };;
  654.  
  655.                 //:SL:SourceLocal: [ loc.s_x , loc.s_y ]
  656.                 //:SLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSL://
  657.  
  658.                     //: ( rec_vp1 === rec_src )
  659.                     loc.s_x = ( s_x - rec_src.x_0 );
  660.                     loc.s_y = ( s_y - rec_src.y_0 );
  661.  
  662.                 //:SLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSLSL://
  663.  
  664.                
  665.                 //:canvas_adapter.GetPix(s_x,s_y,rgb);
  666.                 //://////////////////////////////////////////://
  667.  
  668.                 //:Convert XY to index:
  669.                 var wid = til_map.map_wid;
  670.                 var com = til_map.map_com;
  671.                 var dex = ( (s_y*com) * wid) + (s_x*com);
  672.                
  673.                 rgb[ 0 ] = til_map.map_u8a[dex+0];
  674.                 rgb[ 1 ] = til_map.map_u8a[dex+1];
  675.                 rgb[ 2 ] = til_map.map_u8a[dex+2];
  676.                 rgb[ 3 ] = til_map.map_u8a[dex+3];
  677.                 rgb_ref = ( rgb );
  678.  
  679.                 //://////////////////////////////////////////://
  680.  
  681.                 //: Error signifies one of these problems:
  682.                 //: 1: rec_vp1 is not within bounds of tilemap.
  683.                 //: 2: The calculations for s_x & s_y are wrong.
  684.                 if( s_x < 0 || s_x >= til_map.map_wid ){
  685.                     throw("[CameraLikelyOutOfBounds:s_x]");
  686.                 };;
  687.                 if( s_y < 0 || s_y >= til_map.map_hig ){
  688.                     throw("[CameraLikelyOutOfBounds:s_y]");
  689.                 };;
  690.  
  691.                 //: What is the current tile value of the pixel
  692.                 //: being drawn on the destination viewport?
  693.                 //: CURRENT_TILE_IN_FOCUS==[ vp0_stx , vp0_sty ]
  694.                 //# WTF DOES THIS CODE MEAN? #//
  695.                 var vp0_stx = F( (ldx+  (s_x*tp0_wid)  ) / tp0_wid );
  696.                 var vp0_sty = F( (ldy+  (s_y*tp0_hig)  ) / tp0_hig );
  697.  
  698.                 //:Get local pixel coordinate value from within
  699.                 //:the CURRENT_TILE_IN_FOCUS([vp0_stx,vp0_sty])
  700.                 var tinco_x ; //:Tile_Internal_COordinate:X
  701.                 var tinco_y ; //:Tile_Internal_COordinate:Y
  702.          /////tinco_x = ldx - ( vp0_stx * tp0_wid /**usedup:x**/ );
  703.          /////tinco_y = ldy - ( vp0_sty * tp0_hig /**usedup:y**/ );
  704.  
  705.                 //:As long as rec_vp1 is snapped to whole
  706.                 //:pixel values, then the first tile will
  707.                 //:always be tangent to the upper-left edge
  708.                 //:of the on screen viewport ( rec_vp0 ).
  709.                 //:So all you need to do is modulate by the
  710.                 //:size of a tile as it appears in destination
  711.                 //:viewport pixel dimensions.
  712.                 //# MODULATING BY FRACTIONS == ASKING4TROUBLE#//
  713.                 //[ tinco_x = ldx % tp0_wid; ]//
  714.                 //[ tinco_y = ldy % tp0_hig; ]//
  715.  
  716.                 //[ KEEP: tinco NON-normalized ------------- ]//
  717.                 tinco_x = ldx - ( tp0_wid * loc.s_x );
  718.                 tinco_y = ldy - ( tp0_hig * loc.s_y );
  719.  
  720.                     if( tinco_x <  0 || tinco_x >= tp0_wid ||
  721.                         tinco_y <  0 || tinco_y >= tp0_hig
  722.                     ){
  723.                         throw("[tinco_(x|y):OOB]");
  724.                     };;
  725.  
  726.                 //:B:Boarder: (1 pixel thick boarder)
  727.                 //:BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB://
  728.                 if( tincox0 == tinco_x || tincox1 == tinco_x ){
  729.                     rgb_ref = rgb_black;
  730.                 }else
  731.                 if( tinco_x > tincox0 && tinco_x < tincox1 ){
  732.                     //:Do nothing.
  733.                 }else{
  734.                     var min = 0;
  735.                     var max = Math.ceil( tincox1 + 1 );
  736.                     if( tinco_x >= min && tinco_x <= max ){
  737.                         //:Partially on two different tiles.
  738.                         rgb_ref = rgb_grey;
  739.                     }else{
  740.                         throw("[tinco_x:OOB]");
  741.                     };;
  742.                 };;
  743.                 //:- - - - - - - - - - -- - - - - - - - - - -://
  744.                 if( tincoy0 == tinco_y || tincoy1 == tinco_y ){
  745.                     rgb_ref = rgb_black;
  746.                 }else
  747.                 if( tinco_y > tincoy0 && tinco_y < tincoy1 ){
  748.                     //:Do nothing.
  749.                 }else{
  750.                     var min = 0;
  751.                     var max = Math.ceil( tincoy1 + 1 );
  752.                     if( tinco_y >= min && tinco_y <= max ){
  753.                         //:Partially on two different tiles.
  754.                         rgb_ref = rgb_grey;
  755.                     }else{
  756.                         throw("[tinco_y:OOB]");
  757.                     };;
  758.                 };;
  759.                 //:BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB://
  760.  
  761.                 canvas_adapter.PutPix(d_x,d_y,rgb_ref);
  762.  
  763.             };; //:[ outside_destination_viewport ? ]
  764.         };;};; //:Next[ d_x , d_y ]
  765.  
  766.         canvas_adapter.Apply();
  767.  
  768.     };;//://///////////////////////////////////////:DoMapping://
  769.  
  770. //://////////////////////////////////////////////////////////://
  771. function attachCanvasToDom(
  772.     ini_can_wid //: initial_canvas_wid //:In_Pixels
  773. ,   ini_can_hig //: initial_canvas_hig //:In_Pixels
  774. ){
  775.     "use strict"
  776.     //:C: [ can / canvas ] Creation:
  777.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  778.     //:Create Canvas and append to body: ------------------- ://
  779.  
  780.     var can = document.createElement('canvas');
  781.     document.body.appendChild(can);
  782.  
  783.     //: Make canvas non-zero in size, so we can see it:
  784.     can.width  = ini_can_wid; //:initial_canvas_wid;
  785.     can.height = ini_can_hig; //:initial_canvas_hig;
  786.  
  787.     //: Get the context, fill [ can / canvas ] to get visual:
  788.     var ctx = can.getContext("2d");
  789.     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  790.     ctx.fillRect(0,0,can.width, can.height);
  791.  
  792.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  793.    
  794.     //:Return the canvas that was created:
  795.     return( can );
  796. };;
  797. //://////////////////////////////////////////////////////////://
  798.  
  799. function NEW_CanvasAdapter( can ){
  800.     "use strict"
  801.     var canvas_adapter =( new CanvasAdapterClass( can ) );
  802.     return( canvas_adapter );
  803.  
  804. };;
  805. //://////////////////////////////////////////////////////////://
  806.  
  807. //:Canvas Adapter Class:
  808. function CanvasAdapterClass( can /** canvas **/ ){
  809.     "use strict"
  810.     var self=( this );
  811.    
  812.     //:Publicly Exposed Functions
  813.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  814.  
  815.     this.PutPix = _putPix;
  816.     this.GetPix = _getPix;
  817.  
  818.     this.GetWid = _getWid;
  819.     this.GetHig = _getHig;
  820.  
  821.     this.Apply  = _apply;
  822.  
  823.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  824.    
  825.     if(!can){
  826.         throw("[NilCanvasGivenToPenConstruct:2020_05_06]");
  827.     };;
  828.  
  829.     function _constructor( canvas_adapter /** self **/ ){
  830.         //://////////////////////////////////////////////////://
  831.         //: Setup inclusive bounds:
  832.         var x0 = 0;
  833.         var x1 = can.width - 1;
  834.  
  835.         var y0 = 0;
  836.         var y1 = can.height -1;
  837.  
  838.         //: Iterate over entire [can / canvas], and set pixels:
  839.         var rgb=[1,2,3,4];
  840.         for(var x = x0; x <= x1; x++){
  841.         for(var y = y0; y <= y1; y++){
  842.             rgb[0]= x%256;
  843.             rgb[1]= y%256;
  844.             rgb[2]= (x+y)%256;
  845.             rgb[3]= 255;
  846.             canvas_adapter.PutPix( x, y, rgb );
  847.         };;};; //:next X/Y
  848.        
  849.         //: Show changes on screen:
  850.         canvas_adapter.Apply();
  851.  
  852.         //://////////////////////////////////////////////////://
  853.     };;
  854.    
  855.     var _can = can;
  856.     var _ctx = can.getContext("2d");
  857.    
  858.     //:Cache size of canvas and handles to internal data.
  859.     var _w      = _can.width;
  860.     var _h      = _can.height;
  861.     var img_dat = _ctx.createImageData(_w,_h); //: _絵資
  862.     var dat_dat = img_dat.data;                //: _筆
  863.  
  864.     function _putPix(x,y,inn_rgb /** rgb:[r,g,b,a] **/ ){
  865.        
  866.         //:Convert XY to index:
  867.         var dex = ( (y*4) * _w) + (x*4);
  868.        
  869.         dat_dat[dex+0]   = inn_rgb[0];
  870.         dat_dat[dex+1]   = inn_rgb[1];
  871.         dat_dat[dex+2]   = inn_rgb[2];
  872.         dat_dat[dex+3]   = inn_rgb[3];
  873.        
  874.     };;
  875.     function _getPix(x,y,out_rgb /** rgb:[r,g,b,a] **/ ){
  876.        
  877.         //:Convert XY to index:
  878.         var dex = ( (y*4) * _w) + (x*4);
  879.        
  880.         out_rgb[ 0 ] = dat_dat[dex+0];
  881.         out_rgb[ 1 ] = dat_dat[dex+1];
  882.         out_rgb[ 2 ] = dat_dat[dex+2];
  883.         out_rgb[ 3 ] = dat_dat[dex+3];
  884.     };;
  885.  
  886.     function _getWid(){ return( _w ); };
  887.     function _getHig(){ return( _h ); };
  888.    
  889.     function _apply(){
  890.         _ctx.putImageData( img_dat, 0,0 );  
  891.     };;
  892.  
  893.     _constructor( self );
  894. };;
  895. //://////////////////////////////////////////////////////////://
  896.  
  897. function FillTilemapWithTestPattern(
  898.     til_map
  899. ){
  900.     "use strict"
  901.  
  902.     var num_pix =( 1
  903.     *   til_map.map_wid
  904.     *   til_map.map_hig
  905.     );;
  906.     if( til_map.map_com != 4 ){
  907.         throw("[LogicCodedFor4ComponentsPerPixel]");
  908.     };;
  909.  
  910.     for( var pix_dex = 0; pix_dex < num_pix; pix_dex++ ){
  911.  
  912.         var dex = ( pix_dex * til_map.map_com );
  913.  
  914.         var wid = til_map.map_wid    ;
  915.         var p_x =  pix_dex     % wid ;  
  916.         var p_y = (pix_dex-p_x)/ wid ;  
  917.  
  918.         var per_x =( p_x / til_map.map_wid );
  919.         var per_y =( p_y / til_map.map_hig );
  920.  
  921.         var R = Math.floor( per_x * 255 );
  922.         var G = Math.floor( per_y * 255 );
  923.         var B = ( p_x + p_y ) % 256;
  924.        
  925.         til_map.map_u8a[dex+0]   =   R; //:R
  926.         til_map.map_u8a[dex+1]   =   G; //:G
  927.         til_map.map_u8a[dex+2]   =   B; //:B
  928.         til_map.map_u8a[dex+3]   = 255; //:A
  929.     };;
  930. };;
  931. //://////////////////////////////////////////////////////////://
  932.  
  933.    
  934.             main();
  935.  
  936.  
  937. //://////////////////////////////////////////////////////////://
  938. //://///////////////////////////////////////:// </script></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!