ウォーターフォールをパイプで

あなたの表示したい信号が、別のプロセスからパイプで与えられるとしましょう。

bash.sh

while :
 do
  echo "0.13456789"
  sleep 0.1
  echo "1234567890"
  sleep 0.1
  echo "2345678901"
  sleep 0.1
  echo "34567890.1"
  sleep 0.1
  echo "4567890.13"
  sleep 0.1
 done
% ./bash.sh | node index.js

index.js

var http  = require('http');
var fs    = require('fs');
var index = fs.readFileSync(__dirname + '/index12.html');
var count = 0;

var app = http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type' : 'text/html'});
  res.end(index);
});

var io = require('socket.io').listen(app);
app.listen(3000);

var ndata   = 10;
var myarray = new Array(ndata);

process.stdin.on('readable', function() {
  var buf = process.stdin.read();
  console.log(buf);
  for (var i = 0; i < ndata; i++) {
    myarray[i] = buf[i];
  }
  io.emit('time', {buffer : myarray});
});

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 nxdata  = 32;
var nydata  = 32;                 
var myarray = Array(nxdata);      
var mytable = Array(nxdata * nydata);
var socket = io();
var count  = 0;

window.addEventListener("load", init);

function init() {
// anything you wish
}

function emitParticles(myarray) {
  for (var ix = 0; ix < nxdata; ix++) {
    mytable[ix] = myarray[ix % 10] - 48;
  }
  for (var iy = nydata - 1; iy > 0; iy--) {
    for (var ix = 0; ix < nxdata; ix++) {
      mytable[ix + nxdata * iy] = mytable[ix + nxdata * (iy - 1)];
    }
  }

  var canvas = document.getElementById('myCanvas');
  var ctx    = canvas.getContext('2d');
  for (var iy = 0; iy < nydata; iy++) {
    for (var ix = 0; ix < nxdata; ix++) {
      ctx.beginPath();
      var h         = (360 / 10) * mytable[ix + nxdata * iy] % 360;
      var hsl       = 'hsl(' + h.toString() + ', 100%, 50%)';
      ctx.fillStyle = hsl;
      ctx.arc(ix * (800 / nxdata), iy * (800 / nydata), 400 / nydata, 0,
              2 * Math.PI, true);
      ctx.fill();
    }
  }
}

socket.on('time', function(data) {
  myarray = data.buffer;
  emitParticles(myarray);
});
</script>
</head><body>
    <canvas id="myCanvas" width="800" height="800" style="background:white;">
    </canvas>
    <p id='messages'></p>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.