Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
Dernière révision Les deux révisions suivantes
progrem [2019/06/02 00:21]
bigMax [Ajout du framework de test unitaire jasmine]
progrem [2019/06/18 08:51]
bigMax
Ligne 9: Ligne 9:
   * La "​tuyauterie"​ nécessaire à produire la sortie ne devrait pas apparaitre dans le Progrem. Il faut donc fournir une API au progrem qui permet de mettre en valeur l'​algorithmie du Progrem. On peut envisager de fournir une API "​localisé"​ pour traduire le Progrem en français, espagnol, ...   * La "​tuyauterie"​ nécessaire à produire la sortie ne devrait pas apparaitre dans le Progrem. Il faut donc fournir une API au progrem qui permet de mettre en valeur l'​algorithmie du Progrem. On peut envisager de fournir une API "​localisé"​ pour traduire le Progrem en français, espagnol, ...
   * L'​exécution du Progrem pourrait être effectué étape par étape comme avec un debugger pour améliorer la compréhension du lecteur. Cela nécessite la définition d'un formalisme qui permet à tous les Progrems de pouvoir être visualisé dans un tel cadre.   * L'​exécution du Progrem pourrait être effectué étape par étape comme avec un debugger pour améliorer la compréhension du lecteur. Cela nécessite la définition d'un formalisme qui permet à tous les Progrems de pouvoir être visualisé dans un tel cadre.
- 
  
 ===== Un progrem qui déssine ===== ===== Un progrem qui déssine =====
 Un progrem qui dessine dessinerait des images fixes ou animées. Le dessin produit serait "​responsive"​ : la taille du dessin est configurable. Un progrem qui dessine dessinerait des images fixes ou animées. Le dessin produit serait "​responsive"​ : la taille du dessin est configurable.
 +Je propose que le dessin soit constitué d'une grille de pixel. La fonction principale du Progrem serait de colorier chaque case une par une. La fonction est pure : elle reçoit les coordonnées d'une case et elle détermine la couleur de la case.
  
 ===== Le code d'un Progrem ===== ===== Le code d'un Progrem =====
 On se concentre sur l'​algorithme principal, pas sur les api js. On soigne la compréhension de l'​algorithme. On cache si possible le code inutile pour la transmission de l'​intuition de ce que fait le code. On se concentre sur l'​algorithme principal, pas sur les api js. On soigne la compréhension de l'​algorithme. On cache si possible le code inutile pour la transmission de l'​intuition de ce que fait le code.
 +
 +Un premier progrem qui déssine le coeur déEugene Beutem est doté d'une fonction de coloriage comme celle-ci:
  
 <code js> <code js>
- +function ​colorerProgrem ​( colonne, ligne, ​contexte ​) { 
-function ​construireNouveauPixel(colonne, ligne, ​animation) { +  ​var x colonne * contexte.resolutionCartesienneEnX + contexte.decallageCartesienEnX;​ 
-  ​imageIndex ​animation.getImageIndex() +  var y = ligne * contexte.resolutionCartesienneEnY + contexte.decallageCartesienEnY;​ 
-  ​imagePrecedente ​animation.getImagePrecedente() +  var equationEugenePartieGauche = Math.pow(Math.pow(x, 2) + Math.pow(y, 2) - 1, 3); 
-   +  ​var equationEugenePartieDroite ​Math.pow(x, 2* Math.pow(y, 3); 
-  ​si condition(ligne,​ colonne, animation) ​) { +  ​var equationEugeneDifference = equationEugenePartieGauche - equationEugenePartieDroite;​ 
-    ​pixel new Pixel(rose+  ​var couleur; 
-  } sinon +  if equationEugeneDifference < 0 ) { 
-    ​pixel new Pixel(bleu)+    ​couleur ​'rgb(255, 102, 153)'; 
 +  } else 
 +    ​couleur ​'rgb(135, 206, 235)';
   }   }
-  return ​pixel; +  return couleur;
-+
- +
-for image i { +
-  clearImage() +
-  for ligne l { +
-    ligne = image[l] +
-    for colonne c { +
-      si ( condition(c,​ l, i) ) { +
-        pixel = ligne[c] +
-        pixel.couleur ​= rose +
-      } +
-      paintPixel(pixel) +
-    } +
-    paintLigne(ligne) +
-  } +
-  paintImage(image)+
 } }
 </​code>​ </​code>​
 +
 +===== Mettre en avant le code du Progrem =====
 +  * Colorer
 +  * Surligner
 +  * Souligner
 +  * Encadrer
 +  * Mettre en gras
 +
 +Stratégie :
 +  * Attribuer une couleur aux variables à leur rencontre.
 +  * Historiser dans une pile les affectations de variables.
 +  * Colorer les blocks de code éxecutés (if / then / else)
 +  * Mettre en exergue l'​instruction en cours d'​execution avec une flèche
 +  ​
 +
  
 ===== Coder un lecteur de progrem en typescript ===== ===== Coder un lecteur de progrem en typescript =====
Ligne 128: Ligne 131:
 <​code>​ <​code>​
 "​test":​ "​jasmine-ts"​ "​test":​ "​jasmine-ts"​
 +</​code>​
 +
 +On peut alors lancer les test unitaires avec la commande :
 +<​code>​
 +npm test
 </​code>​ </​code>​
  • progrem.txt
  • Dernière modification: 2019/06/18 08:56
  • par bigMax