J'ai besoin de votre aide, d'ailleurs entièrement de votre aide car je ne connais rien au sujet que je vous vous expliquer, j'aimerais donc juste des propositions, des scripts déjà fait ou des aides.
Voilà, donc enfaite j'aimerais faire une animation en javascript ou autre si c'est possible (flash, php etc..) permettant à l'utilisateur via le curseur de sa souris de dessiner une forme prédéfinit et si l'utilisateur arrive a reproduire cette forme alors sa le lance sur une autre page PHP.
Si vous voulez plus d'information, merci de me lès préciser. Merci
Enfaite le but est que l'utilisateur dessine une forme puis par rapport à ce qu'il a dessiné que sa compare à la forme réelle pour voir si le dessin et bon ou pas... en gros comme ceci :
a oui, en JavaScript je connais rien j'ai jamais fait de script avec s'est pour cela que si y avait des scripts déjà fait à peu près j'aurais pu m'en servir mais bon j'ai cherché un moment et j'ai rien trouvé :s
Facile, tu utilises la fonction trace_compare() de php...
Sérieusement ça doit pas être évident du tout. Je pensais à une comparaison entre deux tableaux. Tu quadrilles virtuellement la zone de tracé. Lorsque le tracé passe dans un carreau, ce carreau (qui correspond à une entrée du tableau) prends la valeur 100 (par exemple) et les carreau voisin prenne des valeurs décroissante (ex: 90 pour les carreau juste à côté, 80 pour ceux qui viennent en deuxième, etc...).
Ensuite tu compare ça avec un tableau modèle, en faisant par exemple la somme du carré des écarts, et en deça d'une valeur seuil tu acceptes le tracé... easy quoi
Le problème, c'est que s'il y a un décalage ou une différence de taille, ça marche plus.
Sérieusement ça doit pas être évident du tout. Je pensais à une comparaison entre deux tableaux. Tu quadrilles virtuellement la zone de tracé. Lorsque le tracé passe dans un carreau, ce carreau (qui correspond à une entrée du tableau) prends la valeur 100 (par exemple) et les carreau voisin prenne des valeurs décroissante (ex: 90 pour les carreau juste à côté, 80 pour ceux qui viennent en deuxième, etc...).
Ensuite tu compare ça avec un tableau modèle, en faisant par exemple la somme du carré des écarts, et en deça d'une valeur seuil tu acceptes le tracé... easy quoi
J'avais aussi imaginé quelque chose comme ça
Citation : LCaba
Le problème, c'est que s'il y a un décalage ou une différence de taille, ça marche plus.
Il serait possible d'"encadrer" le tracé dans un rectangle pour pouvoir le redimensionner à la taille du modèle.
Là je suis impressionné
Je pense que l'amélioration est à faire du côté de la représentation du modèle. Un modèle plus tolérant, par exemple 20 valeurs décroissantes au lieu de 10, ou alors un truc non linéaire. Car ici dès qu'on s'éloigne un peu du tracé on passe dans le gris clair... Il doit aussi y avoir un travail à faire du côté du calcul du ratio.
Mais j'ai un peu du mal à m'approprié ton code pour bidouiller, je connaissais pas les canvas donc c'est nouveau tout ça pour moi.
Pour l'heure, bonne nuit.
Merci pour toute votre aide je vais pouvoir commencer à voir les tutos que vous m'avez recommandé et voir le code source de ta page Golmote pour comprendre un peu mieux comme tu fais
...complètement taré
Je suis flatté, mon pseudo apparaît 59 fois dans ton code source . Trouver le concept c'était facile, le coder un peu moins.
Pour en revenir au code, en biostat j'ai retenu une chose au moins, c'est que pour représenter un écart on utilise plutôt la somme du carré des écart plutôt que la somme des valeurs absolues. En faisant comme ça, et en divisant par le max au carré, on obtient une comparaison plus tolérante, plus "naturelle"
Voici donc la fonction compare remasteurisée (les modifications sont précédées de l'ancien code, mis en commentaire suivi de 4 étoiles) :
compare = function() {
for(var j=0,m=tabModele.length;j<m;j++) {
tabCompare[j] = [];
for(var i=0,l=tabModele[j].length;i<l;i++) {
// tabCompare stocke la différence entre les valeurs du modèle et les valeurs de l'utilisateur
tabCompare[j][i] = tabModele[j][i] - tabUser[j][i];
// Le ratio fait la somme des valeurs absolues des écarts
// **** ratio += Math.abs(tabCompare[j][i]);
ratio += Math.pow(tabCompare[j][i],2);
// On dessine la représentation de la comparaison
// **** ctx.compare.fillStyle = 'rgba(0,0,0,'+(Math.abs(tabCompare[j][i])/maxLCaba)+')';
ctx.compare.fillStyle = 'rgba(0,0,0,'+(Math.pow(tabCompare[j][i],2)/Math.pow(maxLCaba,2))+')';
ctx.compare.fillRect(i*4,j*4,4,4);
}
}
// On divise le ratio par le nombre total de pixels
// **** ratio /= tabCompare.length*tabCompare[0].length;
ratio /= tabCompare.length*tabCompare[0].length;
// Puis on divise par maxLCaba pour obtenir un ratio entre 0 et 1
// **** ratio /= maxLCaba;
ratio /= Math.pow(maxLCaba,2);
// Le tracé correspond à peu près au modèle quand le ratio est inférieur à 0.1.
var str;
if(ratio>0.5) {
str = "C'est n'importe quoi ! =o";
} else if(ratio>0.3) {
str = "On est loin du modèle...";
} else if(ratio>0.1) {
str = "C'est pas encore ça...";
} else if(ratio>0) {
str = "Ah ça c'est pas mal !";
} else if(ratio==0) {
str = "Euh... tricheur !? o_o";
}
if(confirm(
'Ratio : ' + ratio +
'\n' + str +
'\n\nVoulez-vous recommencer ?'
)) { window.location.reload(); }
},
Pour en revenir au code, en biostat j'ai retenu une chose au moins, c'est que pour représenter un écart on utilise plutôt la somme du carré des écart plutôt que la somme des valeurs absolues. En faisant comme ça, et en divisant par le max au carré, on obtient une comparaison plus tolérante, plus "naturelle"
C'est noté.
Citation : birdy42
Faut vraiment que je me mette à Canvas n'empêche, ça a l'air super fun
Canvas c'trop bien ! <3
Citation : XortiX
Merci pour toute votre aide je vais pouvoir commencer à voir les tutos que vous m'avez recommandé et voir le code source de ta page Golmote pour comprendre un peu mieux comme tu fais
j'ai pu toucher un peu à ton code voir à quoi correspond chaque fonction du code.
Maintenant j'aimerais que l'on puisse tracer une lettre alphabétique par exemple (la lettre A) le modèle serait donc un A majuscule dessiné et il faudrait le reproduire.
J'ai donc pu voir que ce n'était pas possible car on doit reproduire le modèle en 1 seul trait (lorsqu'on lâche le clique gauche sa bloque le cadre d'écriture) donc j'aimerais bien savoir comment peut-on faire pour que l'on puisse tracer plusieurs traits dans "le cadre rouge" puis valider avec un bouton "Vérification" pour que sa action la fonction "compare();" et que à ce moment là sa puisse comparer mais surtout pas en relâchant le click gauche.
Merci de votre aide
P.S : Je sais juste que sait là dedans :
window.onmousemove = function(e) {
if(down) {
var x = offset_X(canvas.user,e), y = offset_Y(canvas.user,e);
ctx.user.lineTo(x,y);
ctx.user.stroke();
ctx.user.beginPath();
ctx.user.moveTo(x,y);
}
};
Avec le Code de Golmote actuel ce n'est pas vraiment possible de faire une levée du stylo tout en ayant une reconnaissance en temps réel avec l'alphabet latin.
Mais tu peux considérer que tant qu'on ne trouve pas de caractère on laisse le trait en place... mais la précision risque encore d'en prendre un coup (après il faudrait tester avec une base de jeu de caractères complet pour voir si ça marche bien).
Sinon au lieu de faire une reconnaissance immédiate au moment où on relâche tu peux demander de cliquer sur un bouton pour lancer le processus de reconnaissance (lancer la fonction drawingOver();).
Ou alors si tu veux tout faire en un seul trait je te conseille de regarder du côté de l'alphabet Graffiti de palm OS. Mais cela demande une légère connaissance de l'alphabet pour les utilisateurs (même si la plus part des lettres ressemblent aux caractères latin classique.
Mais si tu utilises ce jeu de caractère, je te conseillerai plutôt de faire une reconnaissance vectorielle au lieu de faire une reconnaissance bitmap. Cela permet d'être plus robuste aux bruits (il n'y a pas de contraintes de taille et est peu sensible aux tremblements d'un trait). Le principe est que pendant le mouvement de la souris tu détectes le sens du mouvement (en fonction de la sensibilité tu peux détecter plus ou moins de directions mais 8 est souvent suffisant) et de ne stocker que les changement de direction. Ensuite il suffit de comparer avec les mouvements correspondants pour dessiner un caractère (par exemple pour le A c'est haut;haut-droite;droite;bas-droite;bas).
EDIT: Double grillé mais l'ordi a planté et j'en ai profité pour sortir mon chien
@restimel : pour le coup je crois que tu n'est pas tout à fait dans le sujet ...
Non, tu n'as pas besoin de toucher à cette fonction.
Modifie window.onmouseup :
window.onmouseup=function(e){down=false;};
Et puis créer ton bouton "valider" :
<button id="valider">Valider</button>
Et le javascript associé :
document.getElementById('valider').onclick = function(){
// Retrait des listeners
canvas.user.onmousedown = function(){};
window.onmousemove = function(){};
window.onmouseup = function(){};
// L'opération de dessin est terminée.
drawingOver();
}
Je me suis mal exprimé... J'ai pas dis que ce qu'il proposais n'était pas intéressant
C'est juste la première phrase de restimel :
Citation : restimel
Avec le Code de Golmote actuel ce n'est pas vraiment possible de faire une levée du stylo tout en ayant une reconnaissance en temps réel avec l'alphabet latin.
Il ne s'agit pas d'une reconnaissance en temps réel mais juste d'un seul caractère à vérifier. Et avec ton code c'est tout à fait possible.
Pour en revenir à la reconnaissance vectorielle, t'as une idée pour sauvegarder les changements de directions ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
L'important n'est pas de savoir maîtriser une technologie à la perfection, mais d'avoir une belle capacité d'adaptation.