Collaborative art projects like Reddit's r/place and Python's Pixels projects attracted people from far and wide to make their mark on a collective canvas. Instead of limiting users to one pixel at a time or API rate limits, we decided to allow users to create small programs which make drawings. These drawings are defined with instructions in a Python Turtle-like language.
The name Canvassembly is a portmanteau of canvas, the HTML tag that the pixels are rendered in, and assembly, a close ancestor of the syntax.
What it does
Canvassembly provides a single-page web application which allows users to write drawing code in our domain-specific language, which is added to a collaborative canvas. Users are able to step through the execution to watch program state and their local canvas.
How we built it
The application is separated into three components:
- a Rust-to-WASM language parser and compiler written by Kieran
- an Angular.js frontend incorporating codemirror written by Andrew
- an Express.js backend built atop websockets written by Matt
Each component was written independently for the first half of the 24-hour window.
Challenges we ran into
We hit three major snags while implementing our project:
- integrating WASM files with our infrastructure was difficult to get working
- switching from HTTP requests to websocket-only communication required tight collaboration and some backtracking
Accomplishments that we're proud of
We're proud of:
- placing a small compiler in the browser with error handling
- a fully websocket-based communication protocol
- (relatively) scalable concurrently
What we learned
What's next for Canvassembly
One major feature we weren't able to add in time is filling in polygons. For example, a user can trace a path with the pen, but is currently unable to color the area inside of the perimeter. This would be reasonable to implement given the existing framework.