img2calc: conversion image → Python toutes calculatrices

[Adriweb]

Le code PHP de img2calc est-il disponible ?

C'est coté client, en fait - voici le code: https://github.com/TI-Planet/img2calc

[critor]

Bonjour,

Le code PHP de img2calc est-il disponible ?

Je faisais un test avec 2 images ayant un même nuancier de 12 couleurs (ces images étant les calques d'un gif). J'ai mis en haut à gauche 12 pixels successifs avec ces couleurs en espérant trouver la même palette lors des exports. Or, dans la conversion (Numworks - Kandinsky) j'obtiens 2 palettes différentes :

Code: Select all

palette = (
"#202c48","#482828","#484c78","#d04068","#5878a0","#b064b0","#609498","#f0a888","#b8acc0","#d89ca0","#f0ccb8","#6094a0",
)

palette = (
"#202c48","#482828","#484c78","#d04068","#5878a0","#b064b0","#609498","#f0a888","#d89ca0","#e8c8b8","#6094a0","#e0dce0",
)

Le but était d'exporter 1 à 1 les images d'un gif animé avec img2calc (ce qui permet d'avoir image1 = (b"\..."), image2 = etc mais avec une palette unique. Ensuite petite boucle sur le draw_image et l'affaire était a priori réglée.

Une idée ? Merci !

Effectivement, la palette est en partie calculée/optimisée par ImageMagick à chaque conversion d'image.
Même pour des images proches, il peut donc y avoir de légères variations de valeurs ou même d'ordre dans les palettes générées.

En l'état, img2calc ne convient donc pas à la conversion d'une série d'images destinées à partager la même palette, par exemple pour des jeux ou une animation.

J'y avais déjà pensé et avais 2 pistes :

• soit pouvoir autoriser la conversion de plusieurs images à la fois
• soit pouvoir laisser l'utilisateur imposer la palette

[cirekraft]

Merci @Adriweb pour l'adresse du code, ça marche nickel en localhost.

@critor, effectivement l'une ou l'autre solution permettrait de convertir plusieurs images. Maintenant, pour les gif animés, souvent il n'y a que les parties de l'image qui bougent qui sont mémorisées, le reste de chaque calque est transparent et permet donc de récupérer ce qu'il y avait sur les calques inférieurs. C'est donc plus optimisé que de coder entièrement chaque image du gif.

[Adriweb]

En tout cas, on est preneur de PR sur github, si jamais

[cirekraft]

Bjr,

J'ai fait qq modifs dans le programme img2calc pour pouvoir utiliser une même palette de couleurs et obtenir ce que je voulais, à savoir transformer image par image un gif animé en script Python (pour la Numworks). Le résultat final est ici

Exemple de script Python pour la Numworks : https://my.numworks.com/python/schraf/gif_dance

Ce n'est pas assez propre et pratique pour proposer de l'ajouter à votre super programme mais je donne juste l'idée :

- Il y a une partie préparatoire dans Gimp (ouvrir le gif animé, réduire le nombre de couleurs, dimensions des calques, vérification qu'il n'y a pas de transparence...)
- Dupliquer la première image et insérer toutes les couleurs de la palette pour être sûr que la première palette générée contiendra bien l'ensemble des couleurs à utiliser
- Exporter le calque supérieur en gif et le convertir avec img2calc. On a alors la palette à garder et une image qui ne sert à rien. La palette est automatiquement mémorisée dans une variable globale savePal et une case à cocher "save palette" s'active.
- Dans Gimp, mettre un autre calque au niveau supérieur et l'exporter comme gif
- getSave permet de tester si on doit utiliser la même palette ou en créer une nouvelle :

Code: Select all

function getSave(w) {
  el = document.getElementById("saveInput");    // La case à cocher
  return el.checked;
} 

Tout simplement il y a un code comme :

Code: Select all

if (!getSave()) {
  // Création d'une nouvelle palette
  savePal = [...paletteRGBA_a];
}
else {
  // On récupère la palette
  paletteRGBA_a = [...savePal];

- Enfin, dans la fonction handleOutImgPythonRLE, je n'utilise plus indexOfArrayInArray pour récupérer la position de la couleur dans la palette car d'une image à l'autre getPixel_RGBA_array ne semble pas renvoyer les mêmes valeurs (même si la palette est identique). J'ai donc ajouter une autre fonction indexOfArrayInArray2 qui cherche (distance Euclidienne) quelle couleur se rapproche le plus de la palette imposée. On part du max (255 pour les composantes RGB et Alpha) et si une distance == 0 est trouvée on arrête sinon on renvoie le 'i' qui a donné la plus petite distance.

Code: Select all

    function indexOfArrayInArray2(item, array) {
        var maxi = 4 * 255 ** 2
        var choix = -1;
        for (var i = 0; i < array.length; i++) {
            if(array[i].length==item.length) {
                let dist = 0;
                for(var k=0; k<item.length; k++) {
                    dist += (array[i][k] - item[k]) ** 2
                }
                if(dist == 0) return i;
                if (dist < maxi) { choix = i; maxi = dist; }
            }
        }
        return choix;
    }

- Il suffit ensuite de copier-coller les codes générés par img2calc pour chacune des images

L'idéal (pour moi) serait d'avoir un script Python pour tout faire dans Gimp mais j'avoue ne pas encore avoir compris exactement la méthode de compression RLE qui est utilisée.

[cirekraft]

Je continue l'exploration de img2calc, cette fois avec l'utilisation de la transparence.

En ouvrant un gif animé avec Gimp et en appliquant Filtre - Animation - Optimiser (différence), le logiciel modifie les calques pour ne garder en non-transparent que les pixels qui changent d'un calque à l'autre. Cela évite de mémoriser plusieurs fois les mêmes informations.

Or img2calc gère les images qui ont un canal alpha (la transparence), cela m'a permis de créer cette animation colorée contenant 25 images et ne pesant que 12,2Ko.

La vitesse du simulateur correspond bien à ce que je vois sur une vraie Numworks.

[critor]

Très joli, bravo.

Pour la possibilité de convertir un groupe d'images avec la même palette, est-ce que tu aurais une idée niveau interface utilisateur ?
Merci.

[cirekraft]

Le cas le plus simple (car pas de changement d'interface) serait celui d'un gif unique ayant plusieurs calques car on serait sûr que la palette est bien définie, que les images ont la même taille etc. Il faudrait "juste" savoir si magickApi.js est capable de parcourir les différents frames d'un gif. Dans ce cas on récupère (ou on crée) la palette du premier et on l'utilise pour les autres.

S'il s'agit de plusieurs images séparées à sélectionner, ça me semble difficile d'être sûr qu'elles aient la même palette et la même taille... Et si on suppose que oui, pas besoin de changer l'interface. Il y a seulement la sélection multiple qui doit être autorisée et la mémorisation (dans global_inFileName) qui doit devenir un tableau à parcourir pour créer l'unique ou les fichiers de conversion.

Je vois dans le code source une fonction nearestiRGB pour rechercher la couleur la plus proche dans une palette existante. Elle n'utilise pas la norme 2 (distance Euclidienne) mais la norme 1 (somme des différences en valeur absolue), elle sera utile dans le cas d'images multiples.