カラーマッピングと、ソースコードの一部を修正しました。
index.js
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync(__dirname + '/index.html');
var app = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(index);
})
.listen(3000);
var io = require('socket.io').listen(app);
var ndata = 512; // data[512] + 0x0a
var pos = 0;
var myarray = new Array();
process.stdin.on('readable', function() {
var buf = process.stdin.read();
if (buf !== null) {
for (var i = 0; i < buf.length; i++) {
if (buf[i] == 0x0a) {
pos = 0;
io.emit('waterfall', myarray);
} else {
myarray[pos++] = buf[i];
}
}
}
});
process.stdin.on('end', function() {
});
index.html
<!doctype html>
<html>
<head>
<script src='/socket.io/socket.io.js'></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var myarray = new Array();
var socket = io();
var canvas;
var ctx;
var imgData;
window.addEventListener("load", init);
function init() {
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
imgData = ctx.createImageData(512, 512);
for (i = 0; i < 512; i++) {
for (j = 0; j < 512; j++) {
imgData.data[0 + j * 4 + i * imgData.width * 4] = j % 256;
imgData.data[1 + j * 4 + i * imgData.width * 4] = i % 256;
imgData.data[2 + j * 4 + i * imgData.width * 4] = 128;
imgData.data[3 + j * 4 + i * imgData.width * 4] = 255;
}
}
ctx.putImageData(imgData, 0, 0);
}
function waterFall(myarray) {
ctx.putImageData(imgData, 0, 1);
imgData = ctx.getImageData(0, 0, 512, 512);
for (j = 0; j < 512; j++) {
var tmp = ((myarray[j] - 48) * 25 % 256) / 256.0;
imgData.data[0 + j * 4] = colormap_r(tmp);
imgData.data[1 + j * 4] = colormap_g(tmp);
imgData.data[2 + j * 4] = colormap_b(tmp);
imgData.data[3 + j * 4] = 255;
}
}
socket.on('waterfall', function(data) { waterFall(data); });
function colormap_r(tmp) {
var val;
if (tmp < 0.50) {
val = 0.0;
} else if (tmp > 0.75) {
val = 1.0;
} else {
val = 4.0 * tmp - 2.0;
}
return 255.0 * val;
}
function colormap_g(tmp) {
var val;
if (tmp < 0.25) {
val = 4.0 * tmp;
} else if (tmp > 0.75) {
val = -4.0 * tmp + 4.0;
} else {
val = 1.0;
}
return 255.0 * val;
}
function colormap_b(tmp) {
var val;
if (tmp < 0.25) {
val = 1.0;
} else if (tmp > 0.50) {
val = 0.0;
} else {
val = -4.0 * tmp + 2.0;
}
return 255.0 * val;
}
</script>
</head>
<body>
<canvas id="myCanvas" width="512" height="512" style="background:white;"></canvas>
</body>
</html>