moneyjsx/src/ascii-art.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

import * as JSX from "./jsx";
import $ from "jquery";

export default function AsciiArt() {
  const ret = <div id="ascii-art">
    { asciiArtStr }
  </div>;

  setTimeout( doAsciiArt );
  return ret;
}

let startTime = 0.0;
let anim = 0.0;

function animFunc( a: number ) {
  let ringRadius = anim;
  let radius = a;

  let dist = ringRadius - radius;

  dist = Math.abs( dist );

  let ret = Math.pow( dist, 0.1 + 0.8 * Math.pow( (anim + 0.5) / 2, 1.6 ) );
  let remain = ret % 0.12;
  return ret - remain;
}

function hexToRgb( hex: string ) {
  let r = parseInt( hex.slice( 1, 3 ), 16 );
  let g = parseInt( hex.slice( 3, 5 ), 16 );
  let b = parseInt( hex.slice( 5, 7 ), 16 );
  return [ r, g, b ];
}

function lerpColor( c1: number[], c2: number[], t: number ) {
  let r1 = c1[0], g1 = c1[1], b1 = c1[2];
  let r2 = c2[0], g2 = c2[1], b2 = c2[2];
  let r = r1 + ( r2 - r1 ) * t;
  let g = g1 + ( g2 - g1 ) * t;
  let b = b1 + ( b2 - b1 ) * t;
  return [ Math.round( r ), Math.round( g ), Math.round( b ) ];
}

function getDist( x: number, y: number ) {
  const x1 = 0.5 - x / 125;
  const y1 = 0.5 - y / 63;
  return Math.sqrt( x1 * x1 + y1 * y1 );
}

let isDoingAnim = false;
function doAsciiArt() {
  let div = $( "#ascii-art" );
  if( !div.length ) { isDoingAnim = false; return; }
  isDoingAnim = true;

  let deltaTime = ( Date.now() - startTime ) * 0.001;
  startTime = Date.now();
  anim += .5 * deltaTime;

  if( anim > 2 )
    anim = -0.5;

  let rootColor = hexToRgb( $( ':root' ).css( '--front' ) );
  let innerStr = "";
  for( let i = 0; i < asciiArtStr.length; ++i ) {
    let x = i % 125;
    let y = Math.floor( i / 125 );

    if( x == 124 ) {
      continue;
    }
    if( asciiArtStr[i] == ',' || asciiArtStr[i] == ' ' || asciiArtStr[i] == '\t' ) {
      innerStr += asciiArtStr[i];
      continue;
    }

    let dist = getDist( x, y );
    if( dist < 0.133 ) {
      innerStr += asciiArtStr[i];
      continue;
    }

    let color = [];
    if( asciiArtStr[i] == '#' ) {
      let a = animFunc( dist * 2 );
      color = lerpColor( rootColor, [255, 255, 255, 1], a );
      color[3] = Math.max( Math.min( 1, Math.pow( dist, 2 ) + (1.0 - a) ), 0.8 );
    }
    else {
      color = [255, 255, 255, Math.max( 0.05, 1.0 - animFunc( (dist - 0.1) * 2 ) ) ];
    }
    // appending string is faster than jsx
    innerStr += `<span style='color: rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})'>${asciiArtStr[i]}</span>`;
  }

  div.html( innerStr );
  setTimeout( doAsciiArt, 75 );
}

const asciiArtStr = `
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                      # #                                                   
                                             # #                 ..   # #                                                   
                                             # #                ..    # #                                                   
                                             # #                .###  ###                                                   
                                             # #                 ###  ### ..                                                
                                             # #                 # #   ....                                                 
                                             # #                 # #  ....                                                  
                                             # #                 # #   ..                                                   
                                             # #                 # #                                                        
                                             # #                 # #                                                        
                                 ..    ##############################################                                       
 ...................................   ###.. ###   ...........   ###     .........###                                       
 .................................. ####+############################################                                       
 #######################################+#                                        #.#                                       
                                   #####-#                                        #.#                                       
 ####################################  # #                                        #.#                                       
                                       # #                                        #.#                                       
 #########################################                                        #.#...................................... 
                                       ###                                        #.#...............--..................... 
 #########################################                       |                ##################.###################### 
                                       # #    ,---..  ,,---.,---.|---.,---..  ,   ###            ### ###...                 
                          ################    ,---| >< |   ||   ||   ||   | ><    ################ ### #################### 
 ###########################       ..  ###    \`---^'  \`\`---'\`   '\`---'\`---''  \`   #.#     ...    ### ###                    
                        ##################                                        #.#        ... #######                    
 #########################         ... # #                                        #.#              .     ################## 
 ############################.         #.#                                        #.#                    # # .............. 
                          ###-         #.#                                        #-########################............... 
 ############################-         # #                                        #+#                 ...###......   ...... 
 .........................##############-#                                        #-########################.... ..         
 .........................###.         #-#                                        #.#   .......................             
            ..............+##########################################################  ......................               
                      .................###...................    ###      ###  ...###        ..........                     
                        .............. ##############################################                                       
                                                             ....# #..... # #                                               
                                                      ...    ... # #      # #                                               
                                                ................ # #      # #                                               
                                             ..................  # #      # #                                               
                                           .......##################      # #   .                                           
                                         .....######             ###      # #                                               
                                            ####+###################.     # #                                               
                                            ######+    ..............     # #                                               
                                            # #    .................      # #                                               
                                            # #            ......         # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
                                            # #                           # #                                               
`;