Ahren LOOK

Javascript in the browser. Neat-o.

by asemahle

HTML

<div class="viewport"></div>

<br>Mouse Over the Control Pad O_O!

<div class="row">
  <div class="col up left"></div>
  <div class="col up"></div>
  <div class="col up right"></div>
</div>
<div class="row">
  <div class="col left"></div>
  <div class="col black"></div>
  <div class="col right"></div>
</div>
<div class="row">
  <div class="col down left"></div>
  <div class="col down"></div>
  <div class="col down right"></div>
</div>

CSS

* {
    box-sizing: border-box;
}

div.viewport {
  font-family: monospace, monospace;
  font-size:0.5em;
}

div.row {
  height: 50px;
  width: 150px;
}

div.col { 
  transition: background 0.5s linear;
  width: 33.33%;
  border: 1px solid;
  height: 100%;
  float: left; 
}

div.col:hover, div.black  {
  background-color: #000;
}

JavaScript

$(document).ready(function() {
  var width = 
      "                                                      ".length;
  var text =
      "                                                      " +
      "                                                      " +
      "                                                      " +
      "              ##  #  # ###  #### #   # ##             " +
      "             #  # #  # #  # #    ##  # ##             " +
      "             #### #### ###  #### # # # ##             " +
      "             #  # #  # #  # #    #  ##                " +
      "             #  # #  # #  # #### #   # ##             " +
      "                                                      " +
      "                                                      " +
  	  "                                                      ";
  var offset = [];
  for (var i = 0; i < text.length; i++) {
    offset.push(i);
  }
  
  timerFunc(true);
  
  setInterval(timerFunc, 100);
  
  function timerFunc(forceRender) {
    var divString = '';
    var left = $(".left:hover").length;
    var right = $(".right:hover").length;
    var up = $(".up:hover").length;
    var down = $(".down:hover").length;
    
    if (!left && !right && !up && !down && !forceRender) {
      return;
    }
        
    for (var i = 0; i < text.length; i++) {
      if (i % width === 0) {
        divString += "<br/>";
      }
			
      if (left)  { offset[i] = (mod((offset[i] + 1), width)) + ((offset[i]/width|0) * width); }
      if (right) { offset[i] = (mod((offset[i] - 1), width)) + ((offset[i]/width|0) * width); }
      if (up)    { offset[i] = (offset[i] + 1 * width); }
      if (down)  { offset[i] = (offset[i] - 1 * width); }
      offset[i] = mod(offset[i], text.length);
      
      if (text[offset[i]] === ' ') {
        divString += "&nbsp";
      } else if (text[offset[i]] === "#") {
        divString += "&block;"
      } else {
        divString += text[offset[i]];
      }
    }
   ...