BecASCII/index.html at master · kodie/BecASCII · GitHub

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
<!doctype html>
<html>
  <head>
    <title>BecASCII &lt;3</title>
    <style type="text/css">
      * {
        font-family: monospace;
        font-size: 7px;
        margin: 0;
        padding: 0;
      }
      #main {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .loading, .error {
        font-size: 32px;
      }
    </style>
    <script type="text/javascript" src="https://rawcdn.githack.com/mir3z/aalib.js/f5db370b2a512660d273b42267b06a2878671fc3/dist/aalib.js"></script>
    <script type="text/javascript" src="images.js"></script>
    <script type="text/javascript">
      function getFontCharPx(innerHTML, fontFamily, fontSize, element) {
        if (!(element instanceof Element)) {
          element = document.createElement(element || 'pre')
        }

        if (!innerHTML) innerHTML = 'X'
        if (fontFamily) element.style.fontFamily = fontFamily
        if (fontSize) element.style.fontSize = fontSize

        element.style.visibility = 'hidden'
        element.style.position = 'absolute'
        element.style.left = 0
        element.style.top = 0
        element.style.padding = 0
        element.style.margin = 0
        element.innerHTML = innerHTML

        document.body.appendChild(element)

        var rect = element.getBoundingClientRect()
        var width = rect.width
        var height = rect.height

        document.body.removeChild(element)

        return { width, height }
      }

      function generateBecASCII() {
        var charSize = getFontCharPx()
        var imageCount = images.length
        var index = Math.floor(Math.random() * imageCount)
        var image = images[index]
        var windowWidth = window.innerWidth
        var windowHeight = window.innerHeight
        var ratio = Math.min(windowWidth / image.width, windowHeight / image.height)
        var width = Math.round((image.width * ratio) / charSize.width)
        var height = Math.round((image.height * ratio) / charSize.height)

        console.log({ charSize, width, height, ratio, index, image, imageCount, windowWidth, windowHeight })

        aalib.read.image.fromURL(image.url)
          .map(aalib.filter.contrast(0.7))
          .map(aalib.aa({
            width,
            height,
            colored: true
          }))
          .map(aalib.filter.brightness(10))
          .map(aalib.render.html({
            charset: aalib.charset.SIMPLE_CHARSET,
            el: document.getElementById('main'),
            fontFamily: 'monospace',
            fontSize: '7px'
          }))
          .subscribe()
      }

      window.onload = function (e) {
        generateBecASCII()
      }

      window.onerror = function (err) {
        var main = document.getElementById('main')
        var span = document.createElement('span')

        span.className = 'error'
        span.innerHTML = 'Uh oh, an error occured :('
        main.innerHTML = ''

        main.appendChild(span)
      }
    </script>
  </head>
  <body>
    <pre id="main">
      <span class="loading">Loading BecASCII &lt;3...</span>
    </pre>
  </body>
</html>