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
xxxxxxxxxx
<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;
function getPixels(data) {
var pixels = [];
for(var i = 0; i < data.length; i++)
{
r = data[i][0];
g = data[i][1];
b = data[i][2];
//converting the pixel into grayscale
gray = r*0.2126 + g*0.7152 + b*0.0722;
pixels.push({r:r, g:g, b:b, gray: gray});
}
return pixels;
}
render(getPixels(nate));
function render(pixels) {
var ps;
if(pixels) {
ps = display.select("#ascii").selectAll("p")
.data(pixels)
ps.enter()
.append("p")
ps.exit().remove();
} else {
ps = display.select("#ascii").selectAll("p");
}
ps.text(function(d) {
//return asciiScale.invert(d.gray);
return scale(d.gray)
})
.style({
"clear": function(d,i) {
if(i !== 0 && i%targetWidth === 0)
return "left";
},
"color": function(d,i) {
return "rgba(" + [d.r, d.g, d.b, 1] + ")";
//return colorScale(i);
}
})
}
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