Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.
La shoutbox n'est pas chargée par défaut pour des raisons de performances. Cliquez pour charger.

Forum Casio - Projets de programmation


Index du Forum » Projets de programmation » Programme de dessin Bitmap → Super Drawstat
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Programme de dessin Bitmap → Super Drawstat

Posté le 12/09/2018 19:20

Suite aux débats mené sur ce topic pour concevoir un algo capable de convertir une image bitmap en MDS (Multi DrawStat), j'ai été frustré qu'aucune solution viable n'ait encore vu le jour pour permettre de convertir une image bitmap en un SDS (Super Drawstat), ce qui est différent.

J'ai donc tenté de mettre au point un programme en Javascript qui permettrait de faire cela manuellement. Voici ce que j'obtins dans un premier lieu :

Un programme à peu près fonctionnel au CSS bâclé, avec un script assez laid. Cliquez dans le canvas pour y poser des points, desquels découleront les lignes de votre dessin. Les points de couleur différente ne sont pas liés entre eux.

Inconvénient majeur de ce programme : vous n'avez pas la possibilité de voir se tracer les lignes ! Je peux vous dire que c'est chiant de dessiner un sprite à l'aveuglette et de devoir attendre de voir le dessin sur calto pour connaître le résultat. GRRRR !

J'ai donc implémenté une fonction pour tracer les lignes pixel par pixel en m'appuyant sur l'algorithme de Bresenham. J'ai rajouté aussi deux lignes de CSS et voici le résultat :

Le tracé rouge correspond à la ligne qui joint le dernier point au curseur, ce qui permet de visualiser en direct la ligne qu'on s'apprête à tracer.

Seulement, j'ai un problème. Le résultat oncalc diffère de ce que trace mon programme ! Gargl !

Pour vous donner une idée, voici le script en JS :
function plotLine(firstX, firstY, secondX, secondY, cc) {
    if (Math.abs(secondY - firstY) < Math.abs(secondX - firstX)) {
        //Si la différence entre les abscisses est plus grandes que la différence entre les ordonnées...
        if (firstX > secondX) {
            //Si le premier point a une abscisse plus grande que le deuxième, on inverse.
            plotLineLow(secondX, secondY, firstX, firstY, cc);
        } else {
            plotLineLow(firstX, firstY, secondX, secondY, cc);
        }
    } else {
        //Autrement, on utilise plotLineHigh.
        if (firstY > secondY) {
                //Si le premier point a une ordonnée plus grande que le deuxième, on inverse.
            plotLineHigh(secondX, secondY, firstX, firstY, cc);
        } else {
            plotLineHigh(firstX, firstY, secondX, secondY, cc);
        }
    }
}


Voici ensuite les fonctions plotLineHigh et plotLineLow. Je doute que vous n'ayez besoin de les lire.
function plot(X, Y, cc) {
    cc.fillRect(X,Y,1,1);
}

function plotLineLow(firstX, firstY, secondX, secondY, cc) {
    var dx = secondX - firstX;
    var dy = secondY - firstY;
    var yi = 1;
    if (dy < 0) { yi = -1; dy = -dy; }
    var D = 2*dy - dx;
    console.log ("dx = " + dx + " | dy = " + dy + " | D = " + D);
    var y = firstY;
    for (var x = firstX; x <= secondX; x++) {
        plot(x, y, cc);
        if (D > 0) {
            y += yi;
            D -= 2*dx;
        }
        D += 2 * dy;
    }
}

function plotLineHigh(firstX, firstY, secondX, secondY, cc) {
    var dx = secondX - firstX;
    var dy = secondY - firstY;
    var xi = 1;
    if (dx < 0) { xi = -1; dx = -dx; }
    var D = 2*dx - dy;
    console.log ("dx = " + dx + " | dy = " + dy + " | D = " + D);
    var x = firstX;
    for (var y = firstY; y <= secondY; y++) {
        plot(x, y, cc);
        if (D > 0) {
            x += xi;
            D -= 2*dy;
        }
        D += 2*dx;
    }
}


En gros, la fonction linePlot permet de tracer la ligne, comme vous vous en doutez. Elle utilise deux fonctions différentes : plotLineLow quand l'écart entre les abscisses des deux points est plus grand que l'écart entre leurs ordonnées (comprend donc les lignes horizontales), et plotLineHigh dans le cas inverse.

Seulement, je me demande si j'ai choisi le bon algorithme (il me semble que oui) et aussi si l'erreur ne se situerait pas dans le fait que plotLine inverse les points A et B si B a une abscisse/ordonnée plus basse que A.

J'ai besoin de vos conseils !




Fichier joint


Zezombye Hors ligne Rédacteur Points: 1756 Défis: 13 Message

Citer : Posté le 12/09/2018 19:34 | #


Casio utilise bien l'algo de Bresenham, mais je crois bien que DS avait dit que les points sont inversés (et l'ordre compte pour les lignes en diagonale). Pour vérifier, trace juste une ligne de 3x2.

Sinon tu peux toujours copier coller l'algo de BIDE ou de DS et l'adapter pour le JS (je pense que celui de BIDE serait le mieux, la syntaxe est quasi pareille).
Divers jeux : Puissance 4 - Chariot Wars - Sokoban
Ecrivez vos programmes basic sur PC avec BIDE
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 12/09/2018 19:35 | #


Le Bresenham de la calculatrice est une variante dont les paramètres initiaux sont un peu ajustés. T'as regardé la fonction de Darks dans son générateur de MDS ?
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 12/09/2018 19:37 | #


Non, je n'ai pas regardé. Je ne sais pas trop comment je peux aller voir tout ça ><
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 12/09/2018 19:41 | #


Apparemment :

from bresenham import bresenham

Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 12/09/2018 19:48 | #


Donc il a utilisé ça ? https://pypi.org/project/bresenham/
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 12/09/2018 19:49 | #


Tout à fait
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 12/09/2018 19:50 | #


Et merde, je n'ai plus Git. Est-ce possible de consulter le code source sans avoir recours au git clone ?
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Zezombye Hors ligne Rédacteur Points: 1756 Défis: 13 Message

Citer : Posté le 12/09/2018 19:51 | #


Tu peux juste prendre celle là :

https://git.planet-casio.com/Zezombye/BIDE/blob/master/src/zezombye/BIDE/MultiDrawstatGenerator.java#L358
Divers jeux : Puissance 4 - Chariot Wars - Sokoban
Ecrivez vos programmes basic sur PC avec BIDE
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 12/09/2018 19:51 | #


Dans Download files à droite, tu peux télécharger le fichier .whl et ensuite pip3 install truc.whl pour installer le module

(Tu peux aussi accéder au code, mais s'il marche pour Darks, il marchera pour toi aussi.)
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 12/09/2018 19:54 | #


En fait je pense que j'ai trouvé : https://github.com/encukou/bresenham/blob/master/bresenham.py

Alors c'est exactement ça que DS a utilisé pour son programme ? Mais il avait pas dû inverser des trucs pour que ça corresponde bien ?
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 12/09/2018 19:55 | #


Dans le code de Darks sur le Gitlab, c'est utilisé verbatim. Vois par toi-même : https://git.planet-casio.com/Dark-Storm/sprite-optimizer/blob/master/sprite-optimizer.py#L32
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Dark storm Hors ligne Labélisateur Points: 11631 Défis: 176 Message

Citer : Posté le 13/09/2018 10:33 | #


Je dois avouer que j'aurai du commenter un peu plus ce code. Je vais essayer de faire ça ce soir.

Bref, en tout cas, comme Lephe l'a indiqué, j'utilise un "vrai" bresenham pour générer mes lignes. Mais une fois que j'ai besoin de les dessiner, j'inverse le sens dans le code pour Casio :
ligne_calculée = ((x, y), (x', y'))
ligne_casio = ((x', y'), (x, y))

C'est à la ligne #127 que j'effectue cette permutation.

Mais oui, le code n'est pas très clair en l'état actuel, je vais le clarifier.
Finir est souvent bien plus difficile que commencer. — Jack Beauregard
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 13/09/2018 12:51 | #


Ah, merci pour cette indication. Je vais faire quelques essais et je vous dirai si j'ai abouti au résultat escompté.

Ajouté le 13/09/2018 à 15:58 :
C'est bon, j'ai réussi !

Ajouté le 13/09/2018 à 16:03 :
Oh, dites : si je soigne un peu plus le CSS et que je peaufine deux ou trois trucs, ça vous dit de mettre cet outil en ligne sur le site ? Ça pourrait s'avérer utile !
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 13/09/2018 18:48 | #


On pourrait le mettre sur tools.planet-casio.com... ah en fait non, pas sûr qu'on ait encore les accès !

Ouais, c'est faisable, vraiment NP.

Est-ce que tu as une description un peu concise de l'algorithme en tous cas ? J'admets ne pas avoir le temps de me plonger dans ton code... en quoi est-ce que ça diffère de la méthode de Darks par exemple ?
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 13/09/2018 19:03 | #


Si tu veux, je pourrai rédiger un topic pour indiquer comment s'en servir de manière détaillée.

En gros, il s'agit d'un logiciel de dessin. L'utilisateur importe une image (l'image de son sprite), zoome comme bon lui semble, puis clique sur le canvas pour tracer des points et des lignes. Il dessine donc des lignes avec un code couleur (les lignes avec des couleurs différentes ne sont pas reliées entre elles). En cliquant, on peut voir le nombre de points.

Enfin, une fois le travail terminé, il n'y a plus qu'à cliquer sur "Générer le code" pour obtenir la liste à insérer directement dans le programme. Contrairement à BIDE ou au Sprite Optimizer, ce programme fournit une liste de coordonnées pour réaliser un Super Drawstat, et non un MDS. On peut les obtenir sous la forme { 1.01, 5.12, 6.08... ou bien sous forme de coordonnées complexes.

Le problème, maintenant, c'est que j'ai réalisé mon programme en local : la manière avec laquelle je récupère les images avec le <input type="file"> ne fonctionnerait pas une fois que le programme sera en ligne, sur un serveur. En gros, le input se contente de me retourner le nom de l'image quand je l'utilise, autrement dit ça ne fonctionne que si l'image se trouve dans le même dossier.
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Zezombye Hors ligne Rédacteur Points: 1756 Défis: 13 Message

Citer : Posté le 13/09/2018 19:04 | #


Le problème, maintenant, c'est que j'ai réalisé mon programme en local : la manière avec laquelle je récupère les images avec le <input type="file"> ne fonctionnerait pas une fois que le programme sera en ligne, sur un serveur. En gros, le input se contente de me retourner le nom de l'image quand je l'utilise, autrement dit ça ne fonctionne que si l'image se trouve dans le même dossier.


Si t'as mis des chemins relatifs (genre /img/truc.png) ça ira parfaitement bien.
Divers jeux : Puissance 4 - Chariot Wars - Sokoban
Ecrivez vos programmes basic sur PC avec BIDE
Lephenixnoir En ligne Administrateur Points: 24145 Défis: 170 Message

Citer : Posté le 13/09/2018 19:05 | #


Aaaah oui, c'est vrai, c'est manuel. J'avais oublié cela ! C'est bon de me le rappeler.
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Dark storm Hors ligne Labélisateur Points: 11631 Défis: 176 Message

Citer : Posté le 13/09/2018 19:28 | #


Zezombye a écrit :
Si t'as mis des chemins relatifs (genre /img/truc.png) ça ira parfaitement bien.

Nope, il faut que l'image que tu veux traiter soit dans le même dossier que le .html
Les images du css, à la rigueur osef, c'est facilement adaptable.

Y'a pas moyen d'importer l'image en local ?
Finir est souvent bien plus difficile que commencer. — Jack Beauregard
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 13/09/2018 19:45 | #


Il semblerait qu'avec l'attribut baseURI, c'est possible :
>> console.log(document.getElementById("fileChooser").baseURI)
file:///D:/BACKUP16-08-2018/Projet%20RPG/Sprite/SpriteGenerator.html

Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Dark storm Hors ligne Labélisateur Points: 11631 Défis: 176 Message

Citer : Posté le 13/09/2018 20:05 | #


C'est commenté, j'ai push les modifs à l'instant
Finir est souvent bien plus difficile que commencer. — Jack Beauregard

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 90 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd