en route ...
This commit is contained in:
168
R4.01_R4.A.10/td_tp/tp1/README.md
Normal file
168
R4.01_R4.A.10/td_tp/tp1/README.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# TP javascript : bases du langages.
|
||||
Un peu [d'aide](./aide.md).
|
||||
> - seance 1 : [révisions](#p1)
|
||||
> - seance 2 : [forEach, filter, map, reduce, etc.](#p2)
|
||||
|
||||
### <a name="p1"></a> Séance 1
|
||||
#### Ex1 : fourmi de Langton
|
||||
Une fourmi, assimilable à un petit automate, se promène sur une grille de points colorés;
|
||||
pour commencer, tous les points sont blancs.
|
||||
- la fourmi est initialement placée au centre de la grille. Elle se déplace dans les quatre directions cardinales. Initialement, elle va vers l'est.
|
||||
- A chaque pas, elle se déplace d'une case dans sa direction. Son parcours est dicté par les deux règles suivantes :
|
||||
- Si la case atteinte est noire, elle la repeint en blanc, et tourne de 90° à gauche.
|
||||
- Si la case est blanche, elle la repeint en noire, et tourne de 90° à droite.
|
||||
- Elle continue son chemin en suivant ces règles.
|
||||
|
||||
|
||||
<div align="center">
|
||||
_Les 9 premiers pas de la fourmi_<br>
|
||||
<img src="./img/fourmi.png">
|
||||
</div>
|
||||
|
||||
Vous disposez de [sources](./src/langton) que vous allez compléter. En particulier, il y a 2 modules :
|
||||
|
||||
>- une classe **Ant** qui représente l'univers : la fourmi, et les tuiles sur lesquelles elle se déplace.
|
||||
>- une fonction **render** qui gére l'affichage graphique.
|
||||
|
||||
|
||||
- La fourmi a une position sur la grille, ainsi qu'une direction. La direction sera codée par un entier (angle 0,90,180 ou 270).
|
||||
- Les tuiles sont repréntées par un tableau à 2 dimensions. Chaque tuile a 2 valeurs possibles (0 ou 1).
|
||||
|
||||
|
||||
1. Complétez le code de la classe `Ant`.
|
||||
2. Complétez le code de `app.js`.
|
||||
3. Ajoutez un bouton/lien qui permet de réinitialiser la simulation.
|
||||
4. Dissociez, en terme de classe/structure, la fourmi de la grille sur laquelle elle évolue, et modifiez le
|
||||
code en conséquence.
|
||||
|
||||
<div align="center">
|
||||
<img src="./img/langton.png">
|
||||
</div>
|
||||
|
||||
|
||||
#### Ex2 : fourmi de Langton
|
||||
On peut complexifier et généraliser la fourmi précédente, et les règles d'évolution de l'automate correspondant : la fourmi, et les tuiles peuvent avoir
|
||||
un nombre quelconque d'états. Les règles de l'automate sont alors décrites par une table de transition.
|
||||
|
||||
Exemple 1 : on donne la table de transition suivante (T désigne la tuile, a la fourmi) à 2 états pour la fourmi, et 2 états pour les tuiles.
|
||||
|
||||
|
||||
| | T: 0 | T: 1 |
|
||||
|------|-----------|-----------|
|
||||
| a: 0 | (1,0,1) | (0,90,1) |
|
||||
| a: 1 | (0,-90,1) | (1,0,1) |
|
||||
|
||||
|
||||
|
||||
Chaque triplet représente (Ant State Change, Ant Direction Change, Tile State Change). Ainsi,
|
||||
|
||||
- (1,90,0) => on incrémente 1 à l'état de la fourmi, 90 à sa direction, et 0 à l'état de la tuile.
|
||||
- (0,-90,1) => on incrémente 0 à l'état de la fourmi, -90 à sa direction, et 1 à l'état de la tuile.
|
||||
|
||||
Les incrémentations se font modulo le nombre d'états possibles.
|
||||
|
||||
Avec cet automate, on obtient la figure :
|
||||
|
||||
<div align="center">
|
||||
<img src="./img/langton1.png">
|
||||
</div>
|
||||
|
||||
Par commodité, on note la table de transition précédente simplement :
|
||||
|
||||
```
|
||||
(1,0,1) (0,90,1)
|
||||
(0,-90,1) (1,0,1)
|
||||
```
|
||||
|
||||
1. Modifiez le code de l'exercice 1 de manière à pouvoir simuler l'automate ci-dessus. Votre solution doit pouvoir permettre une simulation quelconque.
|
||||
Quelle est la table correspondante à la fourmi de la première partie du tp ?
|
||||
2. Testez avec
|
||||
```
|
||||
(1,90,0) (0,-90,1)
|
||||
(0,-90,1) (1,90,1)
|
||||
```
|
||||
<div align="center">
|
||||
<img src="./img/langton2.png">
|
||||
</div>
|
||||
3. Testez avec
|
||||
|
||||
```
|
||||
(1, 0, 1) (0, 90, 0)
|
||||
(0, -90, 1) (1, 0, 1)
|
||||
```
|
||||
|
||||
### <a name="p2"></a> Séance 2
|
||||
Soit le tableau d'objets suivant :
|
||||
```js
|
||||
let customers = [
|
||||
{
|
||||
'id': 1,
|
||||
'f_name': 'Abby',
|
||||
'l_name': 'Thomas',
|
||||
'gender': 'M',
|
||||
'married': true,
|
||||
'age': 32,
|
||||
'expense': 500,
|
||||
'purchased': ['Shampoo', 'Toys', 'Book']
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'f_name': 'Jerry',
|
||||
'l_name': 'Tom',
|
||||
'gender': 'M',
|
||||
'married': true,
|
||||
'age': 64,
|
||||
'expense': 100,
|
||||
'purchased': ['Stick', 'Blade']
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'f_name': 'Dianna',
|
||||
'l_name': 'Cherry',
|
||||
'gender': 'F',
|
||||
'married': true,
|
||||
'age': 22,
|
||||
'expense': 1500,
|
||||
'purchased': ['Lipstik', 'Nail Polish', 'Bag', 'Book']
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'f_name': 'Dev',
|
||||
'l_name': 'Currian',
|
||||
'gender': 'M',
|
||||
'married': true,
|
||||
'age': 82,
|
||||
'expense': 90,
|
||||
'purchased': ['Book']
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'f_name': 'Maria',
|
||||
'l_name': 'Gomes',
|
||||
'gender': 'F',
|
||||
'married': false,
|
||||
'age': 7,
|
||||
'expense': 300,
|
||||
'purchased': ['Toys']
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'f_name': 'Homer',
|
||||
'l_name': 'Simpson',
|
||||
'gender': 'M',
|
||||
'married': true,
|
||||
'age': 39,
|
||||
'expense': 500,
|
||||
'purchased': ['Book']
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
En utilisant les fonctions/méthodes `forEach, filter, map, reduce, some`, donnez ou calculez :
|
||||
1. un tableau des client séniors (dont l'âge est plus de 60 ans).
|
||||
2. un tableau où chaque client possède un nouvel attribut `full_name`.
|
||||
3. s'il y a un client de moins de 10 ans.
|
||||
4. le nombre d'acheteurs de livres.
|
||||
5. la somme totale d'argent dépensé par les clients marriés.
|
||||
6. Pour chaque produit, la liste (`id`) des acheteurs.
|
||||
|
||||
Reference in New Issue
Block a user