this.numCols = 0;
this.numRows = 0;
// handle reading from file
if (opts.filePath) {
if (!fs.existsSync(opts.filePath)) {
throw new Error(${opts.filePath} doesn't exist
);
}
this.fileChars = fs.readFileSync(opts.filePath, utf-8
).trim().split(``);
this.filePos = 0;
this.charRange = file
;
}
}
generateChars(len, charRange) {
// by default charRange == ascii
let chars = new Array(len);
if (charRange === ascii
) {
for (let i = 0; i < len; i++) {
chars[i] = String.fromCharCode(rand(0x21, 0x7E));
}
} else if (charRange === braille
) {
for (let i = 0; i < len; i++) {
chars[i] = String.fromCharCode(rand(0x2840, 0x28ff));
}
} else if (charRange === katakana
) {
for (let i = 0; i < len; i++) {
chars[i] = String.fromCharCode(rand(0x30a0, 0x30ff));
}
} else if (charRange === emoji
) {
// emojis are two character widths, so use a prefix
const emojiPrefix = String.fromCharCode(0xd83d);
for (let i = 0; i < len; i++) {
chars[i] = emojiPrefix + String.fromCharCode(rand(0xde01, 0xde4a));
}
} else if (charRange === file
) {
for (let i = 0; i < len; i++, this.filePos++) {
this.filePos = this.filePos < this.fileChars.length ? this.filePos : 0;
chars[i] = this.fileChars[this.filePos];
}
}
return chars;
}
makeDroplet(col) {
return {
col,
alive: 0,
curRow: rand(0, this.numRows),
height: rand(this.numRows / 2, this.numRows),
speed: rand(1, this.maxSpeed),
chars: this.generateChars(this.numRows, this.charRange),
};
}
resizeDroplets() {
[this.numCols, this.numRows] = process.stdout.getWindowSize();
// transpose for direction
if (this.transpose) {
[this.numCols, this.numRows] = [this.numRows, this.numCols];
}
// Create droplets per column
// add/remove droplets to match column size
if (this.numCols > this.colDroplets.length) {
for (let col = this.colDroplets.length; col < this.numCols; ++col) {
// make two droplets per row that start in random p 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 ositions
this.colDroplets.push([this.makeDroplet(col), this.makeDroplet(col)]);
}
} else {
this.colDroplets.splice(this.numCols, this.colDroplets.length - this.numCols);
}
}
writeAt(row, col, str, color) {
// Only output if in viewport
if (row >=0 && row < this.numRows && col >=0 && col < this.numCols) {
const pos = this.transpose ? ansi.cursorPos(col, row) : ansi.cursorPos(row, col);
write(${pos}${color || ``}${str || ``}
);
}
}
renderFrame() {
const ansiColor = ansi.colorsfg${this.color.charAt(0).toUpperCase()}${this.color.substr(1)}
;
for (const droplets of this.colDroplets) {
for (const droplet of droplets) {
const {curRow, col: curCol, height} = droplet;
droplet.alive++;
if (droplet.alive % droplet.speed === 0) {
this.writeAt(curRow - 1, curCol, droplet.chars[curRow - 1], ansiColor);
this.writeAt(curRow, curCol, droplet.chars[curRow], ansi.colors.fgWhite());
this.writeAt(curRow - height, curCol,
);
droplet.curRow++;
}
if (curRow - height > this.numRows) {
// reset droplet
Object.assign(droplet, this.makeDroplet(droplet.col), {curRow: 0});
}
}
}
flush();
}
}
还有几个工具方法:
// Simple string stream buffer + stdout flush at once
let outBuffer = [];
function write(chars) {
return outBuffer.push(chars);
}
function flush() {
process.stdout.write(outBuffer.join(``));
return outBuffer = [];
}
function rand(start, end) {
return start + Math.floor(Math.random() * (end - start));
}
matrix-rain 的启动代码如下:
const args = argParser.parseArgs();
const matrixRain = new MatrixRain(args);
function start() {
if (!process.stdout.isTTY) {
console.error(Error: Output is not a text terminal
);
process.exit(1);
}
// clear terminal and use alt buffer
process.stdin.setRawMode(true);
write(ansi.useAltBuffer());
write(ansi.cursorInvisible());
write(ansi.colors.bgBlack());
write(ansi.colors.fgBlack());
write(ansi.clearScreen());
flush();
matrixRain.resizeDroplets();
}
function stop() {
write(ansi.cursorVisible());
write(ansi.clearScreen());
write(ansi.cursorHome());
write(ansi.useNormalBuffer());
flush();
process.exit();
}
process.on(SIGINT
, () => stop());
process.stdin.on(data
, () => stop());
process.stdout.on(resize
, () => matrixRain.resizeDroplets());
setInterval(() => matrixRain.renderFrame(), 16); // 60FPS
start();
首先初始化一个 MatrixRain
类,然后调用 start
方法。start
方法中通过 MatrixRain
的 resizeDroplets
方法来初始化要显示的内容。
MatrixRain
类实例中管理着一个 colDroplets
数组,保存这每一列的雨滴。在 resizeDroplets
中我们可以看到,每一列有两个雨滴。
在启动代码中我们还可以看到,每隔 16 毫秒会调用一次 renderFrame
方法来绘制页面。而 renderFrame
方法中,会遍历每一个 colDroplet
中的每一个雨滴。由于每一个雨滴的初始位置和速度都是随机的,通过 droplet.alive
和 droplet.speed
的比值来确定每一次渲染的时候是否更新这个雨滴位置,从而达到每个雨滴的下落参差不齐的效果。当雨滴已经移出屏幕可视范围后会被重置。
每一次渲染,都是通过 write
函数向全局的缓存中写入数据,之后通过 flush
函数一把更新。