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
progrem [2019/06/08 15:52]
bigMax
progrem [2019/06/18 08:56] (Version actuelle)
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(x2) + Math.pow(y2- 1, 3); 
-  ​ +  var equationEugenePartieDroite ​Math.pow(x, 2* Math.pow(y, 3); 
-  si condition(lignecolonneanimation) ) { +  ​var equationEugeneDifference = equationEugenePartieGauche - equationEugenePartieDroite;​ 
-    ​pixel ​new Pixel(rose) +  ​var couleur
-  } sinon { +  ​if equationEugeneDifference < 0 ) { 
-    pixel = new Pixel(bleu+    ​couleur ​'rgb(255102153)'; 
-  ​} +  } else 
-  ​return pixel; +    couleur = 'rgb(135, 206, 235)';
-+
- +
-for image i { +
-  ​clearImage() +
-  for ligne l +
-    ​ligne image[l] +
-    for colonne c { +
-      si condition(cli) ) { +
-        pixel = ligne[c] +
-        pixel.couleur = rose +
-      } +
-      paintPixel(pixel) +
-    } +
-    paintLigne(ligne)+
   }   }
-  ​paintImage(image)+  ​return couleur;
 } }
 </​code>​ </​code>​
Ligne 59: Ligne 47:
   * Historiser dans une pile les affectations de variables.   * Historiser dans une pile les affectations de variables.
   * Colorer les blocks de code éxecutés (if / then / else)   * Colorer les blocks de code éxecutés (if / then / else)
-  * Mettre en exergue l'​instruction en cours d'​execution avec une flèche +  * Mettre en exergue l'​instruction en cours d'​execution avec une flèche ​/ encadré / surligné. 
-  ​+  ​* Encadrer la case en cours de coloriage. 
 +  * Indiquer les index des lignes et colonnes. 
 +  * Historiser dans une pile les commentaires ou bien afficher dans une bulle les commentaires. 
 +  * Ajouter un bouton play / pause / next step. 
 +  * Ajouter une commande à "​glissiere"​ pour choisir la vitesse de défilement du code (par ligne de code, par pixel, par ligne, par frame). 
 +  * Ajouter une commande à "​glissiere"​ pour choisir le temps entre les étapes. 
 +  * Permettre la rédaction de Progrem en live dans un éditeur de texte.
  
  
  • progrem.1560001961.txt.gz
  • Dernière modification: 2019/06/08 15:52
  • par bigMax