Un petit programme en forme de poeme. Ou bien l'inverse.
Propositions :
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.
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:
function colorerProgrem ( colonne, ligne, contexte ) { var x = colonne * contexte.resolutionCartesienneEnX + contexte.decallageCartesienEnX; var y = ligne * contexte.resolutionCartesienneEnY + contexte.decallageCartesienEnY; var equationEugenePartieGauche = Math.pow(Math.pow(x, 2) + Math.pow(y, 2) - 1, 3); var equationEugenePartieDroite = Math.pow(x, 2) * Math.pow(y, 3); var equationEugeneDifference = equationEugenePartieGauche - equationEugenePartieDroite; var couleur; if ( equationEugeneDifference < 0 ) { couleur = 'rgb(255, 102, 153)'; } else { couleur = 'rgb(135, 206, 235)'; } return couleur; }
Stratégie :
Nous utiliserons le gestionnaire de paquet npm (sudo apt install npm). Nous délaigerons la compilation du typescript et la fabrication du bundle javascript à webpack
cd progrem-veiwer npm init npm install webpack webpack-cli --save-dev npm install typescript ts-loader --save-dev ./node_modules/.bin/tsc --init
Il faut ensuite configurer webpack en ajoutant à la racine du projet le fichier webpack.config.js suivant :
const path = require('path'); module.exports = { entry: './src/index.ts', devtool: 'inline-source-map', watch: true, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
Webpack se chargera alors de lire notre point d'entrée ./src/index.ts pour compiler tout le code typescript. Il placera alors tous les fichiers javascript dans le repertoire ./dist/.
Il faut alors modifier le fichier package.json pour indiquer que l'on va déléguer le build à webpack en ajoutant le script “build” :
"scripts": { "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },
Il ne nous reste alors plus qu'à lancer le build avec la commande :
npm run buil
Webpack restera alors démarré pour compiler et packager les sources du projet.
npm install --save-dev jasmine-core jasmine @types/jasmine jasmine-ts ./node_modules/.bin/jasmine init ./node_modules/.bin/jasmine examples
avec un fichier jasmine.json comme suit:
{ "spec_files": [ "**/*[sS]pec.ts" ], "helpers": [ "helpers/**/*.ts" ], "stopSpecOnExpectationFailure": false, "random": true }
et un fichier package.json dont le script test est définit ainsi :
"test": "jasmine-ts"
On peut alors lancer les test unitaires avec la commande :
npm test