ascii nate: anna

Generate UTF-8 Art. Upload your own picture (it will be downsampled to 72 pixels wide).

Try changing the inputs of the scale, since the initial values are Chinese, you'll need to replace all of them if you are using ASCII for the image to line up.

You can double click on the scale to add a new value. Try dragging the numbers around to see how the image is affected by the scale.

Built with blockbuilder.org

forked from enjalot's block: ascii nate: dark

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="scaler.js"></script>
  <script src="downscale.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    
    p {
      margin: 0;
      padding: 0;
      display: inline-block;
      float:left;
    }
    #ascii {
      margin: 10px;
      font-size: 7px;
      font-family: 'Courier New', monospace;
      letter-spacing: 2px;
      line-height: 6.75px; 
      font-weight: bold;
    }
    #file {
      margin-left: 30px;
    }

</style>
</head>

<body>
  <div id="container">
  <pre id="ascii">
  </pre>
</div>
  <input id="file" type="file" name="files[]">
  <img id="preview" style="display:none">
  
  <script>
    d3.json("nate.json", function(err, nate) {
      var targetWidth = 72;
      
      var display = d3.select("body");

var scale = d3.scale.linear()
      .domain([0, 50, 100, 150, 200, 255])
      .range(["n", "a", "D", "A", "N", "3"])

var scaler = d3.scaler()
      .scale(scale);
      var container = display.append("div")
      .attr("id", "scaler")

container.call(scaler);

scaler.on("update", function() {
        scale.interpolate(function(a,b) {
          return function(t) {
            return [a,b][Math.round(t)];
          }
        })
        render();

})
      var r, g, b;

}
      
      
      d3.select("#file").node()
    .addEventListener("change", function(evt) {
      d3.select("#downscaled").selectAll("canvas").remove();
      var files = evt.target.files;
    	var file = files[0];
      if(file.type.indexOf("image/") === 0) {

var reader = new FileReader();
        reader.onload = (function(data) {
          var img = document.getElementById('preview')
          img.src = data.target.result;

setTimeout(function() {
            scaleImage(img);
          }, 300);
          
        });
        reader.readAsDataURL(file);
      }
    })
    
    function scaleImage(img) {
      var imgCV = document.createElement('canvas');
      imgCV.width = img.width;
      imgCV.height = img.height;
      var imgCtx = imgCV.getContext('2d');
      imgCtx.drawImage(img, 0, 0);
      var scale = targetWidth / img.width;
      console.log("scale", scale)
      var downscaled = downScaleCanvas(imgCV, scale);
      console.log("scaled", targetWidth, img.height * scale);
      render(getPixels(downscaled.jsonArray));
    }

})
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js