Prehľad
Mozaic je moja webová aplikácia na prípravu farebnej palety a očíslovanej predlohy z obrázka. Je určená pre mozaiky, maľované návrhy a ďalšie obrazy rozdelené na samostatné farebné plochy.
Používateľ označuje plochy kliknutím. Aplikácia vyhľadá ich súvislé pixely, určí reprezentatívnu farbu a podobné farby zaradí do spoločnej skupiny.
Zadanie
Členitý obrázok môže obsahovať mnoho plôch s veľmi podobnými odtieňmi. Pri maľovaní alebo skladaní mozaiky je užitočné vedieť, ktoré plochy patria k rovnakej farbe a v akom poradí pracovať s paletou.
Cieľom bolo vytvoriť praktickú pracovnú predlohu s číslami a farbami zoradenými od najtmavšej po najsvetlejšiu.
Riešenie
Do editora možno načítať PNG, JPEG alebo WebP, obrázok priblížiť a označovať jednotlivé uzavreté plochy. Tolerancia výberu pomáha pracovať s odchýlkami vo farbe a samostatné nastavenie riadi podobnosť farebných skupín.
Skupiny možno zvýrazňovať, upravovať alebo spájať. Výsledok sa exportuje ako očíslovaný PNG, paleta v CSV alebo projekt v JSON na ďalšie pokračovanie. K dispozícii je aj história krokov späť a vpred.
Moja úloha
Navrhol a vyvinul som editor, výpočtovú logiku, správu farebných skupín, exporty a lokálne ukladanie projektu. Riešenie spája používateľské rozhranie s algoritmami na spracovanie obrazu.
Technická realizácia
Aplikácia používa Vue 3, TypeScript a Canvas. Stav spravuje Pinia a rozpracovaný projekt sa automaticky zálohuje do IndexedDB. Spracovanie aj exporty prebiehajú priamo v prehliadači; obrázok sa nenahráva na server.
- Iteratívny flood fill na vyhľadávanie súvislých plôch.
- Reprezentatívna farba určená z vnútorných vzoriek plochy.
- Porovnávanie farieb v priestore CIE Lab pomocou ΔE76.
- Zoraďovanie skupín podľa svetlosti a prečíslovanie plôch.
- Pamäťovo úsporné masky plôch a obnova projektu po opätovnom otvorení.
Výsledok
Vzniklo funkčné MVP, ktoré z farebného obrázka pomáha pripraviť paletu a očíslovanú pracovnú predlohu. Plochy sa vyberajú jednotlivo kliknutím; aplikácia zatiaľ nerozpoznáva všetky plochy obrázka naraz ani nesleduje priebeh ich vymaľovania.
Projekt je verejne dostupný vrátane zdrojového kódu a online verzie.