Ecrire en graphieros sur son navigateur

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

Ziecken a écrit:: Tu ne finiras jamais de m'épater avec ton travail à la fois pro et artistique.

Merci cher Ziecken sunny

Tiens je viens d'ajouter une fonction qui permet d'effacer des bouts de glyphe. Elle s'active quand on clique sur le bouton DESTROY à droite de l'écran.

J'ai aussi ajouté un son irritant qui est joué chaque fois que la touche entrée est utilisée. Mais je suis gentil, le son est off par défaut.

Bonne soirée à tous

Graphieros a écrit:

Ziecken a écrit:: Tu ne finiras jamais de m'épater avec ton travail à la fois pro et artistique.

Merci cher Ziecken sunny

Graphieros a écrit:: Tiens je viens d'ajouter une fonction qui permet d'effacer des bouts de glyphe. Elle s'active quand on clique sur le bouton DESTROY à droite de l'écran.

Cela permet de finaliser l'esthétique d'une inscription graphieros, c'est une bonne idée.

_________________
Like a Star @ heaven

Idéolangues : elko, kelep, englo, ... (+27)
Like a Star @ heaven

Idéomondes : Multivers d'Aegis, monde du Losda

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

Allez jeter un coup d'oeil maintenant sur cette autre éditeur de graphieros, qui permet de composer des glyphes fractals avec le clavier, mais cette fois ci en les "dessinant" avec les touches

z e
q s d
w x

qui forment comme un hexagone sur un clavier AZERTY.
Cela permet de composer très rapidement des glyphes de façon intuitive.

Cliquer sur "HELP" pour connaître les autres touches autorisées, qui sont au nombre de 10.

Smile

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Allez jeter un coup d'oeil maintenant sur cette autre éditeur de graphieros,

Ça ne fonctionne pas, rien de s'affiche...
Sauf un msg d'erreur en cas d'appui sur une mauvaise touche.
Je suis sur Chrome...

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Allez jeter un coup d'oeil maintenant sur cette autre éditeur de graphieros,

Ça ne fonctionne pas, rien de s'affiche...
Sauf un msg d'erreur en cas d'appui sur une mauvaise touche.
Je suis sur Chrome...

sur chrome moi aussi, mais ça marche scratch

tu as essayé de taper zz + ENTER ?

attention ça ne fonctionne qu'avec un clavier physique. Pas sur une tablette ou un tel.

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: tu as essayé de taper zz + ENTER ?

Rien...
J'ai un clavier normal avec des touches normales...
C'est sensé s'afficher où ? En haut ? En bas ?

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: tu as essayé de taper zz + ENTER ?

Rien...
C'est sensé s'afficher où ? En haut ? En bas ?

si tu n'as rien c'est déjà mieux haha

tu ne vois peut-être pas le point car la couleur est sombre pour le premier glyphe.
Essaye avec la séquence qzedxwq + ENTER, sinon clique sur aide pour regarder la vidéo tuto

Et ouvre la console pour voir si tu as une erreur s'il te plaît

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Essaye avec la séquence qzedxwq + ENTER

La console est OK.
On dirait que ça fonctionne, tu as fait qqch entretemps ?
Les glyphes sont centrés et dessinés de plus en plus petits.

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Essaye avec la séquence qzedxwq + ENTER

La console est OK.
On dirait que ça fonctionne, tu as fait qqch entretemps ?
Les glyphes sont centrés et dessinés de plus en plus petits.

Non, rien changé. Peut-être que je dois faire une gestion d'erreur, mais ça doit marcher après avoir appuyé sur une mauvaise touche, affiché l'alerte, puis recommencé avec une bonne touche.

Le principe est d'écrire dans le sens de la profondeur, en mode fractal, d'où le fait que la taille est 50% à chaque fois que tu fais ENTER, et plus clair aussi, pour mieux le voir.

Pour passer à une autre ligne il faut appuyer sur CTRL, cela permet de commencer un autre glyphe depuis le début.

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Non, rien changé. Peut-être que je dois faire une gestion d'erreur, mais ça doit marcher après avoir appuyé sur une mauvaise touche, afficher l'alerte, puis recommencer avec une bonne touche.

Le principe est d'écrire dans le sens de la profondeur, en mode fractal, d'où le fait que la taille est 50% à chaque fois que tu fais ENTER, et plus clair aussi, pour mieux le voir.

Pour passer à une autre ligne il faut appuyer sur CTRL, cela permet de commencer un autre glyphe depuis le début.

Pour l'instant, ça fonctionne, on peut faire de beaux dessins Smile

Néanmoins, je remarque une chose : si, au début, tu te trompes plusieurs fois de touche, plus rien ne s'affiche ensuite. Je viens de le confirmer.
Tu devrais mettre le focus tout de suite en entrée de page sur le textbox.
Idem après un Effacer.

Ps : ça me fait penser aux graphismes de la console Vectrex Smile

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Non, rien changé. Peut-être que je dois faire une gestion d'erreur, mais ça doit marcher après avoir appuyé sur une mauvaise touche, afficher l'alerte, puis recommencer avec une bonne touche.

Le principe est d'écrire dans le sens de la profondeur, en mode fractal, d'où le fait que la taille est 50% à chaque fois que tu fais ENTER, et plus clair aussi, pour mieux le voir.

Pour passer à une autre ligne il faut appuyer sur CTRL, cela permet de commencer un autre glyphe depuis le début.

Pour l'instant, ça fonctionne, on peut faire de beaux dessins Smile

Néanmoins, je remarque une chose : si, au début, tu te trompes plusieurs fois de touche, plus rien ne s'affiche ensuite. Je viens de le confirmer.
Tu devrais mettre le focus tout de suite en entrée de page sur le textbox.

Exact!

autofocus ajouté Smile

merci beaucoup

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Exact!
autofocus ajouté
merci beaucoup

C'est esthétique ! Félicitation Smile

Maintemant, il ne te reste plus qu'à écrire un programme qui trace des glyphes de gauche à droite ou de haut en bas, mais en utilisant les touches zeqsdwx. Je verrais plutôt Space pour passer au caractère suivant et les symboles ,;.- pour lever la plume. Ainsi qu'un symbole pour passer à la ligne. Perso, chez moi, ce sont / \ | qui ont ce rôle.

Exemple : zedxwqz wqzedx-qd/zqw-edx (2 glyphes puis on passe à la ligne pour le dernier).

Je faisais presque la même chose que toi : https://aphil.1fr1.net/t1068-ico5-idees-au-gramme

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Exact!
autofocus ajouté
merci beaucoup

C'est esthétique ! Félicitation Smile

Maintemant, il ne te reste plus qu'à écrire un programme qui trace des glyphes de gauche à droite ou de haut en bas, mais en utilisant les touches zeqsdwx. Je verrais plutôt Space pour passer au caractère suivant et les symboles ,;.- pour lever la plume. Ainsi qu'un symbole pour passer à la ligne. Perso, chez moi, ce sont / \ | qui ont ce rôle.

Exemple : zedxwqz wqzedx-qd/zqw-edx (2 glyphes puis on passe à la ligne pour le dernier).

Je faisais presque la même chose que toi : https://aphil.1fr1.net/t1068-ico5-idees-au-gramme

Intéressant. Je suis allé au bout du fil, mais on reste sur sa faim! Tu as publié un site ou un script quelque part?

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Intéressant. Je suis allé au bout du fil, mais on reste sur sa faim! Tu as publié un site ou un script quelque part?

C'était un programme écrit en Delphi.
Il faudra que je m'amuse à en faire une version Javascript...
Si j'ai le temps, je m'y mets la semaine prochaine.

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Intéressant. Je suis allé au bout du fil, mais on reste sur sa faim! Tu as publié un site ou un script quelque part?

C'était un programme écrit en Delphi.
Il faudra que je m'amuse à en faire une version Javascript...
Si j'ai le temps, je m'y mets la semaine prochaine.

cool, j'ai hâte de lire ton code Smile

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: cool, j'ai hâte de lire ton code

J'ai terminé la maquette...
Pour l'instant, c'est brut de fonderie.

Code:: Code remplacé par la version 2 (cf ci-après)

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Version 2
abc..wxy : les 25 points de la grille (5x5)
- : lève-plume
# : rectangle (a#y = gros rectangle)
espace : nouveau glyphe
/ : passer à la ligne

Nota1 : au départ ou après un(e) espace ou après un passage à la ligne ou après un rectangle, on est en mode lève-plume.
Nota2 : le changement de taille est dynamique.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ico5</title>
<script type="text/javascript">
//
function ico5(gr,ox,oy,cote,texte){
  var x,y,asc,mode=0,oxm=ox,mx=ox,my=oy;
  gr.fillStyle='white'; gr.fillRect(0,0,400,400); // effacer
  gr.fillStroke='black';
  gr.beginPath();
  for(var i=0; i<texte.length; i++){
   asc=texte.charCodeAt(i);
   if(asc>=97 && asc<=121){
   asc-=97;
   mx=x; x=asc%5*cote;
   my=y; y=Math.floor(asc/5)*cote;
   switch(mode){
   case 0:
   gr.moveTo(ox+x,oy+y);
   mode=1;
   break;
   case 1:
   gr.lineTo(ox+x,oy+y);
   break;
   case 2:
   gr.rect(ox+mx,oy+my,Math.abs(mx-x),Math.abs(my-y));
   mode=0;
   break;
   }
   }else switch(asc){
   case 32: // esp autre glyphe
   mode=0;
   ox+=cote*6;
   break;
   case 35: // # rect
   mode=2;
   break;
   case 45: // - lever plume
   mode=0;
   break;
   case 47: // / passer à la ligne
   mode=0;
   ox=oxm;
   oy+=cote*6;
   break;
   }
  }
  gr.stroke(); gr.closePath();
}
//
function action(){
  var mc=document.getElementById('monCanvas');
  var mt=document.getElementById('monTexte');
  var mk=document.getElementById('monCote');
var gr=mc.getContext('2d');
  ico5(gr,10,10,mk.value,mt.value);
}
</script>
</head>
<body onload="action()">
<h1>Ico5</h1>
<canvas id="monCanvas" width="400" height="400" border="1">rien</canvas>
<br/>
<input type="text" id="monTexte" required size="40" value="aeuy-ko a#yg#s/cw-f#t" />
<input type="number" id="monCote" min="2" max="50" value="10" onchange="action();" />
<button onclick="action();">Afficher</button>
</body>
</html>

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: cool, j'ai hâte de lire ton code

J'ai terminé la maquette...
Pour l'instant, c'est brut de fonderie.

Code:: Code remplacé par la version 2 (cf ci-après)

Joliment condensé Smile

Très intéressant la manière d'utiliser le charCodeAt() au départ.
Je trouve que le canvas est plus "propre" que le SVG à gérer. Si seulement le canvas était vectoriel...

merci pour le partage study

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Graphieros a écrit:: Joliment condensé
Très intéressant la manière d'utiliser le charCodeAt() au départ.
Je trouve que le canvas est plus "propre" que le SVG à gérer. Si seulement le canvas était vectoriel...
merci pour le partage

Merci

J'ai préféré dessiner sur le canvas, c'est plus simple, mais l'armature est là pour faire du SVG.
Pour le charCodeAt, il est plus simple informatiquement de traiter des ints plutôt que des chars ou des strings.
J'aurais pu utiliser un itérateur, mais un for classique fonctionne très bien.
Bien sûr, on peut maintenant faire "plus beau" en ajoutant du CSS et qques effets graphiques.

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

PatrikGC a écrit:

Graphieros a écrit:: Joliment condensé
Très intéressant la manière d'utiliser le charCodeAt() au départ.
Je trouve que le canvas est plus "propre" que le SVG à gérer. Si seulement le canvas était vectoriel...
merci pour le partage

Merci

J'ai préféré dessiner sur le canvas, c'est plus simple, mais l'armature est là pour faire du SVG.
Pour le charCodeAt, il est plus simple informatiquement de traiter des ints plutôt que des chars ou des strings.
J'aurais pu utiliser un itérateur, mais un for classique fonctionne très bien.
Bien sûr, on peut maintenant faire "plus beau" en ajoutant du CSS et qques effets graphiques.

J'ai beaucoup d'affection pour le for classique. Je trouve qu'il est beau tel quel.
Pour ce qui est de la cosmétique css, il faut vouloir y passer du temps, c'est important pour 'séduire' l'utilisateur au début, même s'il restera uniquement si le programme est bon.

Messages : 2324 Date d'inscription : 26/03/2009 Localisation : Peut-être

Le dessin au clavier me parle plus et je crois qu'il n'y a pas besoin de la zone d'entrée - l'image mentale de l'hexagone sur le clavier se passe rapidement des lettres sur les touches. Le programme pourrait tracer les segments à mesure que les touches sont appuyées et ne pas afficher d'alerte si on appuie sur une touche inutile.

PS: Ca ne fonctionnait pas non plus pour moi au début. J'avais des erreurs dans la console mentionnant une syntaxe svg erronée.

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Leo a écrit:: Le dessin au clavier me parle plus et je crois qu'il n'y a pas besoin de la zone d'entrée - l'image mentale de l'hexagone sur le clavier se passe rapidement des lettres sur les touches. Le programme pourrait tracer les segments à mesure que les touches sont appuyées et ne pas afficher d'alerte si on appuie sur une touche inutile.

PS: Ca ne fonctionnait pas non plus pour moi au début. J'avais des erreurs dans la console mentionnant une syntaxe svg erronée.

Dans le cas du graphieros, on peut en effet utiliser le dessin au clavier. Par contre, dans le cas d'ico5, comme il n'y a que 4 rangées de touche alors qu'il en faudrait 5, c'est plus difficile. Néanmoins, j'avais cogité à la chose en traçant les traits à l'aide du pavé numérique et de touches de décalage. Mais j'ai abandonné car trop embrouilleur...

Pour le graphieros, on peut mettre à profit les autres touches du clavier pour bien des choses comme le changement de taille, l'épaisseur de trait, les pointillés, les couleurs etc.

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

Bonjour chers amis,

je viens de 'finaliser' une nouvelle version d'éditeur de graphieros, qui fonctionne avec un clavier virtuel, donc utilisable sur tout support.
Cette version possède une fonction de recherche, qui affiche les glyphes disponibles correspondant aux 2 premières lettres du mot en français recherché. Il y a aussi un audio qui est joué quand un glyphe est validé (s'il est trouvé, et si l'utilisateur clique sur le bouton vert pour qu'il s'écrive sur le tableau). Il y aussi un curseur, et un bouton pour effacer (le bouton orangé).

Découvrez cette version ICI

Attention toutefois, l'appli a tendance à fonctionner très correctement sur Chrome, mais sur d'autres navigateurs moins performants, elle peut ramer (notamment la partie audio qui arrive tardivement). C'est lié au fait que j'ai souhaité joindre la base de données au code lui-même, ce qui alourdit considérablement la fonction, mais rend l'appli utilisable hors ligne, pratique donc si l'on souhaite soudainement écrire en graphieros alors que le sous-marin dans lequel on se trouve submergé est en panne de wifi.

Note pour les programmeurs: j'ai minifié le JS donc pour voir le code il faut jeter un oeil sur mon Github.

Messages : 6736 Date d'inscription : 28/02/2010 Localisation : France - Nord

Beau boulot, c'est indéniable !
Ça a dû demander des heures de code.
Félicitations !

Par contre, une saisie clavier en // aurait été un plus appréciable.
En regardant ton code minifié, j'ai vu que tu avais adopté pour tes glyphes un micro-codage.
Entre nous, du son, c'est mignon, mais c'est lourd et parfois agaçant à la longue.
Perso, je coupe quasiment tjrs le son sur mon UC.

Messages : 425 Date d'inscription : 11/01/2017 Localisation : Paris, France

Pour le son j'ai passé une journée entière à enregistrer les MP3 un à un et à rajouter le New Audio() pour chaque glyphe, qui alourdit dramatiquement la performance. Je pense que je vais revenir en arrière, la phono visuelle devrait de toute façon suffire. Mais je garde les MP3 pour un autre usage éventuel (reconnaissance de glyphes? Mmh pas encore au niveau pour ça haha)

» présentation du graphieros
» [script] écrire le Dawaien
» Les japonais ne savent plus écrire
» Écrire le français à l'aide de l'alphabet grec
» Salut! Je cherche a faire 1 liste de trope autour d'histoire de complot.