progrem
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
progrem [2019/06/01 10:50] – [Coder un lecteur de progrem en typescript] bigMax | progrem [2019/06/18 06:56] (Version actuelle) – bigMax | ||
---|---|---|---|
Ligne 9: | Ligne 9: | ||
* La " | * La " | ||
* L' | * L' | ||
- | |||
===== 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 " | Un progrem qui dessine dessinerait des images fixes ou animées. Le dessin produit serait " | ||
+ | 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' | On se concentre sur l' | ||
- | <code js> | + | Un premier progrem qui déssine le coeur déEugene Beutem est doté d'une fonction de coloriage comme celle-ci: |
- | function | + | <code js> |
- | | + | function |
- | | + | |
- | + | var y = ligne * contexte.resolutionCartesienneEnY + contexte.decallageCartesienEnY; | |
- | | + | var equationEugenePartieGauche = Math.pow(Math.pow(x, 2) + Math.pow(y, 2) - 1, 3); |
- | | + | |
- | } sinon { | + | |
- | | + | |
+ | if ( equationEugeneDifference < 0 ) { | ||
+ | | ||
+ | } else { | ||
+ | | ||
} | } | ||
- | return | + | return couleur; |
- | } | + | |
- | + | ||
- | for image i { | + | |
- | clearImage() | + | |
- | for ligne l { | + | |
- | ligne = image[l] | + | |
- | for colonne c { | + | |
- | si ( condition(c, | + | |
- | pixel = ligne[c] | + | |
- | pixel.couleur | + | |
- | } | + | |
- | paintPixel(pixel) | + | |
- | } | + | |
- | paintLigne(ligne) | + | |
- | } | + | |
- | paintImage(image) | + | |
} | } | ||
</ | </ | ||
+ | |||
+ | ===== 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' | ||
+ | * 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 à " | ||
+ | * Ajouter une commande à " | ||
+ | * Permettre la rédaction de Progrem en live dans un éditeur de texte. | ||
+ | |||
===== Coder un lecteur de progrem en typescript ===== | ===== Coder un lecteur de progrem en typescript ===== | ||
- | Nous utiliserons npm (sudo apt install npm) | + | Nous utiliserons |
+ | Nous délaigerons la compilation du typescript et la fabrication du bundle javascript à webpack | ||
- | Initialisation du projet | + | ==== Initialisation du projet |
< | < | ||
cd progrem-veiwer | cd progrem-veiwer | ||
npm init | npm init | ||
- | npm i typescript --save-dev | + | npm install webpack webpack-cli --save-dev |
+ | npm install | ||
./ | ./ | ||
</ | </ | ||
- | On peut customiser un peu la configuration | + | Il faut ensuite configurer webpack en ajoutant à la racine du projet le fichier // |
+ | < | ||
+ | const path = require(' | ||
+ | |||
+ | module.exports = { | ||
+ | entry: ' | ||
+ | devtool: ' | ||
+ | watch: true, | ||
+ | module: { | ||
+ | rules: [ | ||
+ | { | ||
+ | test: / | ||
+ | use: ' | ||
+ | exclude: / | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | resolve: { | ||
+ | extensions: [ ' | ||
+ | }, | ||
+ | output: { | ||
+ | filename: ' | ||
+ | path: path.resolve(__dirname, | ||
+ | } | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | Webpack se chargera alors de lire notre point d' | ||
+ | |||
+ | Il faut alors modifier | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | </code> | ||
+ | |||
+ | Il ne nous reste alors plus qu'à lancer le build avec la commande : | ||
+ | < | ||
+ | npm run buil | ||
+ | </code> | ||
+ | Webpack restera alors démarré pour compiler et packager les sources du projet. | ||
+ | |||
+ | ==== Ajout du framework de test unitaire jasmine ==== | ||
+ | < | ||
+ | npm install --save-dev jasmine-core jasmine @types/ | ||
+ | ./ | ||
+ | ./ | ||
+ | </ | ||
+ | |||
+ | avec un fichier jasmine.json comme suit: | ||
+ | < | ||
+ | { | ||
+ | " | ||
+ | "**/*[sS]pec.ts" | ||
+ | ], | ||
+ | " | ||
+ | " | ||
+ | ], | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | et un fichier package.json dont le script test est définit ainsi : | ||
< | < | ||
- | | + | "test": "jasmine-ts" |
- | " | + | |
</ | </ | ||
- | Enfin on peut démarrer le compilateur de typescript en mode " | + | On peut alors lancer les test unitaires avec la commande : |
< | < | ||
- | ./ | + | npm test |
</ | </ |
progrem.1559386230.txt.gz · Dernière modification : 2019/06/01 10:50 de bigMax