カラーマッピングと、ソースコードの一部を修正しました。
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>