Canvassembly

A collaborative drawing space combining programming and art.

Comment

Inspiration

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:

  • managing complex state and asynchronous callbacks in JavaScript pushed the limits of our framework choices
  • 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.

Share this project:

Updates