API tools faq
paste
Advertisement
CODE_TOLD_FAST

JS/BUF_VEW.HTM

CODE_TOLD_FAST
May 8th, 2020
602
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 11.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML ><html lang="en"><head><title>
  2.  
  3.     BUF_VEW
  4.  
  5. </title></head><body></body><script> //://///////////////////://
  6. //://////////////////////////////////////////////////////////://
  7.  
  8. var GLOBAL_DATA=( INIT_GLOBAL_DATA( ) );
  9.  
  10. function INIT_GLOBAL_DATA( ){
  11.  
  12.     var til_map=( CreateTileMap(512) );
  13.  
  14.     var map_wid=( til_map.map_wid );
  15.     var map_hig=( til_map.map_hig );
  16.  
  17.     var ini_wid = 640 ;
  18.     var ini_hig = 640 ;
  19.  
  20.     //: [0]: INPUT VIEWPORT:
  21.     var rec_vp0 ={
  22.         x_0 :     0    + 32
  23.     ,   y_0 :     0    + 32
  24.     ,   x_1 :  ini_wid - 32
  25.     ,   y_1 :  ini_hig - 32
  26.     };; Object.seal( rec_vp0 );
  27.    
  28.     //: [1]: INPUT VIEWPORT:
  29.     var rec_vp1 ={
  30.         x_0 :    0    + 64
  31.     ,   y_0 :    0    + 64
  32.     ,   x_1 : map_wid - 64
  33.     ,   y_1 : map_hig - 64
  34.     };;Object.seal( rec_vp1 );
  35.  
  36.     var GLOBAL_DATA={
  37.         til_map : til_map
  38.     ,   rec_vp0 : rec_vp0
  39.     ,   rec_vp1 : rec_vp1
  40.  
  41.     ,   initial_canvas_wid : ini_wid
  42.     ,   initial_canvas_hig : ini_hig
  43.  
  44.     ,   initial_tilemap_wid : map_wid
  45.     ,   initial_tilemap_hig : map_hig
  46.     };;
  47.  
  48.     Object.seal( GLOBAL_DATA );
  49.     return(      GLOBAL_DATA );
  50. };;
  51.  
  52. //://////////////////////////////////////////////////////////://
  53.    
  54. function CreateTileMap( map_san /** span==wid==hig **/ ){
  55.  
  56.     var til_map={ /** map_dat **/
  57.  
  58.         map_u8a : null
  59.     ,   map_wid : map_san
  60.     ,   map_hig : map_san
  61.     ,   map_com :  4 /**NumberOfComponentsPerPixel:ARGB**/
  62.  
  63.     };;
  64.     Object.seal( til_map );
  65.  
  66.     var map_len=( 1
  67.     *   til_map.map_wid
  68.     *   til_map.map_hig
  69.     *   til_map.map_com
  70.     );;
  71.  
  72.     til_map.map_u8a= new Uint8Array( map_len );
  73.     FillTilemapWithTestPattern( til_map );
  74.  
  75.     return( til_map );
  76. };;
  77.  
  78. //://////////////////////////////////////////////////////////://
  79.  
  80. //: Main function to execute once all script is loaded:
  81. function main(){
  82.  
  83.     //: Create a [ can / canvas ]:
  84.     var can = attachCanvasToDom();
  85.  
  86.     //:Has pixel putting and getting functions:
  87.     var canvas_adapter =( NEW_CanvasAdapter( can ) );
  88.  
  89.     //:******************************************************://
  90.     //:******************************************************://
  91.     //:******************************************************://
  92.     //:******************************************************://
  93.  
  94.     //: REC_MAP --> BUF_VEW, upgrades:
  95.     //: 1. Still mapping one viewport to another.
  96.     //: 2. Source viewport samples from off-screen bitmap.
  97.     //: 3. Off screen pixel values will eventually be
  98.     //:    interpreted as tile values in future code tutorials.
  99.  
  100.     var til_map = GLOBAL_DATA.til_map;
  101.  
  102.     var rec_src = GLOBAL_DATA.rec_vp1; //: [vp1|vp2|vp3]
  103.     var rec_dst = GLOBAL_DATA.rec_vp0;
  104.     DoMapping(
  105.         canvas_adapter //: <--- rec_dst puts here.
  106.     ,   til_map //:<----------- rec_src takes from here.
  107.     ,   rec_src //:source______rectangle
  108.     ,   rec_dst //:destination_rectangle
  109.     );;
  110.  
  111.     //:******************************************************://
  112.     //:******************************************************://
  113.     //:******************************************************://
  114.     //:******************************************************://
  115. };;
  116. //://////////////////////////////////////////////////////////://
  117.  
  118.     //:Read data off of til_map using rec_dst
  119.     //:and then write to canvas_adapter using rec_src.
  120.     function DoMapping(
  121.         canvas_adapter
  122.     ,   til_map
  123.     ,   rec_src //:source______rectangle
  124.     ,   rec_dst //:destination_rectangle
  125.     ){
  126.         //://////////////////////////////////////////////////://
  127.         if(!canvas_adapter){ throw("[2020_05_07:300PM:A]"); };
  128.         if(!til_map       ){ throw("[2020_05_07:300PM:B]"); };
  129.         if(!rec_src       ){ throw("[2020_05_07:300PM:C]"); };
  130.         if(!rec_dst       ){ throw("[2020_05_07:300PM:D]"); };
  131.         if( rec_src === rec_dst ){
  132.             throw("[Rectangle_Objects_Are_Identical]");
  133.         };;
  134.         //://////////////////////////////////////////////////://
  135.  
  136.         var rgb_black=[0,0,0,255];
  137.         var rgb=[1,2,3,4];//:rgba
  138.  
  139.         //:SOURCE:
  140.         var sx0 = rec_src.x_0;
  141.         var sx1 = rec_src.x_1;
  142.         var sy0 = rec_src.y_0;
  143.         var sy1 = rec_src.y_1;
  144.  
  145.         //:DEST:
  146.         var dx0 = rec_dst.x_0;
  147.         var dx1 = rec_dst.x_1;
  148.         var dy0 = rec_dst.y_0;
  149.         var dy1 = rec_dst.y_1;
  150.  
  151.         //:Rather than just looping over every pixel of
  152.         //:destination viewport, we will loop through every
  153.         //:pixel of canvas and draw a BLACK pixel if the
  154.         //:point is outside of the viewport to create a
  155.         //:letter-boxing effect.
  156.         var cx0 = 0;
  157.         var cy0 = 0;
  158.         var cx1 = canvas_adapter.GetWid() - 1;
  159.         var cy1 = canvas_adapter.GetHig() - 1;
  160.    
  161.  
  162.         //:Loop through every pixel of CANVAS
  163.         //:instead of every pixel of destination
  164.         //:viewport.
  165.         for(var d_x = cx0; d_x <= cx1; d_x++){
  166.         for(var d_y = cy0; d_y <= cy1; d_y++){
  167.  
  168.             var outside_destination_viewport=( true );
  169.             if( d_x >= rec_dst.x_0 ){ //:LEFT
  170.             if( d_x <= rec_dst.x_1 ){ //:RIGT
  171.             if( d_y >= rec_dst.y_0 ){ //:TOP
  172.             if( d_y <= rec_dst.y_1 ){ //:BOT
  173.                 outside_destination_viewport=( false );
  174.             };;};;};;};;
  175.  
  176.             if( outside_destination_viewport ){
  177.                 canvas_adapter.PutPix(d_x,d_y,rgb_black);
  178.             }else{
  179.              
  180.                 //: Percentages (dpx & spy):
  181.                 //: dpx = (d_x - dx0) / ( dx1 - dx0 )
  182.                 //: spx = (s_x - sx0) / ( sx1 - sx0 )
  183.        
  184.                 //:........................SOLVE_FOR
  185.                 //:..........................|||
  186.                 //:..........................VVV
  187.                 //: (d_x-dx0)/(dx1-dx0) === (s_x-sx0)/(sx1-sx0)
  188.                 //:((d_x-dx0)/(dx1-dx0))*(sx1-sx0) === s_x-sx0
  189.                 //:(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0 === s_x
  190.  
  191.                 var s_x =(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0;
  192.                 var s_y =(((d_y-dy0)/(dy1-dy0))*(sy1-sy0))+sy0;
  193.  
  194.                 s_x = Math.floor( s_x );
  195.                 s_y = Math.floor( s_y );
  196.                
  197.                 //:canvas_adapter.GetPix(s_x,s_y,rgb);
  198.                 //://////////////////////////////////////////://
  199.  
  200.                 //:Convert XY to index:
  201.                 var wid = til_map.map_wid;
  202.                 var com = til_map.map_com;
  203.                 var dex = ( (s_y*com) * wid) + (s_x*com);
  204.                
  205.                 rgb[ 0 ] = til_map.map_u8a[dex+0];
  206.                 rgb[ 1 ] = til_map.map_u8a[dex+1];
  207.                 rgb[ 2 ] = til_map.map_u8a[dex+2];
  208.                 rgb[ 3 ] = til_map.map_u8a[dex+3];
  209.  
  210.                 //://////////////////////////////////////////://
  211.  
  212.                 canvas_adapter.PutPix(d_x,d_y,rgb);
  213.  
  214.             };; //:[ outside_destination_viewport ? ]
  215.         };;};; //:Next[ d_x , d_y ]
  216.  
  217.         canvas_adapter.Apply();
  218.  
  219.     };;//://///////////////////////////////////////:DoMapping://
  220.  
  221. //://////////////////////////////////////////////////////////://
  222. function attachCanvasToDom(){
  223.     //:C: [ can / canvas ] Creation:
  224.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  225.     //:Create Canvas and append to body: ------------------- ://
  226.  
  227.     var can = document.createElement('canvas');
  228.     document.body.appendChild(can);
  229.  
  230.     //: Make canvas non-zero in size, so we can see it:
  231.     can.width = GLOBAL_DATA.initial_canvas_wid;
  232.     can.height= GLOBAL_DATA.initial_canvas_hig;
  233.  
  234.     //: Get the context, fill [ can / canvas ] to get visual:
  235.     var ctx = can.getContext("2d");
  236.     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  237.     ctx.fillRect(0,0,can.width, can.height);
  238.  
  239.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  240.    
  241.     //:Return the canvas that was created:
  242.     return( can );
  243. };;
  244.  
  245. //://////////////////////////////////////////////////////////://
  246.  
  247. function NEW_CanvasAdapter( can ){
  248.  
  249.     var canvas_adapter =( new CanvasAdapterClass( can ) );
  250.     return( canvas_adapter );
  251.  
  252. };;
  253.  
  254. //://////////////////////////////////////////////////////////://
  255.  
  256. //:Canvas Adapter Class:
  257. function CanvasAdapterClass( can /** canvas **/ ){
  258.  
  259.     var self=( this );
  260.    
  261.     //Publicly Exposed Functions
  262.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  263.  
  264.     this.PutPix = _putPix;
  265.     this.GetPix = _getPix;
  266.  
  267.     this.GetWid = _getWid;
  268.     this.GetHig = _getHig;
  269.  
  270.     this.Apply  = _apply;
  271.  
  272.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  273.    
  274.     if(!can){
  275.         throw("[NilCanvasGivenToPenConstruct:2020_05_06]");
  276.     };;
  277.  
  278.     function _constructor( canvas_adapter /** self **/ ){
  279.         //://////////////////////////////////////////////////://
  280.         //: Setup inclusive bounds:
  281.         var x0 = 0;
  282.         var x1 = can.width - 1;
  283.  
  284.         var y0 = 0;
  285.         var y1 = can.height -1;
  286.  
  287.         //: Iterate over entire [can / canvas], and set pixels:
  288.         var rgb=[1,2,3,4];
  289.         for(var x = x0; x <= x1; x++){
  290.         for(var y = y0; y <= y1; y++){
  291.             rgb[0]= x%256;
  292.             rgb[1]= y%256;
  293.             rgb[2]= (x+y)%256;
  294.             rgb[3]= 255;
  295.             canvas_adapter.PutPix( x, y, rgb );
  296.         };;};; //:next X/Y
  297.        
  298.         //: Show changes on screen:
  299.         canvas_adapter.Apply();
  300.  
  301.         //://////////////////////////////////////////////////://
  302.     };;
  303.    
  304.     var _can = can;
  305.     var _ctx = can.getContext("2d");
  306.    
  307.     //:Cache size of canvas and handles to internal data.
  308.     var _w      = _can.width;
  309.     var _h      = _can.height;
  310.     var img_dat = _ctx.createImageData(_w,_h); //: _絵資
  311.     var dat_dat = img_dat.data;                //: _筆
  312.  
  313.     function _putPix(x,y,inn_rgb /** rgb:[r,g,b,a] **/ ){
  314.        
  315.         //:Convert XY to index:
  316.         var dex = ( (y*4) * _w) + (x*4);
  317.        
  318.         dat_dat[dex+0]   = inn_rgb[0];
  319.         dat_dat[dex+1]   = inn_rgb[1];
  320.         dat_dat[dex+2]   = inn_rgb[2];
  321.         dat_dat[dex+3]   = inn_rgb[3];
  322.        
  323.     };;
  324.     function _getPix(x,y,out_rgb /** rgb:[r,g,b,a] **/ ){
  325.        
  326.         //:Convert XY to index:
  327.         var dex = ( (y*4) * _w) + (x*4);
  328.        
  329.         out_rgb[ 0 ] = dat_dat[dex+0];
  330.         out_rgb[ 1 ] = dat_dat[dex+1];
  331.         out_rgb[ 2 ] = dat_dat[dex+2];
  332.         out_rgb[ 3 ] = dat_dat[dex+3];
  333.     };;
  334.  
  335.     function _getWid(){ return( _w ); };
  336.     function _getHig(){ return( _h ); };
  337.    
  338.     function _apply(){
  339.         _ctx.putImageData( img_dat, 0,0 );  
  340.     };;
  341.  
  342.     _constructor( self );
  343. };;
  344. //://////////////////////////////////////////////////////////://
  345.  
  346. function FillTilemapWithTestPattern(
  347.     til_map
  348. ){
  349.     var num_pix =( 1
  350.     *   til_map.map_wid
  351.     *   til_map.map_hig
  352.     );;
  353.     if( til_map.map_com != 4 ){
  354.         throw("[LogicCodedFor4ComponentsPerPixel]");
  355.     };;
  356.  
  357.     for( var pix_dex = 0; pix_dex < num_pix; pix_dex++ ){
  358.  
  359.         var dex = ( pix_dex * til_map.map_com );
  360.  
  361.         var wid = til_map.map_wid    ;
  362.         var p_x =  pix_dex     % wid ;  
  363.         var p_y = (pix_dex-p_x)/ wid ;  
  364.  
  365.         per_x =( p_x / til_map.map_wid );
  366.         per_y =( p_y / til_map.map_hig );
  367.  
  368.         var R = Math.floor( per_x * 255 );
  369.         var G = Math.floor( per_y * 255 );
  370.         var B = ( p_x + p_y ) % 256;
  371.        
  372.         til_map.map_u8a[dex+0]   =   R; //:R
  373.         til_map.map_u8a[dex+1]   =   G; //:G
  374.         til_map.map_u8a[dex+2]   =   B; //:B
  375.         til_map.map_u8a[dex+3]   = 255; //:A
  376.     };;
  377. };;
  378. //://////////////////////////////////////////////////////////://
  379.  
  380.    
  381.             main();
  382.  
  383.  
  384. //://////////////////////////////////////////////////////////://
  385. //://///////////////////////////////////////:// </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!