Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created June 14, 2013 07:46
Show Gist options
  • Save enjalot/5780169 to your computer and use it in GitHub Desktop.
Save enjalot/5780169 to your computer and use it in GitHub Desktop.
scaler ascii
<div id="container">
<pre id="ascii">
</pre>
</div>
{"description":"scaler ascii","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"scaler.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ascii.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/KZFPkvX.png"}
var display = d3.select("#display");
var data = [];
var cors = "http://www.corsproxy.com/"
var link = "si0.twimg.com/profile_images/712863751/lil-wayne-gq-2_normal.jpg"
var scale = d3.scale.linear()
.domain([0,78, 150, 200, 255])
.range(["w", "e", "e", "z", "y"])
var scaler = d3.scaler()
.scale(scale);
var container = display.append("div")
.attr("id", "scaler")
.style("left", tributary.sw - 200 + "px");
container.call(scaler);
scaler.on("update", function() {
scale.interpolate(function(a,b) {
return function(t) {
return [a,b][Math.round(t)];
}
})
render();
})
var W;
var H;
//temporary canvas for pixel processing
var tcanvas = document.createElement("canvas");
tcanvas.width = W;
tcanvas.height = H; //same as the image
var tc = tcanvas.getContext("2d");
//painting the canvas white before painting the image to deal with pngs
tc.fillStyle = "white";
tc.fillRect(0, 0, W, H);
display.node().appendChild(tcanvas)
var img = new Image();
img.onload = function() {
W = img.width;
H = img.height;
tcanvas.width = W;
tcanvas.height = H; //same as the image
tc.drawImage(img, 0, 0);
var pixels = tc.getImageData(0,0,W, H); //chrome will not fail
process(pixels)
}
img.crossOrigin = '';
img.src = cors + link;
function process(pixels) {
var colordata = pixels.data;
for(var i = 0; i < colordata.length; i = i+4)
{
r = colordata[i];
g = colordata[i+1];
b = colordata[i+2];
a = colordata[i+3]
//converting the pixel into grayscale
gray = r*0.2126 + g*0.7152 + b*0.0722;
data.push({r: r, g:g, b:b, a:a, gray: gray});
}
render();
}
function render() {
var ps = display.select("#ascii").selectAll("p")
.data(data)
ps.enter()
.append("p")
ps.text(function(d) {
//return asciiScale.invert(d.gray);
return scale(d.gray)
})
.style({
"clear": function(d,i) {
if(i !== 0 && i%W === 0)
return "left";
},
"color": function(d,i) {
return "rgba(" + [d.r, d.g, d.b, d.a] + ")";
//return colorScale(i);
}
})
}
d3.scaler = function() {
var scale;
var height = 300;
var max;
var min;
var selection;
var dispatch = d3.dispatch("update");
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
var y = getY(i);
if(!y && y !== 0) return;
var dy = d3.event.dy;
y += dy;
if(y > max) y = max;
if(y < min) y = min;
//move things around
setY(i, y);
//sort & reorder the domain and range
var domain = scale.domain();
var range = scale.range();
var zipped = d3.zip(domain, range);
zipped.sort(function(a,b) {
return a[0] - b[0];
})
domain = zipped.map(function(d) { return d[0] })
range = zipped.map(function(d) { return d[1] })
scaler.update();
})
var scaler = function(g) {
selection = g;
scaler._update();
}
dispatch.on("update.internal", function() {
scaler._update();
});
scaler._update = function() {
selection.each(function() {
var sel = d3.select(this);
var domain = scale.domain();
var range = scale.range();
//background. TODO: use svg?
var bg = sel.selectAll("div.background")
.data([0])
bg.enter().append("div").classed("background",true)
bg.style({
width: 10+"px",
height: height+ "px",
"background-color":"grey"
})
bg.on("dblclick", function() {
var domain = scale.domain();
var range = scale.range();
var y = d3.mouse(this)[1];
var i = d3.bisect(domain, y);
domain.splice(i, 0, y);
range.splice(i, 0, "");
scaler.update();
});
//handle things
var handles = sel.selectAll("div.handle")
.data(domain)
var handlesEnter = handles.enter().append("div").classed("handle", true);
handlesEnter.append("div").classed("line", true);
//the input
handlesEnter.append("input").classed("ascii", true)
.on("mouseup", function() { this.select(); d3.event.cancelBubble = true; })
.on("keyup", function(d,i) {
setX(i, this.value);
scaler.update();
})
.attr("maxlength", 1);
//the number
handlesEnter.append("span.number")
.classed("number", true)
handlesEnter.call(drag)
handles.style("top", function(d,i) {
return getY(i) + "px";
})
handles.select(".number")
.text(function(d,i) {
return getY(i)
})
handles.select(".ascii")
.attr("value", function(d,i) {
return getX(i);
})
})
}
scaler.scale = function(_) {
if(!arguments.length) return scale;
scale = _;
max = d3.max(scale.domain());
min = d3.min(scale.domain());
return scaler;
}
function getY(i) {
var domain = scale.domain();
return domain[i];
}
function setY(i, v) {
var domain = scale.domain();
domain[i] = v;
}
function getX(i) {
var range = scale.range();
return range[i];
}
function setX(i, v) {
var range = scale.range();
range[i] = v;
}
d3.rebind(scaler, dispatch, "on", "update")
return scaler;
}
#display {
overflow:scroll;
background-color: #000;
}
#display p {
margin: 0;
padding: 0;
line-height: 1em;
display: inline-block;
float:left;
}
#ascii {
font-size: 13px;
font-family: 'Courier New', monospace;
letter-spacing: 4px;
}
canvas {
position:absolute;
top: 100px;
right: 50px;;
}
#scaler {
position:absolute;
top: 100px;
left: 100px;
width: 100px;
}
.background {
border: 1px solid #51A874;
background-color: #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)));
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -o-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: -ms-linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
background-image: linear-gradient(top, rgb(0, 0, 0), rgb(255, 255, 255));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#ffffff');
}
.handle {
position: absolute;
left: 7px;
}
.handle .line {
width: 15px;
border-top: 1px solid #13D661;
border-bottom: 1px solid #0C7235;
position:absolute;
top: 16px;
left: -7px;
}
input.ascii {
border: none !important;
font-size: 12px !important;
width: 25px !important;
border-radius: 0 !important;
text-align: center;
height: 20px;
cursor: ns-resize;
}
.number {
font-size: 12px;
color: white;
line-height: 1em;
position:relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment