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:22]
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;
 } }
 +</​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
 +  ​
  
-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>​ 
  
 ===== Coder un lecteur de progrem en typescript ===== ===== Coder un lecteur de progrem en typescript =====
  • progrem.txt
  • Dernière modification: 2019/06/18 08:56
  • par bigMax