Kumiko, découpe de bande dessinée et lecture case par case

Posté par  . Édité par Davy Defaud, Xavier Teyssier, Pierre Jarillon, Ysabeau 🧶 🧦 et palm123. Modéré par Davy Defaud. Licence CC By‑SA.
37
17
déc.
2020
Culture

Lire une bande dessinée, chouette ! Sur un écran de téléphone, un peu moins.

Kumiko est un petit outil qui détecte les cases sur une page de bande dessinée, et fournit ces informations à un lecteur « case par case ». Plus besoin de zoomer à la main pour lire les bulles.

Vous voulez voir, essayer ?

xkcd by Randall Munroe, #208, CC BY-NC 2.5 xkcd, par Randall Munroe, #208 — CC BY‑NC 2.5.

Des exemples sont proposés sur le site de démo, essayez de lire xkcd ou Pepper&Carott case par case !

Essayez aussi d’envoyer vos propres images pour voir comment Kumiko s’en sort.

Le projet, sous licence AGPL, est codé en Python et fait bon usage de la bibliothèque de reconnaissance d’images OpenCV, pour l’instant principalement pour la détection de contours. Le lecteur case par case est basé sur du JavaScript dans le navigateur.

Au fur et à mesure, des modèles de pages existants sont ajoutés pour servir de tests de non‑régression. Kumiko pourra ainsi découper proprement toujours plus de cases.

Au plaisir de vos retours sur ce projet !

Aller plus loin

  • # hummpfff

    Posté par  (Mastodon) . Évalué à 5.

    C'est rigolo mais c'est un peu nier l'importance des ellipses dans la bande dessinée.

    • [^] # Re: hummpfff

      Posté par  . Évalué à 1.

      Hello,
      Je ne savais pas ce qu'était l'ellipse en BD, donc j'ai jeté un œil.
      Tu veux dire que parce qu'on ne lit qu'une case à la fois, on s'imagine moins bien ce qui passe entre les cases ?

      • [^] # Re: hummpfff

        Posté par  (site web personnel, Mastodon) . Évalué à 8.

        Il peut y avoir un effet comique qu'on perd du coup par exemple.

        Sans parler du fait que la répartition des cases dans l'espace peut être importante, si on lit case par case, on perd cet effet, voire on perd du sens. Gotlib, s'en servait dans ses Rubriques à brac par exemple, notamment celle sur la girafe. On perd aussi ce qui peut être dans les marges.

        « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

        • [^] # Re: hummpfff

          Posté par  . Évalué à 5.

          Je suis bien d'accord avec vous deux ! L'idéal reste de voir les pages une à une telles qu'elles ont été pensées et organisées. Et pour ma part, en version papier. :)
          Les auteur.ices de BD ne manquent pas d'imagination pour leurs structures de pages, et on ne va pas leur en vouloir.

          Pour ce qui est des marges, c'est effectivement un point d'amélioration. Pour le moment Kumiko a tendance à exclure tout ce qui n'est pas une case (lettrage en marge découpé en autant de lettres, ignorées car trop petites).

          • [^] # Re: hummpfff

            Posté par  (site web personnel, Mastodon) . Évalué à 4. Dernière modification le 17 décembre 2020 à 14:42.

            Je pense que l'outil est surtout fait pour du "cartoon" américain.

            On pourrait, par exemple, aussi l'utiliser à des fins ludiques ou pédagogiques avec des "bd" faites uniquement pour le téléphone mobile :

            1. une case une question, une idée;
            2. une case la réponse, la solution.

            Principe à affiner.

            « Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.

            • [^] # Re: hummpfff

              Posté par  . Évalué à 3.

              C'est une fort bonne idée, merci !
              Il faudrait alors avoir un mode d'affichage "case seule" pour éviter que le ratio de l'écran ne permette de voir un bout de case suivante, et donc de réponse :)

        • [^] # Re: hummpfff

          Posté par  . Évalué à 10.

          Je plussoie énergiquement.

          Par exemple l'excellente (vraiment) BD « Imbattable » base tout son effet comique dessus. C'est un super héros qui joue du fait de pouvoir agir entre les différentes cases, ce qui brise autant la temporalité que le quatrième mur. Difficile de l'adapter à un écran de mobile, donc ;)

          https://www.dupuis.com/imbattable/bd/imbattable-tome-1-justice-et-legumes-frais/70978

          Mais l'outil reste chouette, ceci dit.

          • [^] # Re: hummpfff

            Posté par  . Évalué à 2.

            Merci pour l'exemple d'Imbattable, à tester !

            Note que si deux cases sont reliées par un élément graphique d'une certaine taille (pas juste un filet entre deux bulles par exemple), les deux cases sont détectées comme une seule, ce qui permet de visualiser le tout correctement.

            • [^] # Re: hummpfff

              Posté par  . Évalué à 5.

              Le truc, c'est que pour Imbattable, l'unité de lecture est vraiment la page.
              Pour un exemple assez frappant, tu peux aller regarder les quelques pages disponibles sur le lien que j'ai posté : il y a un strip où le héros retrouve un tableau volé, et le fait remonter ligne par ligne du bas vers le haut de la page.
              Du point de vue des autres personnages, qui au contraire du héros n'ont pas conscience d'être dans une bande-dessinée, le tableau est rendu avant d'avoir été retrouvé.

              Après, j'ai bien conscience qu'il s'agit du corner-case par excellence ;)

              • [^] # Re: hummpfff

                Posté par  . Évalué à 2.

                Ah oui chouette exemple. Effectivement ça va être compliqué :)

            • [^] # Re: hummpfff

              Posté par  . Évalué à 9.

              Fred, jouait énormément sur les cases et la page, notamment dans la bande dessinée Philémon ( années 60 à 80). Des bons exemples sont l'album « le Naufragé du A » (1968) ou « Simbabbad de Batbad » (1970). Les pages sont roulées avec leur cases, certaines sont en relief, le personnage passe d'une case à l'autre, etc…

              Dans « Little Nemo in Slumberland » (1905) de winsor McCay, il y avait déjà des jeux avec les cases, notamment des cases rondes, ou une case encastrée dans une autre.

              Tout ce qui est autour de l'OuBaPo ou encore Chris Ware, sont beaucoup de jeux de torsions des règles des BD. L'association propose des jeux dans le style de l'OuBaPo, (l'OuLiPo faisait aussi ça) où l'on crée des BD à partir de cases sur des planchettes séparées tirées au hazrd entre autre, mais on sort complétement du domaine de ce logiciel là .

              • [^] # Re: hummpfff

                Posté par  . Évalué à 2.

                Merci pour tous ces exemples !

          • [^] # Re: hummpfff

            Posté par  (site web personnel) . Évalué à 6.

            Un autre cas, qui est peut-être encore plus flagrant, car seul une version papier peut réellement être lue : la série des Julius Corentin Acquefacques dont un tome possède une case qui est un trou vers la case de la page suivante et précédente ou encore un tome qui se lit en mode "européen" et en mode "manga", …

            • [^] # Re: hummpfff

              Posté par  . Évalué à 2.

              Génial ! En effet je vois pas de solution pour la case-trou ni pour le double sens de lecture :)

      • [^] # Re: hummpfff

        Posté par  (Mastodon) . Évalué à 7. Dernière modification le 17 décembre 2020 à 17:01.

        Le principe d'avoir des cases plus ou moins de tailles égales en BD, c'est justement pour l'auteur de pouvoir péter tout ça quand ça lui sent et qu'il veut exprimer quelque chose de différent. Ça peut se faire de diverses manières, changements de format, suppression du cadre, embriquement d'une case dans une autre, chevauchement, partie du dessin qui dépasse/sort d'une cas pour en chevaucher une autre…et j'en oublie sûrement.

        Et dans les BD faites pour être lues en ligne on commence aussi à avoir des animations dans certaines case spécifiques voir entre des cases.

        Ce qu'il se passe entre deux cases est parfois plus travaillé et important que les cases elles-mêmes.

        C'est beaucoup mieux expliqué dans la BD L'Art Invisible de Scott McCloud (Understanding Comics - The invisible art en anglais) que je recommande chaudement.

        • [^] # Re: hummpfff

          Posté par  . Évalué à 3.

          Yes, j'ai vu des BD au format numérique qui incluaient du son également, quand on arrive sur une certaine case. Sky is the limit.

          Kumiko a une taille max (relative) pour ce qu'elle peut exclure entre deux cases. Si l'inter-case est bien rempli, les deux cases autour sont considérées et affichées comme une seule, permettant de voir entre les deux aussi.

      • [^] # Re: hummpfff

        Posté par  . Évalué à 5. Dernière modification le 17 décembre 2020 à 17:16.

        Je me permets d'en remettre une couche dans ce fil de discussion :

        Kumiko est une excellente idée mais il doit permettre de simplement "post-traiter" les découpages trouvés. Pour moi, cela implique les opérations suivantes :
        - Modification de l'ordre de lecture des cases
        - Redécoupage/fusion des cases trouvées
        - Modification du niveau de zoom
        - Ajout d'un délai pour passer aux cases suivantes automatiquement

        Pour "Imbattable" par exemple, on pourrait imaginer une première lecture dans l'ordre chronologique, une seconde dans l'ordre du protagoniste principal (ou inversement) qui finirait sur la page entière. Plusieurs sens de lecture pourraient être proposés selon l'imagination des lecteurs etc.

        La première partie de la vidéo de Ave!Comics illustre assez bien ce dont je parle : seoul_district_teaser.

        Enfin, tu l'auras compris, ici je vois Kumiko comme un back-end, qui permettrait un pré-découpage servant de base, qu'il faudrait associer à un front-end pour permettre à un humain une "post-production" personnalisée, enregistrable et bien sûr partageable.

        Enjoy !

        • [^] # Re: hummpfff

          Posté par  . Évalué à 6.

          Bien d'accord !
          On peut rêver, mais Kumiko ne saura probablement jamais tout faire parfaitement.

          Cet outil de post-prod est dans la roadmap :)

          • [^] # Re: hummpfff

            Posté par  . Évalué à 4.

            Je pense que tout ça doit être intégrable au format epub (de l'HTML5 avec toutes ses possibilités). Cela permettrait de le rendre utilisable avec une grande partie de lecteur epub et/ou dans un navigateur. Visiblement, la lecture de Kumiko passe déjà par un navigateur.

            • [^] # Re: hummpfff

              Posté par  . Évalué à 3.

              Oui, la lecture se fait pour l'exemple dans le navigateur, avec un simple zoom sur chaque page, sur les cases successives.
              Je ne connais pas bien epub mais ça vaudrait le coup de se pencher là-dessus, voir s'il y a déjà des fonctionnalités rendant possible la lecture case par case.

  • # Concept intéressant qui gagnerait beaucoup dans un lecteur complet

    Posté par  . Évalué à 7.

    J'aime beaucoup le principe. J’apprécie énormément que ça ne se contente pas d'afficher individuellement les cases les unes après les autres mais que ça déplace la vue sur la page complète : cela permet de ne pas faire disparaitre totalement la notion de cadrage. C'est bien de pouvoir alterner entre le mode page et case, mais l'IHM pour faire ça n'est pas pratique.

    En fait l'idée gagnerait énormément intégrée dans un lecteur de BD complet pour tablette/téléphone. On aurait la possibilité de passer du mode case au mode page en pinçant/écartant deux doigts. Ça permettrait aussi de calculer les pages à venir pendant la lecture de la page en cours. En effet le temps de calcul et un peu long. S'il devait se produire à chaque page ça serait vite ennuyeux.

    • [^] # Re: Concept intéressant qui gagnerait beaucoup dans un lecteur complet

      Posté par  . Évalué à 5.

      Ça me rappelle Ave!Comics qui intégrait une bibliothèque (au sens physique du terme) et un lecteur dynamique.
      Le rendu était vraiment excellent et ça donnait "vie" aux pages.

      L'inconvénient c'est que l'animation devait être faite à la main (je suppose au moins partiellement).
      L'avantage c'est qu'elle n'était pas limitée à du case par case, ni à des format de cases particulier. Elle permettait aussi certains effets, comme afficher les bulles de contexte avant la case, ce qui mettait bien dans l'ambiance.

      Bref, j'aurai adoré pouvoir faire ça sur les BDs de mon choix avec un frontend simple (je ne code qu'avec mes pieds).

      J'espère que Kumiko permettra de reprendre les découpages et les modifier à terme. Car une automatisation de cette tâche de découpage est complexe et peut dégrader l'expérience de lecture, comme indiqué par les autres commentaires.
      Pouvoir simplement définir un ordre de lecture des cases, un niveau de zoom par case et les fusionner/redécouper serait le top pour moi !

    • [^] # Re: Concept intéressant qui gagnerait beaucoup dans un lecteur complet

      Posté par  . Évalué à 2.

      Merci pour ton commentaire chaleureux, ravi que ça te plaise !

      L'IHM est en effet très sommaire et devait juste servir à montrer les possibilités de la découpe de cases. Elle n'a pas forcément vocation à devenir un lecteur très abouti (on aura noté que le design n'est pas mon fort :p).

      Je pense comme toi que Kumiko fera mieux son job si c'est un lecteur déjà bien fonctionnel qui intègre le résultat des découpes.
      Tu aurais des noms de lecteurs de BD sympas à qui soumettre cette idée ?

  • # nextcloud

    Posté par  . Évalué à 5.

    J'adore l'idée !!! Purée ça déchire !

    Encore bravo pour cette réalisation qui me laisse pantois.

    Ce que je vois comme nouveau défi:

    • réaliser une application web nextcloud. Car pas mal de personne utilise nextcloud et que ça me semble être un bon endroit pour y coller ces BD.
    • en causer aux autres créateurs de lecteur de BD:
    • définir un standard pour les cbz. Le truc serait d'inclure un fichier du genre .meta-kumiko qui liste page par page l'emplacement des cases.
    • [^] # Re: nextcloud

      Posté par  . Évalué à 2.

      Merci pour les louanges :p

      Sur les idées point par point :

      • nextcloud paraît en effet être une bonne base de stockage pour les BD. Je pense pas me lancer tout de suite là-dedans par contre, ça a l'air d'être du taf.
        Note que tu peux enregistrer les pages HTML produites par Kumiko, elles sont indépendantes du site de démo (+ deux fichiers js et un css qui devraient s'enregistrer avec la page). Et donc les visionner en local dans ton navigateur, voire les publier sur un site à toi. Mais tout le monde n'a pas un tel hébergement.

      • Merci pour ces deux recos de lecteurs, je vais les contacter !

      • Bonne idée aussi de définir un standard, ce serait canon d'ouvrir ton .cbz avec n'importe quel lecteur un peu (avancé) et d'avoir la lecture case par case intégrée !

    • [^] # Re: nextcloud

      Posté par  . Évalué à 3. Dernière modification le 19 décembre 2020 à 06:47.

      Je m’apprêtais à poster quand j'ai vu ce post.
      La lecture d'une BD sur un écran de petite taille est toujours un casse tête.
      Définir et ajouter un méta fichier qui indique l'emplacement des cases à Kumiko me semble une super idée.
      Il suffirait de l'intégrer aux CBZ ou de le déposer à côté des PDF et fichiers plus difficilement modifiables.
      On pourrait définir le sens de lecture, des transitions entre les cases avec des vues globales quand c'est nécessaire.

  • # Un peu simpliste

    Posté par  . Évalué à 5.

    C'est bien, mais c'est un peu basique.
    Ça ne fonctionne que si le dessinateur fait des cases bien séparées et ne déborde pas (façon ligne claire de Hergé). Ce qui couvre une bonne partie de la production en bande dessinnée, mais tu va passer à côté des plus originales, où la page représente un tout.

    Je vais prendre en exemple une webcomic que j'aime bien: https://unsoundedupdates.tumblr.com/
    (attention spoiler, je vous recommande de le lire depuis le début 😉)

    http://www.unsoundedcomic.com/comic/ch01/ch01_20.html
    http://www.unsoundedcomic.com/comic/ch02/ch02_07.html
    http://www.unsoundedcomic.com/comic/ch02/ch02_26.html

    Et les hors-catégorie qui profitent du média web:
    http://www.unsoundedcomic.com/comic/ch07/ch07_28.html (regardez les suivantes)
    http://www.unsoundedcomic.com/comic/ch09/ch09_57.html
    http://www.unsoundedcomic.com/comic/ch14/ch14_39.html (javascript nécessaire pour celle-ci)

    • [^] # Re: Un peu simpliste

      Posté par  . Évalué à 3. Dernière modification le 17 décembre 2020 à 20:44.

      Kumiko avance à son propre rythme, un peu lambin pour une ninja si tu veux mon avis. :)

      Merci pour les exemples d'unsoundedcomics.

      La découpe a été améliorée pour ignorer les petits éléments graphiques entre les cases, afin de pouvoir les dissocier. Mais comme noté dans pas mal d'autres commentaires, il faut aussi veiller à ne pas trop les ignorer, car ils ont parfois toute leur importance !
      C'est toute la difficulté du truc.

      Je t'invite à jeter un œil aux améliorations récentes sur cet aspect : voici les "diffs visuels" des dernières versions concernées : v1.1 et v1.2.1.

      Pour ce qui est des cases qui se chevauchent comme dans tes exemples, je pense qu'il faudra recourir à une détection de lignes dans l'image, quand la détection de contours ne suffit pas.
      Plein d'idées pour la suite :)

    • [^] # Re: Un peu simpliste

      Posté par  (Mastodon) . Évalué à 5.

      Et les hors-catégorie qui profitent du média web:
      http://www.unsoundedcomic.com/comic/ch07/ch07_28.html (regardez les suivantes)

      Je viens de regarder cette partie, c'est quand même fâcheux de faire des transitions comme ça et d'obliger le lecteur à aller viser une flèche avec sa souris au lieu de pouvoir piloter avec les flèches de son clavier…

  • # Super idée

    Posté par  . Évalué à 3.

    Lire une bande dessinée, chouette ! Sur un écran de téléphone, un peu moins.
    

    Même sur PC je suis pas fan ' mais bon il y a des BDs pas mal qui sont uniquement disponibles en ligne et pas en version papier.

    J'aime beaucoup l'idée, par contre ça serait bien que ton soft fonctionne sur les autres types de background. Et ça doit pas être si compliqué (si ton background est plus ou moins uniforme bien sûr)… surtout que t’arrives déjà à automatiquement tout découper sur un background blanc, ce qui n'est pas si simple à faire (quand on a pas de notion de traitement d'images).

    Bon courage pour la suite de ton projet !! :)

    • [^] # Re: Super idée

      Posté par  . Évalué à 2. Dernière modification le 19 décembre 2020 à 14:26.

      Hello, et merci pour tes encouragements !

      Je pense m'atteler prochainement à la détection de la couleur de fond, ce qui est en effet nécessaire dans certains cas (même minoritaires).
      J'imagine bêtement prendre, en plus du blanc, la couleur du pixel {0,0} et voir le nombre de cases détectées en la considérant comme couleur de fond (et leur organisation dans l'espace, leur taille etc. pour voir si ça a du sens).

      Si tu as des exemples n'hésite pas à les poster, je pourrai m'en servir pour tester !

      • [^] # Re: Super idée

        Posté par  . Évalué à 2.

        J'imagine bêtement prendre, en plus du blanc, la couleur du pixel {0,0} et voir le nombre de cases détectées en la considérant comme couleur de fond (et leur organisation dans l'espace, leur taille etc. pour voir si ça a du sens).
        

        Bonne idée =D ça devrait couvrir une bonne partie de cas !

        Si tu as des exemples n'hésite pas à les poster, je pourrai m'en servir pour tester !

        Je te laisse intégrer l'image suivante dans tes tests : https://www.drugsandwires.fail/wp-content/uploads/2015/03/page0003colour2.jpg. A mon avis t'as pas à trop modifier ton code pour que ça marche… et en même temps ça me semble pas être un cas si particulier que ça xD

        • [^] # Re: Super idée

          Posté par  . Évalué à 1.

          Je viens de publier une détection basique pour les planches sur fond noir.
          Ça marche pas mal pour Drugs & Wires ;)

  • # Question Triviale

    Posté par  . Évalué à 6.

    Hello, vraiment je suis super content car un jour je m'étais dit ce serait bien qu'un outil me présente les case de mes mangas une à une ! Et toi tu l'as fait

    Ma question est : est ce que ton algo fonctionne de droite à gauche comme les mangas?.

    PS : D'ailleurs je suppose que le nom vient de la prononciation japonaise de comics ?

    • [^] # Re: Question Triviale

      Posté par  . Évalué à 4.

      Content que ça plaise !

      Je n'ai pas encore rajouté d'option pour numéroter les cases de droite à gauche pour le sens de lecture japonais, mais c'est prévu.

      Ce sera fait très prochainement, avec une case à cocher sur le site de démo :)

    • [^] # Re: Question Triviale

      Posté par  . Évalué à 4.

      C'est fait, testable sur le site de démo avec une case à cocher !

      Et oui, Kumiko a été choisi à la fois pour la similitude phonétique avec "comic" prononcé à la japonaise, et avec "comic cutter" :)

      • [^] # Re: Question Triviale

        Posté par  . Évalué à 2.

        Bravo nicooo pour l'implémentation éclair, je vais tester tout ça :) :)

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.