API tools faq
paste
CODE_TOLD_FAST

JS/UIN_ADA.HTM

CODE_TOLD_FAST
May 8th, 2020
800
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 22.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML ><html lang="en"><head><title>
  2.  
  3.     UIN_ADA
  4.  
  5. </title></head><body></body><script> //://///////////////////://
  6. //://////////////////////////////////////////////////////////://
  7.  
  8.     //:GW: Global_Whatever:
  9.     //:GWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGW://
  10.  
  11.     var GLO_DAT = null; //:GLOBAL_DATA
  12.     var GLO_FUN = null; //:GLOBAL_FUNCTIONS
  13.     var GLO_OBJ = null; //:GLOBAL_OBJECTS
  14.  
  15.     //:GWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGWGW://
  16.  
  17. //://////////////////////////////////////////////////////////://
  18.  
  19. //: Main function to execute once all script is loaded:
  20. function main(){
  21. "use strict"
  22.  
  23.     //://////////////////////////////////////////////////////://
  24.     GLO_DAT=( INIT_GLOBAL_DATA( ) );
  25.     Object.seal( GLO_DAT );
  26.  
  27.     GLO_FUN=( INIT_GLOBAL_FUNCTION( ) );
  28.     Object.seal( GLO_FUN );
  29.  
  30.     GLO_OBJ=( INIT_GLOBAL_OBJECT( ) );
  31.     Object.seal( GLO_OBJ );
  32.     //://////////////////////////////////////////////////////://
  33.  
  34.     //:******************************************************://
  35.     //:******************************************************://
  36.     //:******************************************************://
  37.     //:******************************************************://
  38.  
  39.     //[ BUF_VEW --> UIN_ADA, upgrades:                       ]//
  40.     //[ 1:When pressing arrow keys, the camera will move     ]//
  41.     //[   exactly one camera in the direction of arrow press.]//
  42.     //[ 2:Pressing "+" or "-" keys will zoom in or out       ]//
  43.     //[   by doubling or halving off-screen viewport size.   ]//
  44.                                                            
  45.     //:GLO_FUN.DoMapping_vp1_TO_vp0();
  46.     GLO_OBJ.vp1_sna.ForceUpdate();
  47.  
  48.     //:******************************************************://
  49.     //:******************************************************://
  50.     //:******************************************************://
  51.     //:******************************************************://
  52. };;
  53.  
  54. //://////////////////////////////////////////////////////////://
  55.  
  56. //:GD:Global_Data:(BELOW):-----------------------------------://
  57. //:GDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGD://
  58.  
  59. function INIT_GLOBAL_DATA( ){
  60. "use strict"
  61.  
  62.     var til_map=( CreateTileMap(512) );
  63.  
  64.     var ini_til_wid=( til_map.map_wid );
  65.     var ini_til_hig=( til_map.map_hig );
  66.  
  67.     var ini_can_wid = 640 ; //:ini_wid:of:Canvas
  68.     var ini_can_hig = 640 ; //:ini_hig:of:Canvas
  69.  
  70.     //: [0]: INPUT VIEWPORT:
  71.     var rec_vp0 ={
  72.         x_0 :      0      + 32
  73.     ,   y_0 :      0      + 32
  74.     ,   x_1 : ini_can_wid - 32
  75.     ,   y_1 : ini_can_hig - 32
  76.     };; Object.seal( rec_vp0 );
  77.    
  78.     //: [1]: INPUT VIEWPORT:
  79.     var rec_vp1 ={
  80.         x_0 :      0      + 64
  81.     ,   y_0 :      0      + 64
  82.     ,   x_1 : ini_til_wid - 64
  83.     ,   y_1 : ini_til_hig - 64
  84.     };;Object.seal( rec_vp1 );
  85.  
  86.     var GLO_DAT={
  87.         til_map : til_map
  88.     ,   rec_vp0 : rec_vp0
  89.     ,   rec_vp1 : rec_vp1
  90.  
  91.     ,   ini_can_wid : ini_can_wid //:initial_canvas_wid
  92.     ,   ini_can_hig : ini_can_hig //:initial_canvas_hig
  93.  
  94.     ,   ini_til_wid : ini_til_wid //:initial_tilemap_wid
  95.     ,   ini_til_hig : ini_til_hig //:initial_tilemap_hig
  96.  
  97.     ,   glo_eve     : NEW_GlobalEventStruct( )
  98.     };;
  99.  
  100.     Object.seal( GLO_DAT );
  101.     return(      GLO_DAT );
  102. };;
  103. //:GDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGDGD://
  104. //:GD:Global_Data:(ABOVE):-----------------------------------://
  105. //:GF:Global_Function:(BELOW):-------------------------------://
  106. //:GFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGF://
  107. function INIT_GLOBAL_FUNCTION( ){
  108. "use strict"
  109.  
  110.     var GLO_FUN ={ //:GLO_FUN:GLObal_FUNctions (container )
  111.  
  112.         //::::::::vp1_TO_vp0::::::::::::::::::vp1_TO_vp0
  113.         DoMapping_vp1_TO_vp0 : SOTM_DoMapping_vp1_TO_vp0
  114.     };;
  115.  
  116.     Object.seal( GLO_FUN );
  117.     return(      GLO_FUN );
  118. };;
  119. //:GFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGFGF://
  120. //:GF:Global_Function:(BELOW):-------------------------------://
  121. //:GO:Global_Objects:(OBJ==Data+Funcs):(BELOW):--------------://
  122. //:GOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGO://
  123. function INIT_GLOBAL_OBJECT( ){
  124. "use strict"
  125.  
  126.     //: Create a [ can / canvas ]:
  127.     var can = attachCanvasToDom(
  128.         GLO_DAT.ini_can_wid
  129.     ,   GLO_DAT.ini_can_hig
  130.     );;
  131.  
  132.     var GLO_OBJ={
  133.         uin_ada : NEW_UserInputAdapterSingleton( can )
  134.     ,   can_ada : NEW_CanvasAdapter(             can )
  135.     ,   vp1_sna : NEW_ViewportOneSnapper( )
  136.     };;
  137.  
  138.     //: can_ada: Has pixel putting and getting functions:
  139.  
  140.     Object.seal( GLO_OBJ );
  141.     return(      GLO_OBJ );
  142.  
  143. };;
  144. //:GOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGOGO://
  145. //:GO:Global_Objects:(OBJ==Data+Funcs):(ABOVE):--------------://
  146.  
  147. //://////////////////////////////////////////////////////////://
  148.  
  149. function NEW_ViewportOneSnapper( ){ //:GLO_OBJ.vp1_sna
  150. "use strict"
  151.     var vp1_sna =( new ViewportOneSnapper( ) );
  152.     Object.seal( vp1_sna );
  153.     return(      vp1_sna );
  154. };;
  155. function ViewportOneSnapper( ){ //: vp1_sna
  156. "use strict"
  157.  
  158.     //:V:Visible (Exported/Public) Functions:
  159.     //:VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV://
  160.  
  161.         this.ReadEvent   = ( _ReadEvent   );
  162.         this.ForceUpdate = ( _ForceUpdate );
  163.  
  164.     //:VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV://
  165.     //:H:Hidden_Variables:
  166.     //:HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH://
  167.     var _ = {};
  168.  
  169.         _.til_exp = 7; //:Tile_Exponent/ViewportSize
  170.         _.t_x     = 1; //:Tile_X:Coordinate_Of_VP1_Position
  171.         _.t_y     = 1; //:Tile_Y:Coordinate_Of_VP1_Position
  172.  
  173.     Object.seal( _ );
  174.     //:HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH://
  175.    
  176.     function _UpdateGraphics( ){
  177.         console.log("[TODO:_UpdateGraphics]");
  178.  
  179.         GLO_FUN.DoMapping_vp1_TO_vp0();
  180.     };;
  181.     function _UpdateCoordinates_VP1( ){
  182.  
  183.         var map_wid = GLO_DAT.til_map.map_wid ;  //:pix_wid
  184.         var map_hig = GLO_DAT.til_map.map_hig ;  //:pix_hig
  185.         if( map_wid != map_hig ){
  186.             throw("[DesignedForPerfectlySquareTileMaps]");
  187.         };;
  188.         var map_san = ( map_wid | map_hig );
  189.  
  190.         var max_exp = ( Math.log2( map_san ) );
  191.         if( _.til_exp <    0    ){ _.til_exp =    0   ; };
  192.         if( _.til_exp > max_exp ){ _.til_exp = max_exp; };
  193.  
  194.         var til_san=( Math.pow( 2, _.til_exp ) );//:pix_san
  195.  
  196.         //://////////////////////////////////////////////////://
  197.         //:How big is the tilemap when measured in terms
  198.         //:of cameras stacked ajacently next to each other
  199.         //:until they fill entire til_map 100% without
  200.         //:any overlap.
  201.         //:SUMMARY:
  202.         //:     How big is the grid in camera_tiles.
  203.         //:     ( camera_tiles === til_san )
  204.         var gri_wid = map_wid / til_san ; //:grid_wid
  205.         var gri_hig = map_hig / til_san ; //:grid_hig
  206.         //://////////////////////////////////////////////////://
  207.  
  208.         var m_x     = ( gri_wid - 1 ); //:max_index:t_x
  209.         var m_y     = ( gri_hig - 1 ); //:max_index:t_y
  210.         if( _.t_x <  0 ){ _.t_x = 0; }; //:LOWER_BOUND : t_x
  211.         if( _.t_y <  0 ){ _.t_y = 0; }; //:LOWER_BOUND : t_y
  212.         if( _.t_x > m_x){ _.t_x =m_x;};
  213.         if( _.t_y > m_y){ _.t_y =m_y;};
  214.  
  215.         var rec_vp1 = GLO_DAT.rec_vp1;
  216.  
  217.         var x_0 = _.t_x * til_san;
  218.         var y_0 = _.t_y * til_san;
  219.  
  220.         GLO_DAT.rec_vp1.x_0 = x_0;
  221.         GLO_DAT.rec_vp1.y_0 = y_0;
  222.  
  223.         GLO_DAT.rec_vp1.x_1 = ( x_0 + til_san - 1 );
  224.         GLO_DAT.rec_vp1.y_1 = ( y_0 + til_san - 1 );
  225.        
  226.     };;
  227.     function _ReadEvent( glo_eve ){
  228.  
  229.         var key = glo_eve.key;
  230.         var val =( 0 - 666 );
  231.  
  232.         if( 0
  233.         || "ARR_UPP" == key
  234.         || "ARR_DOW" == key
  235.         || "ARR_LEF" == key
  236.         || "ARR_RIG" == key
  237.         ){
  238.             if( key == "ARR_UPP" ){ _SnapMoveVP1_UPP( ); }else
  239.             if( key == "ARR_DOW" ){ _SnapMoveVP1_DOW( ); }else
  240.             if( key == "ARR_LEF" ){ _SnapMoveVP1_LEF( ); }else
  241.             if( key == "ARR_RIG" ){ _SnapMoveVP1_RIG( ); }else
  242.             {
  243.                 //:EDCL:Expected_Dead_Code_Line:
  244.                 throw("[EDCL:EXPECTED_ONE_OF_FOUR_KEYS_ABOVE]");
  245.             };;
  246.  
  247.             _Update();
  248.         };;
  249.         if( 0
  250.         || "+" == key
  251.         || "=" == key
  252.         || "-" == key
  253.         || "_" == key
  254.         ){
  255.             if( "+"==key || "="==key ){
  256.  
  257.                 //:ZOOM_IN
  258.                 _.til_exp =( _.til_exp - 1 );
  259.  
  260.             };;
  261.             if( "-"==key || "_"==key ){
  262.  
  263.                 //:ZOOM_OUT:
  264.                 _.til_exp =( _.til_exp + 1 );
  265.             };;
  266.  
  267.             _Update();
  268.         };;
  269.     };;
  270.  
  271.  
  272.  
  273.     function _Update(){
  274.         _UpdateCoordinates_VP1();
  275.         _UpdateGraphics();
  276.     };;
  277.     function _ForceUpdate( ){
  278.         _Update();
  279.     };;
  280.  
  281.  
  282.  
  283.     function _SnapMoveVP1_UPP( ){
  284.         _.t_y =( _.t_y - 1 );
  285.         console.log("_SnapMoveVP1_UPP");
  286.     };;
  287.     function _SnapMoveVP1_DOW( ){
  288.         _.t_y =( _.t_y + 1 );
  289.         console.log("_SnapMoveVP1_DOW");
  290.     };;
  291.     function _SnapMoveVP1_LEF( ){
  292.         _.t_x =( _.t_x - 1 );
  293.         console.log("_SnapMoveVP1_LEF");
  294.     };;
  295.     function _SnapMoveVP1_RIG( ){
  296.         _.t_x =( _.t_x + 1 );
  297.         console.log("_SnapMoveVP1_RIG");
  298.     };;
  299.  
  300. };;
  301. //://////////////////////////////////////////////////////////://
  302.  
  303. function NEW_UserInputAdapterSingleton( can /**canvas**/ ){
  304. "use strict"
  305.     var uin_ada=( new UserInputAdapterSingleton( can ) );
  306.     Object.seal( uin_ada );
  307.     return(      uin_ada );
  308. };;
  309. function UserInputAdapterSingleton(
  310.     can /** html5_canvas **/
  311. ){
  312. "use strict"
  313.     //:Private Variables:
  314.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  315.  
  316.     var _ = {};
  317.         _.can = null;
  318.  
  319.     //:PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP://
  320.  
  321.     function _Constructor( can ){
  322.         if(!can){throw("[ERR:2020_05_08:0303PM]");};
  323.         _.can = can;
  324.  
  325.         _.can.addEventListener(
  326.             "click"  //:<------------ TypeOfEventAsString
  327.         ,  _NativeClickEventHandler //:Callback_Function
  328.         );;
  329.  
  330.         document.addEventListener(
  331.             "keydown"  //:<----------- TypeOfEventAsString
  332.         ,  _NativeKeyboardEventHandler //:Callback_Function
  333.         );;
  334.  
  335.     };;
  336.     function _NativeKeyboardEventHandler( nat_eve ){
  337.         var glo_eve = GLO_DAT.glo_eve;
  338.         //://////////////////////////////////////////////////://
  339.    
  340.             //:Store keyboard key that was pressed:
  341.             //://////////////////////////////////////////////://
  342.             var key = nat_eve.key.toUpperCase( );
  343.             if( "ARROWLEFT"  == key ){ key = "ARR_LEF"; };
  344.             if( "ARROWRIGHT" == key ){ key = "ARR_RIG"; };
  345.             if( "ARROWUP"    == key ){ key = "ARR_UPP"; };
  346.             if( "ARROWDOWN"  == key ){ key = "ARR_DOW"; };
  347.             glo_eve.key      =  key;
  348.             //://////////////////////////////////////////////://
  349.  
  350.             GLO_OBJ.vp1_sna.ReadEvent( glo_eve );
  351.  
  352.             console.log( glo_eve );
  353.  
  354.         //://////////////////////////////////////////////////://
  355.     };;
  356.     function _NativeClickEventHandler( nat_eve ){
  357.  
  358.         var glo_eve = GLO_DAT.glo_eve;
  359.         //://////////////////////////////////////////////////://
  360.  
  361.             var rec  =( _.can.getBoundingClientRect() );
  362.             var CAN_X=( nat_eve.clientX - rec.left   );
  363.             var CAN_Y=( nat_eve.clientY - rec.top    );
  364.  
  365.             glo_eve.c_x=( CAN_X );  //:Click_X
  366.             glo_eve.c_y=( CAN_Y );  //:Click_Y
  367.  
  368.         //://////////////////////////////////////////////////://
  369.  
  370.         console.log("[CLICKITY_CLICK]");
  371.  
  372.     };;
  373.     _Constructor( can );
  374. };;
  375. //://////////////////////////////////////////////////////////://
  376.  
  377. function NEW_GlobalEventStruct( /** void **/ ){
  378. "use strict"
  379.     var glo_eve ={
  380.  
  381.         TYP : "glo_eve"
  382.  
  383.         //: sub_typ : "mouse_event" or "keyboard_event" ?
  384.  
  385.         //:KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK://
  386.     ,   key : "" //:What key was pressed?
  387.     ,   k_d :  0 //:IsKeyCurrentlyDown?
  388.     ,   k_u :  0 //:IsKeyCurrentlyUp?
  389.         //:KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK://
  390.  
  391.         //:M:Mouse Event Stuff:
  392.         //:MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM://
  393.  
  394.     ,   m_x : 0  //:Mouse x
  395.     ,   m_y : 0  //:Mouse y
  396.                
  397.     ,   c_x : 0  //:Mouse CLICK: x
  398.     ,   c_y : 0  //:Mouse CLICK: y
  399.                
  400.     ,   u_x : 0  //:Mouse UP ( u_x == "Up X" )
  401.     ,   u_y : 0  //:Mouse UP ( u_y == "Up Y" )
  402.                
  403.     ,   d_x : 0  //:Mouse DOWN
  404.     ,   d_y : 0  //:Mouse DOWN
  405.  
  406.         //:If both are set or unset,
  407.         //:that is an error:
  408.     ,   m_d : 0  //:IsMouseCurrentlyDown?
  409.     ,   m_u : 0  //:IsMouseCurrentlyUp?
  410.  
  411.         //:MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM://
  412.  
  413.     };;Object.seal( glo_eve );
  414.  
  415.     return( glo_eve );
  416. };;
  417. //://////////////////////////////////////////////////////////://
  418.    
  419. function CreateTileMap( map_san /** span==wid==hig **/ ){
  420. "use strict"
  421.     var til_map={ /** map_dat **/
  422.  
  423.         map_u8a : null
  424.     ,   map_wid : map_san
  425.     ,   map_hig : map_san
  426.     ,   map_com :  4 /**NumberOfComponentsPerPixel:ARGB**/
  427.  
  428.     };;
  429.     Object.seal( til_map );
  430.  
  431.     var map_len=( 1
  432.     *   til_map.map_wid
  433.     *   til_map.map_hig
  434.     *   til_map.map_com
  435.     );;
  436.  
  437.     til_map.map_u8a= new Uint8Array( map_len );
  438.     FillTilemapWithTestPattern( til_map );
  439.  
  440.     return( til_map );
  441. };;
  442. //://////////////////////////////////////////////////////////://
  443.  
  444.     //:   GLO_FUN.DoMapping_vp1_TO_vp0();
  445.     function SOTM_DoMapping_vp1_TO_vp0( ){
  446.     "use strict"
  447.         var til_map =  GLO_DAT.til_map;
  448.         var can_ada =( GLO_OBJ.can_ada = GLO_OBJ.can_ada );
  449.  
  450.         var rec_src = GLO_DAT.rec_vp1; //: [vp1|vp2|vp3]
  451.         var rec_dst = GLO_DAT.rec_vp0;
  452.         DoMapping(
  453.             can_ada //: <--------- rec_dst puts  to   here.
  454.         ,   til_map //: <--------- rec_src takes from here.
  455.         ,   rec_src //:source______rectangle
  456.         ,   rec_dst //:destination_rectangle
  457.         );;
  458.     };;
  459. //://////////////////////////////////////////////////////////://
  460.  
  461.     //:Read data off of til_map using rec_dst
  462.     //:and then write to canvas_adapter using rec_src.
  463.     function DoMapping(
  464.         canvas_adapter
  465.     ,   til_map
  466.     ,   rec_src //:source______rectangle
  467.     ,   rec_dst //:destination_rectangle
  468.     ){
  469.         "use strict"
  470.  
  471.         //://////////////////////////////////////////////////://
  472.         if(!canvas_adapter){ throw("[2020_05_07:300PM:A]"); };
  473.         if(!til_map       ){ throw("[2020_05_07:300PM:B]"); };
  474.         if(!rec_src       ){ throw("[2020_05_07:300PM:C]"); };
  475.         if(!rec_dst       ){ throw("[2020_05_07:300PM:D]"); };
  476.         if( rec_src === rec_dst ){
  477.             throw("[Rectangle_Objects_Are_Identical]");
  478.         };;
  479.         //://////////////////////////////////////////////////://
  480.  
  481.         var rgb_black=[0,0,0,255];
  482.         var rgb=[1,2,3,4];//:rgba
  483.  
  484.         //:SOURCE:
  485.         var sx0 = rec_src.x_0; //: rec_vp1
  486.         var sx1 = rec_src.x_1; //: rec_vp1
  487.         var sy0 = rec_src.y_0; //: rec_vp1
  488.         var sy1 = rec_src.y_1; //: rec_vp1
  489.  
  490.         //:DEST:
  491.         var dx0 = rec_dst.x_0; //: rec_vp0
  492.         var dx1 = rec_dst.x_1; //: rec_vp0
  493.         var dy0 = rec_dst.y_0; //: rec_vp0
  494.         var dy1 = rec_dst.y_1; //: rec_vp0
  495.  
  496.         //:Rather than just looping over every pixel of
  497.         //:destination viewport, we will loop through every
  498.         //:pixel of canvas and draw a BLACK pixel if the
  499.         //:point is outside of the viewport to create a
  500.         //:letter-boxing effect.
  501.         var cx0 = 0;
  502.         var cy0 = 0;
  503.         var cx1 = canvas_adapter.GetWid() - 1;
  504.         var cy1 = canvas_adapter.GetHig() - 1;
  505.    
  506.         //:Loop through every pixel of CANVAS
  507.         //:instead of every pixel of destination
  508.         //:viewport.
  509.         for(var d_x = cx0; d_x <= cx1; d_x++){
  510.         for(var d_y = cy0; d_y <= cy1; d_y++){
  511.  
  512.             var outside_destination_viewport=( true );
  513.             if( d_x >= rec_dst.x_0 ){ //:LEFT
  514.             if( d_x <= rec_dst.x_1 ){ //:RIGT
  515.             if( d_y >= rec_dst.y_0 ){ //:TOP
  516.             if( d_y <= rec_dst.y_1 ){ //:BOT
  517.                 outside_destination_viewport=( false );
  518.             };;};;};;};;
  519.  
  520.             if( outside_destination_viewport ){
  521.                 canvas_adapter.PutPix(d_x,d_y,rgb_black);
  522.             }else{
  523.              
  524.                 //: Percentages (dpx & spy):
  525.                 //: dpx = (d_x - dx0) / ( dx1 - dx0 )
  526.                 //: spx = (s_x - sx0) / ( sx1 - sx0 )
  527.        
  528.                 //:........................SOLVE_FOR
  529.                 //:..........................|||
  530.                 //:..........................VVV
  531.                 //: (d_x-dx0)/(dx1-dx0) === (s_x-sx0)/(sx1-sx0)
  532.                 //:((d_x-dx0)/(dx1-dx0))*(sx1-sx0) === s_x-sx0
  533.                 //:(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0 === s_x
  534.  
  535.                 var s_x =(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0;
  536.                 var s_y =(((d_y-dy0)/(dy1-dy0))*(sy1-sy0))+sy0;
  537.  
  538.                 s_x = Math.floor( s_x );
  539.                 s_y = Math.floor( s_y );
  540.                
  541.                 //:canvas_adapter.GetPix(s_x,s_y,rgb);
  542.                 //://////////////////////////////////////////://
  543.  
  544.                 //:Convert XY to index:
  545.                 var wid = til_map.map_wid;
  546.                 var com = til_map.map_com;
  547.                 var dex = ( (s_y*com) * wid) + (s_x*com);
  548.                
  549.                 rgb[ 0 ] = til_map.map_u8a[dex+0];
  550.                 rgb[ 1 ] = til_map.map_u8a[dex+1];
  551.                 rgb[ 2 ] = til_map.map_u8a[dex+2];
  552.                 rgb[ 3 ] = til_map.map_u8a[dex+3];
  553.  
  554.                 //://////////////////////////////////////////://
  555.  
  556.                 canvas_adapter.PutPix(d_x,d_y,rgb);
  557.  
  558.             };; //:[ outside_destination_viewport ? ]
  559.         };;};; //:Next[ d_x , d_y ]
  560.  
  561.         canvas_adapter.Apply();
  562.  
  563.     };;//://///////////////////////////////////////:DoMapping://
  564.  
  565. //://////////////////////////////////////////////////////////://
  566. function attachCanvasToDom(
  567.     ini_can_wid //: initial_canvas_wid //:In_Pixels
  568. ,   ini_can_hig //: initial_canvas_hig //:In_Pixels
  569. ){
  570.     "use strict"
  571.     //:C: [ can / canvas ] Creation:
  572.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  573.     //:Create Canvas and append to body: ------------------- ://
  574.  
  575.     var can = document.createElement('canvas');
  576.     document.body.appendChild(can);
  577.  
  578.     //: Make canvas non-zero in size, so we can see it:
  579.     can.width  = ini_can_wid; //:initial_canvas_wid;
  580.     can.height = ini_can_hig; //:initial_canvas_hig;
  581.  
  582.     //: Get the context, fill [ can / canvas ] to get visual:
  583.     var ctx = can.getContext("2d");
  584.     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  585.     ctx.fillRect(0,0,can.width, can.height);
  586.  
  587.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  588.    
  589.     //:Return the canvas that was created:
  590.     return( can );
  591. };;
  592. //://////////////////////////////////////////////////////////://
  593.  
  594. function NEW_CanvasAdapter( can ){
  595.     "use strict"
  596.     var canvas_adapter =( new CanvasAdapterClass( can ) );
  597.     return( canvas_adapter );
  598.  
  599. };;
  600. //://////////////////////////////////////////////////////////://
  601.  
  602. //:Canvas Adapter Class:
  603. function CanvasAdapterClass( can /** canvas **/ ){
  604.     "use strict"
  605.     var self=( this );
  606.    
  607.     //:Publicly Exposed Functions
  608.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  609.  
  610.     this.PutPix = _putPix;
  611.     this.GetPix = _getPix;
  612.  
  613.     this.GetWid = _getWid;
  614.     this.GetHig = _getHig;
  615.  
  616.     this.Apply  = _apply;
  617.  
  618.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  619.    
  620.     if(!can){
  621.         throw("[NilCanvasGivenToPenConstruct:2020_05_06]");
  622.     };;
  623.  
  624.     function _constructor( canvas_adapter /** self **/ ){
  625.         //://////////////////////////////////////////////////://
  626.         //: Setup inclusive bounds:
  627.         var x0 = 0;
  628.         var x1 = can.width - 1;
  629.  
  630.         var y0 = 0;
  631.         var y1 = can.height -1;
  632.  
  633.         //: Iterate over entire [can / canvas], and set pixels:
  634.         var rgb=[1,2,3,4];
  635.         for(var x = x0; x <= x1; x++){
  636.         for(var y = y0; y <= y1; y++){
  637.             rgb[0]= x%256;
  638.             rgb[1]= y%256;
  639.             rgb[2]= (x+y)%256;
  640.             rgb[3]= 255;
  641.             canvas_adapter.PutPix( x, y, rgb );
  642.         };;};; //:next X/Y
  643.        
  644.         //: Show changes on screen:
  645.         canvas_adapter.Apply();
  646.  
  647.         //://////////////////////////////////////////////////://
  648.     };;
  649.    
  650.     var _can = can;
  651.     var _ctx = can.getContext("2d");
  652.    
  653.     //:Cache size of canvas and handles to internal data.
  654.     var _w      = _can.width;
  655.     var _h      = _can.height;
  656.     var img_dat = _ctx.createImageData(_w,_h); //: _絵資
  657.     var dat_dat = img_dat.data;                //: _筆
  658.  
  659.     function _putPix(x,y,inn_rgb /** rgb:[r,g,b,a] **/ ){
  660.        
  661.         //:Convert XY to index:
  662.         var dex = ( (y*4) * _w) + (x*4);
  663.        
  664.         dat_dat[dex+0]   = inn_rgb[0];
  665.         dat_dat[dex+1]   = inn_rgb[1];
  666.         dat_dat[dex+2]   = inn_rgb[2];
  667.         dat_dat[dex+3]   = inn_rgb[3];
  668.        
  669.     };;
  670.     function _getPix(x,y,out_rgb /** rgb:[r,g,b,a] **/ ){
  671.        
  672.         //:Convert XY to index:
  673.         var dex = ( (y*4) * _w) + (x*4);
  674.        
  675.         out_rgb[ 0 ] = dat_dat[dex+0];
  676.         out_rgb[ 1 ] = dat_dat[dex+1];
  677.         out_rgb[ 2 ] = dat_dat[dex+2];
  678.         out_rgb[ 3 ] = dat_dat[dex+3];
  679.     };;
  680.  
  681.     function _getWid(){ return( _w ); };
  682.     function _getHig(){ return( _h ); };
  683.    
  684.     function _apply(){
  685.         _ctx.putImageData( img_dat, 0,0 );  
  686.     };;
  687.  
  688.     _constructor( self );
  689. };;
  690. //://////////////////////////////////////////////////////////://
  691.  
  692. function FillTilemapWithTestPattern(
  693.     til_map
  694. ){
  695.     "use strict"
  696.  
  697.     var num_pix =( 1
  698.     *   til_map.map_wid
  699.     *   til_map.map_hig
  700.     );;
  701.     if( til_map.map_com != 4 ){
  702.         throw("[LogicCodedFor4ComponentsPerPixel]");
  703.     };;
  704.  
  705.     for( var pix_dex = 0; pix_dex < num_pix; pix_dex++ ){
  706.  
  707.         var dex = ( pix_dex * til_map.map_com );
  708.  
  709.         var wid = til_map.map_wid    ;
  710.         var p_x =  pix_dex     % wid ;  
  711.         var p_y = (pix_dex-p_x)/ wid ;  
  712.  
  713.         var per_x =( p_x / til_map.map_wid );
  714.         var per_y =( p_y / til_map.map_hig );
  715.  
  716.         var R = Math.floor( per_x * 255 );
  717.         var G = Math.floor( per_y * 255 );
  718.         var B = ( p_x + p_y ) % 256;
  719.        
  720.         til_map.map_u8a[dex+0]   =   R; //:R
  721.         til_map.map_u8a[dex+1]   =   G; //:G
  722.         til_map.map_u8a[dex+2]   =   B; //:B
  723.         til_map.map_u8a[dex+3]   = 255; //:A
  724.     };;
  725. };;
  726. //://////////////////////////////////////////////////////////://
  727.  
  728.    
  729.             main();
  730.  
  731.  
  732. //://////////////////////////////////////////////////////////://
  733. //://///////////////////////////////////////:// </script></html>
Advertisement
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!