[![Panimator](./assets/Panimator.svg)](https://gabrigua.github.io/Panimator/)
### Make your own pixel art animation from the comfort of your browser

***Let's Get Started***


1. Go to the website: [Pixel Art Animator](https://gabrigua.github.io/Panimator/);

2. Start drawing Your Animations;

3. Export as PNG, Multiple PNGs, Spritesheet and GIF!

### Tools
Those are the tools available right now!

- Pencil
- Eraser
- Fill Bucket
- Color Palette
- Mirroring
- Trasparency
- Animator Timeline

You can see some already made projects [here](https://github.com/GabriGua/Panimator/project-test);, just import them in the web app and play a bit around!

> if you have any suggestions, you can write it at this email: gabrio.guastella@gmail.com


---
### Roadmap
- [x] Canvas Rendering
- [x] Canvas Resizing
- [x] Toolbar
- [x] Pencil Function
- [x] Eraser Function
- [x] Pixel Perfect (Bresenham Line)
- [x] Fill Function
- [x] Undo/Redo Function
- [x] Color Palette
    - [x] Save Color
    - [x] Load Color
- [x] Brush Size
    - [x] Pencil Size
    - [x] Eraser Size
    - [x] Cursor
- [x] Mirroring Canvas
- [x] Custom Cursors
- [x] Timeline
    - [x] Play Function
    - [x] Stop Function
    - [x] Clear Function
    - [x] Adding New Frames After the Frame Selected
    - [x] Selecting New Frames
    - [x] Saving Each Frame
    - [x] Load Frames
    - [x] Resize Frames from Canvas
    - [x] Deleting Frames and Re-numerating
    - [x] Changing Frames Position
    - [x] Onion Skin Animation
- [x] Exporting as PNG
    - [x] Multiple PNG
- [x] Exporting as GIF
- [x] Exporting as Sprite Sheet
- [x] Exporting a Project
    - [x] Importing a Project
    - [x] Better Export System
- [x] Adding localStorage
    - [x] Deleting Project
- [x] Better Styling
    - [x] Adding Icons
    - [x] Adding Background
    - [x] Make Everything Dynamic
    - [x] Adding Clouds
    - [x] Other
- [x] Adding Shortcuts
    - [x] Key Map (Question Button)
- [x] Theme Switcher
    - [x] Enhancements
- [x] Final Polishing
- [x] Adding a Tutorial
- [x] Opacity
- [x] Layers
- [x] Enhance the README

---
### Trasparency
*AI helped me with this, how?*<br>
I used Github Copilot in "ask" mode only, whenever I didn't find a solution online.


for what?

- Canvas Rendering (sometimes);
- Cursor Rendering in Canvas (sometimes);
- Tools Pixel Size (sometimes);
- Frame Creation and Selection System (often, I had to re-adapt everything);
- Pixel Perfect (often, it was hard);
- Frame re-numeration (just the syntax);
- Exporting as a GIF (just to explain how to make it work);
- Making a ZIP file (same as GIF);
- Making the Import / Export of a project work (the import was a mess of errors)
- Making a smooth transition in js for the Tutorial (I rarely animated in js)
- Making a Drag and Drop system to re-positioning frames (just to know how this system should have worked)
- Making the onion skin work ( had to understand how to make it work with a canvas)
-Making the layer system ( this was pretty hard, had to get assisted very often)
- Debugging (rarely);

In some occasion used autocomplete just to speed up repetitive tasks.

---
***This project was made for learning purpuse and will be shipped to Summer Of Making, an [Hack Club](https://hackclub.com/) Event.***
---
<p align="center">© 2025 Gabriele Guastella. All rights reserved.</p>