display a console of an old home computer
TypeScript JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
web_modules
web_typings
.gitattributes
.gitignore
LICENSE.txt
README.md
package.json
tsconfig.json
webpack.config.js

README.md

LocatePrint

Display a console of an old home computer. (WebGL required)

Demos

consolephysics consolephysics

skigame skigame

scrolltext scrolltext

snake-shift snake-shift / (source)

Usage

  • Load the font and the library.
  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  <script src="locate-print/index.js"></script>
  • Initialize locate-print.
var ticks = 0;

window.onload = () => {
  // initialize LocatePrint
  lp.init();
  // update the display in each frame
  requestAnimationFrame(update);
}
  • Set a color and print a text.
function update() {
  requestAnimationFrame(update);
  // set a color of a text
  //  0: black, 1: red, 2: blue 3: green
  //  4: yellow, 5: magenta, 6: cyan, 7: white
  lp.color(ticks % 8);
  // print a text
  lp.print('Abc', lp.scrollAtLastChar);
  // set a foreground color and a background color
  lp.color(0, ticks % 8);
  lp.print('Def', lp.scrollAtLastChar);
  // 'update' should be called in each frame
  lp.update();
  ticks++;
}

Commands

  • setCanvasSize, setColorPalettes, console
  // set the pixel widht/height of the canvas
  // default: 640 x 480
  lp.setCanvasSize(640, 400);
  // set the color palettes (0: green, 1: white)
  // default: 0: black, 1: red, 2: blue 3: green
  //          4: yellow, 5: magenta, 6: cyan, 7: white
  lp.setColorPalettes(['green', 'white']);
  // set the character width/height of the console
  // default: 40 x 20
  lp.console(32, 16);
  • cls
  // clear the console
  lp.cls();
  • color, locate, print
  var ts = 'SKI GAME'.substring(0, floor(ticks / 5));
  // set the character color
  // params: (foreground, background = 0)
  lp.color(0, 1);
  // set the cursor location x/y
  lp.locate(19 - ts.length, 5);
  // print the text
  lp.print(ts);
  • scroll, screen
  // scroll the console 
  lp.scroll(0, -1);
  lp.color(0, 1);
  // get the string on the console at the specific location x/y
  var cc: string = lp.screen(sx, 4);

Acknowledgement

  • Libraries

glfx.js / Matter.js / gif-capture-canvas

  • Articles

WebGL Fake CRT Effect for HTML5 Games

Loading custom shaders