{"id":22268062,"url":"https://github.com/coac/paintbucket","last_synced_at":"2026-05-17T02:35:48.755Z","repository":{"id":80202852,"uuid":"50537366","full_name":"Coac/PaintBucket","owner":"Coac","description":":art: PaintBucket","archived":false,"fork":false,"pushed_at":"2016-02-21T12:54:24.000Z","size":671,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T13:29:04.672Z","etag":null,"topics":["color","javascript","paint","pbm"],"latest_commit_sha":null,"homepage":"http://coac.github.io/PaintBucket/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Coac.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":"2016-01-27T20:58:11.000Z","updated_at":"2017-02-28T11:01:12.000Z","dependencies_parsed_at":"2023-05-05T23:48:33.702Z","dependency_job_id":null,"html_url":"https://github.com/Coac/PaintBucket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coac%2FPaintBucket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coac%2FPaintBucket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coac%2FPaintBucket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coac%2FPaintBucket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coac","download_url":"https://codeload.github.com/Coac/PaintBucket/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245485691,"owners_count":20623237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["color","javascript","paint","pbm"],"created_at":"2024-12-03T11:10:35.191Z","updated_at":"2025-10-18T16:10:16.344Z","avatar_url":"https://github.com/Coac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Bienvenue sur PaintBucket\n\nCe projet vous permet de colorier vos fichiers en noir et blanc au format PBM. Double-cliquez sur le fichier index.html\npour lancer le projet localement sur votre machine. Aucun serveur web n'est requis, seulement un navigateur web récent\n(Chrome ou Chromium recommandé pour une meilleure gestion de la mémoire).\n\nUtilisez le formulaire pour envoyer un fichier. Cochez la case Draw Picture pour afficher l'image directement dans le\nnavigateur (recommandé). Vous pouvez aussi demander à ce que le fichier soit généré, mais il est déconseillé de\ntélécharger les images de grande taille (plus d'explications ci-dessous), c'est à dire supérieures à 1Mo en noir et blanc\nenviron. Cela risque de faire crasher le navigateur.\n\n### Choix du langage\n\nNous avons choisi d'utiliser le JavaScript comme langage de programmation pour ce projet.\n\n#### Le JavaScript\n\nJavaScript est un langage inadapté pour les tâches lourdes car l’exécution de scripts est rapidement limitée par les\nnavigateurs (ce que nous ignorions). Nous avons choisi ce langage afin d'améliorer nos compétences dans ce langage que\nnous ne connaissions pas beaucoup (peu d’expérience) et éviter le Java avec lequel nous avons fait de très nombreux\nprojets à l'IUT.\n\nL'application est découplée et conçue pour être évolutive et modulable :\n\n  - **Bucket** est en charge de la gestion des images (gestion de l'upload, ...). Il est indépendant des modèles de\n  données utilisés (listes, tableaux, autres) et délègue les opérations sur la matrice à Paint pour obtenir des données\n  concrètes : Color ou Pixel.\n  - **Paint** est en charge de la manipulation des matrices (conception, manipulation, colorisation, ...). Il est\n  indépendant de Bucket et dépendant des modèles de données.\n  - Le dossier **Components** contient les classes concrètes (Pixel, Color) utilisées dans nos algorithmes.\n  - Le dossier **DataStructures** contient les modèles de données utilisés (LinkedElement et Head qui forment les\n  LinkedLists et le DisjointSetsManager qui manipule les ensembles). Ces modèles de données sont indépendants du type\n   de données qu'ils utilisent (Color, Pixel).\n  - Le dossier **Exceptions** contient la définition des exceptions utilisées dans l'application.\n  \nL'application est également découplée du code HTML lui-même, il est possible de la greffer à n'importe quelle page\ncontenant un Canvas, un formulaire, une barre de chargement et quelques boutons.\n\n#### Contraintes et limites\n\nLe JavaScript provoque un certain nombre de contraintes majeures pour ce type de projet, que nous n'avions pas anticipées.\n\n  - Le navigateur limite la RAM totale pouvant être utilisée par JavaScript. En conséquence, certaines\n  images telles que la carte du monde (8,6 Mo) ne peuvent être colorées car beaucoup trop volumineuses une fois coloriées.\n  - Le JavaScript ne sait pas manipuler les fichiers en dehors des formulaires. Il est nécessaire de passer par un\n  formulaire pour pouvoir uploader l'image. Dans nos jeux de tests, nous ne pouvons donc pas simuler ce type d'upload.\n  Nous avons donc utilisé des images générées pour vérifier le bon déroulement de l'algorithme (méthode testGenerate)\n  avec un système pour \"Mocker\" Bucket, mais aussi testé chaque fonctionnalité unitairement. Cela garantit que la quasi-\n  totalité des aspects fonctionnels soient testés.\n  - Le JavaScript ne sait pas non plus écrire de fichiers. Lorsque vous téléchargez une image, vous accédez à un lien\n  de type \"data:\" qui contient l'image encodée en base64. Cela provoque des ralentissements très, très importants lors\n  du téléchargement. Cela est lié uniquement au navigateur (et non à notre algorithme) puisque l'image est déjà générée\n  en mémoire.\n  - Le JavaScript est un langage peu rapide dès qu'il nécessite de mettre en mémoire des objets. Par exemple, le parsing\n  d'une image de 1Mo sans instanciations (donc sans \"New\", avec des tableaux uniquement) prend environ 150ms contre\n  environ 1500ms avec instanciations, soit 10 fois plus, ce qui limite la manipulation d'images de grande taille.\n  - Le JavaScript conserve le contexte d'exécution, tant que la page n'a pas été rafraîchie. Nous avons travaillé pour\n  que le script se réinitialise correctement lors de plusieurs uploads successifs, mais il est recommandé de changer\n  d'onglet si vous travaillez avec plusieurs images de grande taille, car la mémoire n'est pas toujours très bien gérée,\n  surtout avec Iceweasel (Mozilla Firefox).\n  \nNous avons donc travaillé afin d'optimiser au maximum nos algorithmes en limitant la consommation mémoire.\n\n### Dépendances et bibliothèques\n\nNous n'utilisons aucune bibliothèque externe et ne nous reposons que sur les outils fournis nativement par JavaScript.\n\n### Problèmes de performances\n\nLa version actuelle de notre projet contient les contraintes suivantes.\n\n#### JavaScript\n\nLe JavaScript étant un langage interprété, l'upload de fichiers de grande taille peut ralentir votre ordinateur\net consommer beaucoup de RAM. Certains fichiers peuvent même faire planter le navigateur. Nous avons travaillé afin\nd'optimiser au mieux notre algorithme mais les performances ne peuvent atteindre celles d'un langage compilé.\nSi votre navigateur indique que le script ne répond pas, vous pouvez cliquer sur continuer pour lui laisser plus\nde temps. Continuer pendant une très longue durée peut ralentir votre ordinateur (sous Mozilla Firefox).\n\nNous avons réussi à colorier toutes les images fournies sauf la carte du monde qui provoque des dépassements mémoire.\nPour la carte de la France, il est conseillé de décocher la case de génération du lien de téléchargement.\n\n#### Compatibilité\n\nPaintBucket a été testé sous Google Chrome (Chromium) et Firefox (dont Iceweasel), dans leurs versions les plus récentes,\ntournant sur Debian, Windows 7 et Windows 8.\n\nIl semble que Google Chrome présente de meilleures performances que Firefox. Internet Explorer est fortement\ndéconseillé (risque de non support de certaines normes JavaScript).\n\n#### Téléchargement\n\nIl n'est actuellement pas possible de générer des fichiers de manière efficace nativement en JavaScript. La\ntechnique que nous utilisons pour générer le fichier est la plus performante, mais les navigateurs ont des\ndifficultés à gérer des chaînes de caractères de plusieurs Mo (un fichier de 1 Mo aura un poids de 10 Mo en sortie\nd'algorithme).\n\nEn cliquant sur le lien de téléchargement, vous serez redirigé vers une page dont l’URL contiendra l'ensemble\ndes données du fichier (qui sera alors immédiatement téléchargé). Cela peut planter votre navigateur. Le temps\nd'attente n'est pas lié à notre algorithme (le fichier est généré et prêt à être téléchargé dès que l'image\ns'affiche à l'écran) mais au temps de traitement des données par le navigateur.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoac%2Fpaintbucket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoac%2Fpaintbucket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoac%2Fpaintbucket/lists"}