⚠️ This project was just a programming/learning experient. It is not a tool for end-users, and never will be. If you want to export your Colors paintings at a high resolution, your best bet is to ask for help in the Colors Live Discord server!! :)

Also, this project was written before Colors Live (for Nintendo Switch, PC, etc). As such it does not support paintings from this version of Colors.

While I was part of the Colors Live development team from 2020 - 2023, this is not offically affiliated with or supported by Collecting Smiles.

colors-drw-parser

An experimental parser and renderer for the .drw image format used by Colors; a painting application for Nintendo 3DS, iOS, Android and PlayStation Vita.

The .drw format is quite interesting in that it doesn't store pixel data whatsoever, instead it records all of the user's input (brushstrokes, color changes, canvas flips, etc) which can then be replayed in order to construct the final image. This approach means you can watch the artist's technique as they work, and also that paintings are essentially resolution-independent like a vector image. However, the drawback is that it's extremely difficult to display .drw files in places where Colors' painting engine isn't available.

So of course... I wanted to try :P

Status

Fully functional .drw file parser on par with Colors versions 1100-1299. I've only tested it with 3DS and iOS paintings so far but it should(?) support other versions.
Mostly complete (~95%) .drw renderer using the HTML5 canvas API. It's extremely slow and doesn't quite implement blending properly, but it works well enough for debugging purposes.

Showcase

Colors Render (target)	DrwRenderer.ts (result)
Painting by Lynarc

Painting by -renge-

Painting by M.Collins

Painting by acchan

Painting by Greeso

Todo

It seems pressure/opacity can change mid-stroke. I'll need to figure out how this works exactly because it seems to be throwing me off in places, like on the eyes and left ear of the colorful anime painting.
Figure out why small brushstrokes seem too thin, like the hair strand to the right of the face in the colorful anime painting.
Implement webGL renderer - would probably have better performance than the JS canvas API, but tricky since webGL doesnt support some of the features that Colors uses for brush stamp blending.
BRUSHCONTROL_FULL, BRUSHCONTROL_VARIABLESIZE, BRUSHCONTROL_VARIABLESIZEOPACITY, BRUSHCONTROL_DISTANCEOPACITY brush control types. I haven't seen these in use so I don't know exactly what these do or how they work.

Longer Term Goals

This is mostly just a fun weekend project for me. That said, I have a few neat ideas in mind:

3D visualizer where you can watch the painting playback and move around the layers in 3d space
Stream playback to ffmpeg as frames, for video conversion
VR viewer :^)

Building

Building requires NodeJS and npm to be installed

Install dependencies

$ npm install

Start testing server

$ npm run dev

Build production JS files

$ npm run build

Credits

James Daniel - Implementation
Jens Andersson - Colors dev, was kind enough to provide documentation, as well as the actual brush textures used in the Colors app (thanks again!)