diff options
Diffstat (limited to 'moneyjsx/src/ascii-art.tsx')
| -rw-r--r-- | moneyjsx/src/ascii-art.tsx | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/moneyjsx/src/ascii-art.tsx b/moneyjsx/src/ascii-art.tsx new file mode 100644 index 0000000..d2f53b3 --- /dev/null +++ b/moneyjsx/src/ascii-art.tsx @@ -0,0 +1,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 = ` + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # .. # # + # # .. # # + # # .### ### + # # ### ### .. + # # # # .... + # # # # .... + # # # # .. + # # # # + # # # # + .. ############################################## + ................................... ###.. ### ........... ### .........### + .................................. ####+############################################ + #######################################+# #.# + #####-# #.# + #################################### # # #.# + # # #.# + ######################################### #.#...................................... + ### #.#...............--..................... + ######################################### | ##################.###################### + # # ,---.. ,,---.,---.|---.,---.. , ### ### ###... + ################ ,---| >< | || || || | >< ################ ### #################### + ########################### .. ### \`---^' \`\`---'\` '\`---'\`---'' \` #.# ... ### ### + ################## #.# ... ####### + ######################### ... # # #.# . ################## + ############################. #.# #.# # # .............. + ###- #.# #-########################............... + ############################- # # #+# ...###...... ...... + .........................##############-# #-########################.... .. + .........................###. #-# #.# ....................... + ..............+########################################################## ...................... + .................###................... ### ### ...### .......... + .............. ############################################## + ....# #..... # # + ... ... # # # # + ................ # # # # + .................. # # # # + .......################## # # . + .....###### ### # # + ####+###################. # # + ######+ .............. # # + # # ................. # # + # # ...... # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # + # # # # +`; |