-
A tweet and its associated visualisation
Inspiration
We wanted to create a visualisation for data, but eventually settled on a processing-like language that's tweetable (i.e. a very small language) and then publicly displayed on a website.
What it does
Tweet some code written in the rend language, followed by the hashtag #280canvas. The language is simple: declare one-letter variables and their initial value loop interval as : statement; ...
The statements available are: clear screen, change colour, draw rectangle|circle|line|arc, variable assignment, and inc/decrement. Values for drawing are interpreted as percentages of the screen, as floats to 1 decimal point (i.e. 500 -> 50.0%), with '%' being used as a shortcut for 1000. Variables can be used, as can a range of operators and JS' Math functions.
The tweets are parsed, interpreted in the web browser, sent to users, and displayed on a HTML canvas.
How we built it
In Node, the Twitter Streaming API is used to read any tweets that use the #280canvas hashtag. Lexing and parsing are handled by a Python module via the ANTLR runtime, generated from a grammar. When a part of the language is parsed, relevant JSON code is generated. A standardised JSON notation was developed, so that when an interpreter was built in the clientside TypeScript/JavaScript, it was easy to switch from object notation to commands to the HTML canvas.
Challenges we ran into
The biggest challenge proved to be reading tweets and pushing internally stored data (currently rendering programs) to newly connected clients. Ideally, the tweet would have been pushed to the server and then rendering programs pushed to the client, but we had to fall back to polling the Twitter API, and then having the client poll the server when they connect
Accomplishments that we're proud of
Creating a language from scratch with a form of type checking, and code generating into another form, is normally a huge task, but thankfully I have some experience in language creation, and the ANTLR library allow rapid iteration of parsers. The interpreter written in TypeScript is quite elegantly written (surprisingly!) and quite fun to write recursive switch statements.
What we learned
Time management is a huge skill that really paid off for us. Planning the division of labour before starting saved us a lot of time.
What's next for 280canvas
Programmatic numerical representations of different colour systems would be handy, as would more involved standard library functions. Currently drawing feature on site doesn't work.
Log in or sign up for Devpost to join the conversation.