Our first assignment for Computational Approaches to Typography was to create a text-based sketch using p5.js and xterm.js, a JavaScript terminal emulator.
Initially, I wanted to make some generative ASCII art, but none of the visual ideas that I came up with were satisfying. So, I decided to take a page from Allison’s Ghost train sketch and re-implement one of the visual poems from bpNichol’s First Screening.
I chose Self-Reflexive No. 1, mostly on a whim. The hardest part to reproduce was the endless scrolling, because by default xterm.js would just scroll to the bottom of the terminal every time a new line was added. To get the scrolling looking something like the original piece, I used the xterm.js scrollLines() function to scroll down by a single line each frame, and then trigger a call to scrollToTop() once the scrollHeight of the xterm.js container div got larger than the height of its canvas element.
There was probably a less hacky way to do this that didn’t involve looking at HTML elements generated by xterm.js, and I feel a bit like I’ve violated the spirit of the assignment, but I couldn’t figure out another solution.
Anyway, here’s the link to the p5 sketch.