夏樹の時間

なりきる、なったつもりで

aaa.js

Animated ASCII Art with Audio

Bad Apple!!

Bad Apple!! *demo

Checkout the source


Code

<!DOCTYPE html>
<html>
<head>
  ......
  <link rel="stylesheet" href="assets/css/aaa.css">
  <script src="assets/js/aaa.js"></script>
</head>
<body>
  ......
  <div class="aaa-js">
    <pre data-src="media/240p.json" data-fps="30" data-sizes="320x240"></pre>
    <pre data-src="media/480p.json" data-fps="30" data-sizes="640x480"></pre>
    <audio>
      <source src="media/audio.oga" type="audio/ogg">
      <source src="media/audio.mp3" type="audio/mpeg">
    </audio>
  </div>
  ......
</body>
</html>

How it works

  1. Detect all element with class aaa-js
  2. Load
    • If audio is presented, it will load by browser
    • If multi videos(json) are presented, load the last one smaller than window
  3. Playback
    • If audio is available, video will sync with audio
    • If audio is not available, video will play frame by frame

The Making of Animated ASCII Art

Convert video to Animated ASCII Art

If you are familiar with creating Animated ASCII Art, you can DIY! Just put every frame into txt file one by one.

Tools

Example

#!/bin/bash

mplayer -nosound -vo png:z=9 source.mp4
# Use MPlayer to convert video to PNG

for i in $(ls *.png); do
  echo "$(basename $i .png)"

  convert "$i" "$(basename $i .png).pgm" && rm "$i"
  # Convert PNG to PGM with ImageMagick

  echo -e "s1\b\b80\n\b\b60\n$(basename $i .png)\n18nq" | aview -kbddriver stdin -driver stdout "$(basename $i .png).pgm" > /dev/null && rm "$(basename $i .png).pgm"
  # Generate ASCII Art with `aview`
done

Convert Animated ASCII Art to JSON

Here is an example writen in CoffeeScript and using node.js

fs = require "fs"

source_path = "./"
txts = fs.readdirSync(source_path).filter( (x) -> ".txt" is x.substr -4 ).sort()
results = for txt in txts
  fs.readFileSync("#{source_path}#{txt}").toString()
fs.writeFileSync "output.json", JSON.stringify results

Finally

Do you remember what YouTube said?

TEXTp saves bandwidth

It’s TRUE!