I was created in Pixel-Toons Editor, meow!

🎨 Vivid pixel-art in your browser 🎨

An open-source platform for creating and sharing pixelated animations.
School project by Victoria Myts for 🎓KPI

⚙️ Explore the backend source code ⚙️

Features · Roadmap · Report Bug

🚀 Getting started

Installation via GitHub:

git clone https://github.com/MytsV/pixel-toons-editor
npm i --force

Running the app:

#Check and fix syntax via eslint
npm run check
#Run tests
npm run test
#Start the server
npm run start

🛠 Technologies

• Modular JS on the frontend with Web API
• No external libraries used!
• Babel for deployment compilation
• Unit-tests with Mocha

🗺 Roadmap

Future features	Implemented
⚙️ Integration of backend service	🎬 Frames
🚀 Assembly and deploy	🎨 Canvas & Layers
	👩‍🎨 Tools
	🌠 BMP encoder
	🍿 LZW compression & GIF encoder
	👤 Database handling & Authentication
	💾 Own file format

✨ Features

Frames

Implemented as a part of File class. Can have variable duration and order.

Canvas & Layers

Caching, implementations of Prototype and Memento patterns and high encapsulation.

Tools

Convenient abstraction for easy creation of new tools

BMP encoder

Implementation of open-source file format specification. See code comments for source.

LZW compression & GIF encoder

Implementation of LZW compression algorithm and popular file format. See code comments for source.

Database handling & Authentication

Almost the only part using asynchronous programming. Implemented with Firebase. The public key in the files is secure to be shared.

💾 .PXT file format

Consists of five structures:
Header
InfoHeader
FrameData
CanvasData
LayerData

Header

Field name	Size	Value & Description
Signature	3 bytes	"PXT"
Version code	1 byte	"1"
Per pixel	1 byte	"3" - RGB

InfoHeader

Field name	Size	Value & Description
Width	2 bytes	Width of canvas
Height	2 bytes	Height of canvas
Frame count	1 byte	Number of frames
Current ID	2 bytes	ID of a currently chosen frame
Overlay ID	2 bytes	ID of a frame, currently displayed underneath

(

FrameData

Field name	Size	Value & Description
ID	2 bytes
Name length	1 byte	Length of the frame name in bytes
Name	${Name length} bytes
Duration	2 bytes	Duration in milliseconds

CanvasData

Field name	Size	Value & Description
Drawn ID	2 bytes	ID of currently chosen layer
Layer count	1 byte	Number of layers

(

LayerData

Field name	Size	Value & Description
ID	2 bytes
Name length	1 byte	Length of the layer name in bytes
Name	${Name length} bytes
Opacity	1 byte	0...255
Image data length	4 bytes
Image data	${Image data length} bytes	Sequence of bytes, which represent an image. Compressed by Quite OK Algorithm.

) - ${Layer count} times

) - ${Frame count} times

❤️ Credits

Dominic Szablewski - Quite OK Algorithm author