API tools faq
paste
Advertisement
CODE_TOLD_FAST

JS/REC_MAP.HTM

CODE_TOLD_FAST
May 8th, 2020
479
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML ><html lang="en"><head><title>
  2.  
  3.     REC_MAP
  4.  
  5. </title></head><body></body><script> //://///////////////////://
  6. //://////////////////////////////////////////////////////////://
  7.  
  8. function GetRectanglePackage( ){
  9.  
  10. //[   [0]: The target rectangle/viewport.                    ]//
  11. //[  [01]: Smaller rectangle to map onto [0].                ]//
  12. //[  [02]: Smaller rectangle to map onto [0].                ]//
  13. //[   [3]: Larger  rectangle to map onto [0].                ]//
  14. //[   SEE: DoMapping function for rectangle mapping logic.   ]//
  15.  
  16. //|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|//
  17. //|         0    8   16   24   32   40   48   56   64        |//
  18. //|         *    *    *    *    *    *    *    *    *        |//
  19. //|         |    '    '    '    |    '    '    '    |        |//
  20. //| 00  *-- +----+----+----+----+----+----+----+----+ --*    |//
  21. //|         |    |    |    |    |    |    |    |    |        |//
  22. //| 08  *-- +----+----+----+----+----+----+----+----+        |//
  23. //|         |    |    |    |    |    |    |[02]|    |        |//
  24. //| 16  *-- +----+----+----+----+----+----+----+----+        |//
  25. //|         |    |         |                   |    |        |//
  26. //| 24  *-- +----+   [0]   +                   +----+        |//
  27. //|         |    |         |                   |    |        |//
  28. //| 32  *-- +----+----+----+        [3]        +----+ --*    |//
  29. //|         |    |    |    |                   |    |        |//
  30. //| 40  *-- +----+----+----+                   +----+        |//
  31. //|         |    |    |    |                   |    |        |//
  32. //| 48  *-- +----+----+----+----+----+----+----+----+        |//
  33. //|         |    |[01]|    |    |    |    |    |    |        |//
  34. //| 56  *-- +----+----+----+----+----+----+----+----+        |//
  35. //|         |    |    |    |    |    |    |    |    |        |//
  36. //| 64  *-- +----+----+----+----+----+----+----+----+ --*    |//
  37. //|         |                   |                   |        |//
  38. //|         *                   *                   *        |//
  39. //|__________________________________________________________|//
  40.  
  41.         var scale_factor =( 10 );
  42.  
  43.         //: [0]: INPUT VIEWPORT:
  44.         var rec_vp0 ={
  45.             x_0 : ( 8      ) * scale_factor
  46.         ,   y_0 : ( 16     ) * scale_factor
  47.         ,   x_1 : ( 24 - 1 ) * scale_factor
  48.         ,   y_1 : ( 32 - 1 ) * scale_factor
  49.         };; Object.seal( rec_vp0 );
  50.  
  51.         //: [1]: INPUT VIEWPORT:
  52.         var rec_vp1 ={
  53.             x_0 : ( 8      ) * scale_factor
  54.         ,   y_0 : ( 48     ) * scale_factor
  55.         ,   x_1 : ( 16 - 1 ) * scale_factor
  56.         ,   y_1 : ( 56 - 1 ) * scale_factor
  57.         };;Object.seal( rec_vp1 );
  58.  
  59.         //: [2]: INPUT VIEWPORT:
  60.         var rec_vp2 ={
  61.             x_0 : ( 48     ) * scale_factor
  62.         ,   y_0 : (  8     ) * scale_factor
  63.         ,   x_1 : ( 56 - 1 ) * scale_factor
  64.         ,   y_1 : ( 16 - 1 ) * scale_factor
  65.         };;Object.seal( rec_vp2 );
  66.        
  67.         //: [3]: INPUT VIEWPORT:
  68.         var rec_vp3 ={
  69.             x_0 : ( 24     ) * scale_factor
  70.         ,   y_0 : ( 16     ) * scale_factor
  71.         ,   x_1 : ( 56 - 1 ) * scale_factor
  72.         ,   y_1 : ( 48 - 1 ) * scale_factor
  73.         };;Object.seal( rec_vp3 );
  74.  
  75.         var rec_pak ={
  76.             rec_vp0 : rec_vp0
  77.         ,   rec_vp1 : rec_vp1
  78.         ,   rec_vp2 : rec_vp2
  79.         ,   rec_vp3 : rec_vp3
  80.         };;Object.seal( rec_pak );
  81.  
  82.     return( rec_pak );
  83. };;
  84. //://////////////////////////////////////////////////////////://
  85.  
  86. //: Main function to execute once all script is loaded:
  87. function main(){
  88.  
  89.     //: Create a [ can / canvas ]:
  90.     var can = attachCanvasToDom();
  91.  
  92.     //:Has pixel putting and getting functions:
  93.     var canvas_adapter =( NEW_CanvasAdapter( can ) );
  94.  
  95.     //:Some rectangles we want to map onto each other:
  96.     var rec_pak = GetRectanglePackage( );
  97.  
  98.     //: Verify viewport regions:
  99.     ViewportFillTest( canvas_adapter, rec_pak );
  100.  
  101.     //: Fill viewports with test pattern:
  102.     FillViewportWithTestPattern(
  103.         canvas_adapter
  104.     ,   rec_pak.rec_vp1 /** bou_rec **/
  105.     );;
  106.     FillViewportWithTestPattern(
  107.         canvas_adapter
  108.     ,   rec_pak.rec_vp2 /** bou_rec **/
  109.     );;
  110.     FillViewportWithTestPattern(
  111.         canvas_adapter
  112.     ,   rec_pak.rec_vp3 /** bou_rec **/
  113.     );;
  114.  
  115.     //:******************************************************://
  116.     //:******************************************************://
  117.     //:******************************************************://
  118.     //:******************************************************://
  119.  
  120.     //: NOTICE ME!
  121.     //: Map viewport 2 (rec_vp2) onto viewport 0 (rec_vp0)
  122.  
  123.     var rec_src = rec_pak.rec_vp2; //: [vp1|vp2|vp3]
  124.     var rec_dst = rec_pak.rec_vp0;
  125.     DoMapping(
  126.         canvas_adapter
  127.     ,   rec_src //:source______rectangle
  128.     ,   rec_dst //:destination_rectangle
  129.     );;
  130.  
  131.     //:******************************************************://
  132.     //:******************************************************://
  133.     //:******************************************************://
  134.     //:******************************************************://
  135. };;
  136. //://////////////////////////////////////////////////////////://
  137.  
  138.     function DoMapping(
  139.         canvas_adapter
  140.     ,   rec_src //:source______rectangle
  141.     ,   rec_dst //:destination_rectangle
  142.     ){
  143.  
  144.         //:SOURCE:
  145.         var sx0 = rec_src.x_0;
  146.         var sx1 = rec_src.x_1;
  147.         var sy0 = rec_src.y_0;
  148.         var sy1 = rec_src.y_1;
  149.  
  150.         //:DEST:
  151.         var dx0 = rec_dst.x_0;
  152.         var dx1 = rec_dst.x_1;
  153.         var dy0 = rec_dst.y_0;
  154.         var dy1 = rec_dst.y_1;
  155.  
  156.         var rgb=[1,2,3,4];//:rgba
  157.    
  158.         //:Iterate over each pixel of viewport:
  159.         for(var d_x = dx0; d_x <= dx1; d_x++){
  160.         for(var d_y = dy0; d_y <= dy1; d_y++){
  161.  
  162.             //: Percentages (dpx & spy):
  163.             //: dpx = (d_x - dx0) / ( dx1 - dx0 )
  164.             //: spx = (s_x - sx0) / ( sx1 - sx0 )
  165.    
  166.             //:........................SOLVE_FOR
  167.             //:..........................|||
  168.             //:..........................VVV
  169.             //: (d_x-dx0)/(dx1-dx0) === (s_x-sx0)/(sx1-sx0)
  170.             //:((d_x-dx0)/(dx1-dx0))*(sx1-sx0) === s_x-sx0
  171.             //:(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0 === s_x
  172.  
  173.             var s_x =(((d_x-dx0)/(dx1-dx0))*(sx1-sx0))+sx0;
  174.             var s_y =(((d_y-dy0)/(dy1-dy0))*(sy1-sy0))+sy0;
  175.  
  176.             s_x = Math.floor( s_x );
  177.             s_y = Math.floor( s_y );
  178.            
  179.             canvas_adapter.GetPix(s_x,s_y,rgb);
  180.             canvas_adapter.PutPix(d_x,d_y,rgb);;
  181.  
  182.         };;};;
  183.  
  184.         canvas_adapter.Apply();
  185.    
  186.     };;
  187.  
  188. //://////////////////////////////////////////////////////////://
  189. function attachCanvasToDom(){
  190.     //:C: [ can / canvas ] Creation:
  191.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  192.     //:Create Canvas and append to body: ------------------- ://
  193.  
  194.     var can = document.createElement('canvas');
  195.     document.body.appendChild(can);
  196.  
  197.     //: Make canvas non-zero in size, so we can see it:
  198.     can.width = 640;
  199.     can.height= 640;
  200.  
  201.     //: Get the context, fill [ can / canvas ] to get visual:
  202.     var ctx = can.getContext("2d");
  203.     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  204.     ctx.fillRect(0,0,can.width, can.height);
  205.  
  206.     //:CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC://
  207.    
  208.     //:Return the canvas that was created:
  209.     return( can );
  210. };;
  211.  
  212. //://////////////////////////////////////////////////////////://
  213.  
  214. function NEW_CanvasAdapter( can ){
  215.  
  216.     var canvas_adapter =( new CanvasAdapterClass( can ) );
  217.     return( canvas_adapter );
  218.  
  219. };;
  220.  
  221. //://////////////////////////////////////////////////////////://
  222.  
  223. //:Canvas Adapter Class:
  224. function CanvasAdapterClass( can /** canvas **/ ){
  225.  
  226.     var self=( this );
  227.    
  228.     //Publicly Exposed Functions
  229.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  230.  
  231.     this.PutPix = _putPix;
  232.     this.GetPix = _getPix;
  233.  
  234.     this.Apply  = _apply;
  235.  
  236.     //:PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE://
  237.    
  238.     if(!can){
  239.         throw("[NilCanvasGivenToPenConstruct:2020_05_06]");
  240.     };;
  241.  
  242.     function _constructor( canvas_adapter /** self **/ ){
  243.         //://////////////////////////////////////////////////://
  244.         //: Setup inclusive bounds:
  245.         var x0 = 0;
  246.         var x1 = can.width - 1;
  247.  
  248.         var y0 = 0;
  249.         var y1 = can.height -1;
  250.  
  251.         //: Iterate over entire [can / canvas], and set pixels:
  252.         var rgb=[1,2,3,4];
  253.         for(var x = x0; x <= x1; x++){
  254.         for(var y = y0; y <= y1; y++){
  255.             rgb[0]= x%256;
  256.             rgb[1]= y%256;
  257.             rgb[2]= (x+y)%256;
  258.             rgb[3]= 255;
  259.             canvas_adapter.PutPix( x, y, rgb );
  260.         };;};; //:next X/Y
  261.        
  262.         //: Show changes on screen:
  263.         canvas_adapter.Apply();
  264.  
  265.         //://////////////////////////////////////////////////://
  266.     };;
  267.    
  268.     var _can = can;
  269.     var _ctx = can.getContext("2d");
  270.    
  271.     //:Cache size of canvas and handles to internal data.
  272.     var _w      = _can.width;
  273.     var _h      = _can.height;
  274.     var img_dat = _ctx.createImageData(_w,_h); //: _絵資
  275.     var dat_dat = img_dat.data;                //: _筆
  276.  
  277.     function _putPix(x,y,inn_rgb /** rgb:[r,g,b,a] **/ ){
  278.        
  279.         //:Convert XY to index:
  280.         var dex = ( (y*4) * _w) + (x*4);
  281.        
  282.         dat_dat[dex+0]   = inn_rgb[0];
  283.         dat_dat[dex+1]   = inn_rgb[1];
  284.         dat_dat[dex+2]   = inn_rgb[2];
  285.         dat_dat[dex+3]   = inn_rgb[3];
  286.        
  287.     };;
  288.     function _getPix(x,y,out_rgb /** rgb:[r,g,b,a] **/ ){
  289.        
  290.         //:Convert XY to index:
  291.         var dex = ( (y*4) * _w) + (x*4);
  292.        
  293.         out_rgb[ 0 ] = dat_dat[dex+0];
  294.         out_rgb[ 1 ] = dat_dat[dex+1];
  295.         out_rgb[ 2 ] = dat_dat[dex+2];
  296.         out_rgb[ 3 ] = dat_dat[dex+3];
  297.     };;
  298.    
  299.     function _apply(){
  300.         _ctx.putImageData( img_dat, 0,0 );  
  301.     };;
  302.  
  303.     _constructor( self );
  304. };;
  305. //://////////////////////////////////////////////////////////://
  306. function FillViewportWithTestPattern(
  307.     canvas_adapter
  308. ,   bou_rec
  309. ){
  310.     var d_x =Math.abs( bou_rec.x_1 - bou_rec.x_0 );
  311.     var d_y =Math.abs( bou_rec.y_1 - bou_rec.y_0 );
  312.     var out_rad =(    Math.min( d_x , d_y )   )/2;
  313.     var inn_rad =( out_rad / 4 );
  314.  
  315.     //:Center of viewport:
  316.     var c_x = ( bou_rec.x_0 + bou_rec.x_1 ) / 2;
  317.     var c_y = ( bou_rec.y_0 + bou_rec.y_1 ) / 2;
  318.  
  319.     var rgb=[1,2,3,4];
  320.  
  321.     //:Iterate over each pixel of viewport:
  322.     for(var x = bou_rec.x_0; x <= bou_rec.x_1; x++){
  323.     for(var y = bou_rec.y_0; y <= bou_rec.y_1; y++){
  324.         //:Current pixel's distance from center of viewport:
  325.         var dst = Math.sqrt(
  326.             Math.pow( c_x - x , 2 )
  327.             +
  328.             Math.pow( c_y - y , 2 )
  329.         );;
  330.         //: If point is inside [ ring / tube ],color.
  331.         if( inn_rad <= dst&&dst <= out_rad ){
  332.        
  333.             rgb[0] = ( x < c_x ) ? 32 : 128;
  334.             rgb[1] = ( y < c_y ) ? 32 : 128;
  335.             rgb[2] = ( dst * 16 ) % 256;
  336.             rgb[3] = ( 255 ); //:FullOpacity.
  337.  
  338.             canvas_adapter.PutPix( x, y, rgb );
  339.         };;
  340.     };;};; //:next X/Y
  341.  
  342.     canvas_adapter.Apply();
  343. };;
  344. //://////////////////////////////////////////////////////////://
  345. function ViewportFillTest(
  346.     canvas_adapter
  347. ,   rec_pak
  348. ){
  349. "use strict"
  350.  
  351.     if(!canvas_adapter){ throw("[INPUT:NULL_CANVAS_ADAPTER]");};
  352.     if(!rec_pak       ){ throw("[INPUT:NULL:rec_pak]"); };
  353.    
  354.     for( var pro_nam  in  rec_pak /**collection**/ ){
  355.  
  356.         var bou_rec = rec_pak[ pro_nam ];
  357.    
  358.         //: Setup inclusive bounds:
  359.         var x_0 = bou_rec.x_0;
  360.         var x_1 = bou_rec.x_1;
  361.        
  362.         var y_0 = bou_rec.y_0;
  363.         var y_1 = bou_rec.y_1;
  364.  
  365.         var rgb=[128,128,128,255];
  366.        
  367.         //: Iterate over entire [can / canvas], and set pixels:
  368.         for(var x = x_0; x <= x_1; x++){
  369.         for(var y = y_0; y <= y_1; y++){
  370.             canvas_adapter.PutPix(x,y,rgb);
  371.         };;};; //:next X/Y
  372.     };;//:next[ bou_rec ]
  373.  
  374.     //: Show changes on screen:
  375.     canvas_adapter.Apply();
  376. };;
  377. //://////////////////////////////////////////////////////////://
  378.  
  379.    
  380.             main();
  381.  
  382.  
  383. //://////////////////////////////////////////////////////////://
  384. //://///////////////////////////////////////:// </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!