{"id":26027962,"url":"https://github.com/tursics/kunterbunt","last_synced_at":"2026-06-28T19:32:00.500Z","repository":{"id":46717038,"uuid":"406524195","full_name":"tursics/kunterbunt","owner":"tursics","description":"👨‍🎨🎨 SVG painting app (for mosaics)","archived":false,"fork":false,"pushed_at":"2021-11-06T11:49:10.000Z","size":27960,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-06T16:58:26.495Z","etag":null,"topics":["codingdavinci","mosaic","painting","svg"],"latest_commit_sha":null,"homepage":"https://tursics.de/app/kunterbunt/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tursics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-14T21:19:31.000Z","updated_at":"2021-11-14T21:40:13.000Z","dependencies_parsed_at":"2022-07-26T13:32:17.298Z","dependency_job_id":null,"html_url":"https://github.com/tursics/kunterbunt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tursics/kunterbunt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tursics%2Fkunterbunt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tursics%2Fkunterbunt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tursics%2Fkunterbunt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tursics%2Fkunterbunt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tursics","download_url":"https://codeload.github.com/tursics/kunterbunt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tursics%2Fkunterbunt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34901959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codingdavinci","mosaic","painting","svg"],"created_at":"2025-03-06T16:58:31.229Z","updated_at":"2026-06-28T19:32:00.481Z","avatar_url":"https://github.com/tursics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kunterbunt\n\nGestalte die Dionysos-Mosaike mit frischen Farben neu und ergänze fehlerhafte Stellen nach deinen Vorstellungen.\n\n* hol dir die [Web-App](https://tursics.de/app/kunterbunt/)\n* ein Projekt mit Kulturdaten von [Coding da Vinci: Nieder.Rhein.Land 2021](https://codingdavinci.de/de/projekte/kunterbunt)\n* schau dir den [Quelltext](https://github.com/tursics/kunterbunt) an\n\n![Kunterbunt-Logo](https://github.com/tursics/kunterbunt/blob/main/media/banner.png?raw=true)\n\nDas **Dionysos-Mosaik in Köln** besteht aus über 1,5 Millionen Steinen.\nLeider enthält es einige Fehlstellen und keiner weiß, wie die Motive in der **ehemaligen römischen Stadtvilla** einmal vollständig ausgesehen haben.\nJetzt kannst **du** die leeren Stellen im Mosaik kreativ füllen.\nWähle eine Farbe und färbe die fehlenden Steine zu einem neuen Gesamtkunstwerk zusammen.\n\nMit **Kunterbunt** ist eine Web-Applikation entstanden, die nicht nur die fehlenden Steine im Mosaik ergänzen kann.\nDu kannst jeden beliebigen Stein im Mosaik umfärben.\nFür deine Kreativität stehen mehrere Teil-Motive des großen Mosaiks und eine große Auswahl an wohlabgestimmten Farbpaletten zur Verfügung.\nWähle selbst, ob du kolorierte oder komplett weiße Steine als Vorlage haben möchtest.\n\nEgal ob am **PC, Tablet oder Smartphone** - malen kannst du überall.\nDa jeder Stein per Hand für die Malvorlage nachgemalt wurde, entstehen hochaufgelöste Bilder, die du mit deinen Freund:innen **teilen und ausdrucken** kannst.\n\nMotive mit wenigen Steinen sind besser für Einsteiger geeignet; und für Kinder.\nDas Deutsche Technikmuseum bietet für Kinder spezielle **Ausmalbilder mit Pixeln** an.\nDiese sind in der App bereits integriert.\n\n*Der Kern der Anwendung hat sich zu einer JavaScript-Bibliothek zum editieren/färben von beliebigen SVG-Grafiken entwickelt, mobile first und touch-freundlich.\nEs macht Sinn diesen Teil in Zukunft auszulagern und zum Beispiel als npm-Paket anderen Projekten und Webseiten zur Verfügung zu stellen.*\n\n## Warum das ganze?\n\nDieses Projekt ist mein Beitrag zum Hackathon \"Coding da Vinci Nieder.Rhein.Land 2021\".\nDie Arbeitszeit des Projektes fand zwischen dem 11.09.2021 und 06.11.2021 statt.\n\nProjektwebseite: https://codingdavinci.de/de/projekte/kunterbunt\n\n## Features\n\n**erledigt**\n\n- \u0026check; Besseren Namen für das Projekt finden\n- \u0026check; SVG-Ausmal-Editor\n- \u0026check; Farbe auswählen und losmalen\n- \u0026check; Stift malt eine Fläche mit einer Farbe aus\n- \u0026check; Undo und Redo\n- \u0026check; Multi-Touch erlauben\n- \u0026check; Bilder in 2 Variante (bunt und weiß)\n- \u0026check; 14 Bild-Vorlagen können ausgewählt werden\n- \u0026check; 29 wunderschöne Farbpaletten stehen zur Auswahl\n- \u0026check; Funktionsleisten passt sich automatisch Hoch- und Querformat an\n- \u0026check; läuft im Browser\n- \u0026check; optimiert für Computer\n- \u0026check; optimiert für Tablets\n- \u0026check; optimiert für Telefone\n- \u0026check; optimiert für Drucker (wer das Bild drucken möchte, der bekommt eine wunderschöne Ansicht :-) )\n- \u0026check; zeige einen QR-Code um auf die Lizenz zu verlinken - beim drucken\n- \u0026check; Stift-Bedienung auf Touch-Bildschirmen\n- \u0026check; mehrere Farbpaletten können in `media/colorswatch.js` hinterlegt werden (mit bis zu 10 Farben)\n- \u0026check; Social Sharing (2000 Pixel breit oder hoch) für mobile Geräte (JPG-Datei)\n- \u0026check; Social Sharing wird im Desktop-Browser zum Download-Button (PNG-Datei)\n- \u0026check; Bild und Metadaten erstellt, wenn man die Webseite über Social Media teilt\n- \u0026check; App Icon erstellt (für alle möglichen Größen)\n- \u0026check; die letzten 5 angefangenen Bilder speichern und wieder auswählbar machen\n\n**offen**\n\n- Bugs sind alle gefixt (besonders die auf Safari und iOS)\n- Helligkeit von Farben ändern können\n- Pinsel soll eine Fläche mit einer Farbe wählen, wobei die Helligkeit automatisch variiert\n- Bilder als Video abspeichern / teilen (die Undo-Funktion hält entsprechende Daten)\n- SVGs von der Festplatte / URL importieren\n- Hauptfunktion als Library in npm auslagern\n- benutze Facebook um Bilder auf mehreren Geräten zu synchronisieren\n\n## Bilder vorbereiten\n\n- TIFF oder PNG in Inkscape öffnen\n- als SVG speichern\n- Werkzeug \"Bézir-Kurven und gerade Linien zeichnern (B)\" auswählen\n- jedes Kästchen mit 5 Klicks nachmalen (4 Ecken plus Pfad schließen)\n- einige Kästchen können 3 oder mehr als 4 Ecken haben\n- Werkzeug \"Farben aus dem Bild übernehmen (D)\" auswählen\n- eine typische Farbe aus dem Kästchen auswählen\n- nächstes Kästchen malen\n\nFür jedes Kästchen also:\n\n- Taste B drücken\n- 5 Mausklicks\n- Taste D drücken\n- 1 Mausklick\n\nZum Abschluß\n\n- Bild als SVG-Datei im Ordner `media` speichern\n- Bild mit der App \"ImageOptim\" kleiner rechnen (spart ca. 70%)\n- `config.js` im `media`-Ordner öffnen\n- Bild mit Metadaten referenzieren\n\n## Trivia\n\nFür ein Kästchen/Mosaikstein benötige ich (wenn alles gut läuft) **ca. 8 Sekunden** zum zeichnen.\n\nBild-Motiv         |Mosaiksteine  |brutto Arbeitszeit\n-------------------|--------------|------------------\nBlume              |          478 | 1 bis 2 Stunden\nEnte komplett      |         3507 | 8 bis 16 Stunden\nEnte ausgeschnitten|          705 |\nMänade und Satyr   |11397 (8171 bunt + 3226 weiß) | 20 bis 38 Stunden\nMänade             |         1944 |\nSatyr              |         1760 |\n\n## Lizenzen\n\nDer *Source-Code* steht unter der freien **MIT**-Lizenz.\n\nDie *Bilder* stehen unter der freien **CC BY-SA 3.0 DE**-Lizenz mit dem Zusatz \"Rheinisches Bildarchiv Köln / Römisch Germanisches Museum Köln / [Fotograf*in]\".\nMehr Infos auf [Coding da Vinci](https://codingdavinci.de/daten/das-mosaik-einer-luxurioesen-stadtvilla-des-roemischen-koeln).\n\nDie *Icons* stehen unter freien **CC BY 4.0**-Lizenz. Danke [Font Awesome](https://fontawesome.com/v5.15/icons?d=gallery\u0026p=2\u0026m=free).\n\nDie *Farbpaletten* von [Trending color palettes](https://coolors.co/palettes/trending) sind frei verwendbar [Our colors and their combination are not protected by any kind of copyright or intellectual property. You can, therefore, use them freely without any permission or any reference to Coolors](https://help.coolors.co/hc/en-us/articles/360010649799-Do-I-need-special-permissions-to-use-your-colors-).\n\nDer Font *[Cookie](https://fonts.google.com/specimen/Cookie)* steht unter der freien [Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi\u0026id=OFL).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftursics%2Fkunterbunt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftursics%2Fkunterbunt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftursics%2Fkunterbunt/lists"}