Section 1.3: visualisations avec des cartes à jouer #

Dans notre approche, il n’y a pas de façon unique de visualiser les données d’une procédure informatique avec des cartes à jouer. Pour chaque procédure, il faut donc spécifier la visualisation à utiliser (l’Annexe 3 explique comment programmer une nouvelle visualisation). Nous donnons ici deux exemples de telles visualisations.

1.3.1 Liste ou tableau à une dimension #

Lorsque les données sont sous la forme d’une liste (ou d’un tableau à une dimension), on peut facilement visualiser cette liste par une séquence de cartes disposées, p. ex. de gauche à droite. On peut aussi utiliser des marqueurs (petits objets) pour représenter des positions (indices) dans cette liste.

P. ex. le code suivant :

Carte[] cartes;

int aDeplacer;
int i;

Carte memoireA;
Carte memoireB;

est aisément visualiser par les cartes et les marqueurs suivants :

À noter qu’une carte blanche représente une case vide (valeur null).

1.3.2 Arbre #

Dans le cas où les données sont organisées sous forme d’arbre, on peut visualiser les données en disposant aussi les cartes en forme d’arbre.

P. ex. l’arbre suivant (racine en haut, comme le veut la convention) :

Serait visualisé par les cartes suivantes :

À noter que la visualisation dépend d’une compréhension préalable de la notion d’arbre (de la forme d’un arbre). Cette compréhension préalable risque d’être moins acquise chez les étudiant·e·s que celle de séquence utilisée ci-haut. Néanmoins, utiliser des cartes peut s’avérer plus intuitif pour les novices que le format textuel. P. ex. voici le même arbre en JSON :

{
    "_C": "Noeud",
    "valeur": 4,
    "enfantGauche": {
        "_C": "Noeud",
        "valeur": 2,
        "enfantGauche": {
            "_C": "Noeud",
            "valeur": 1,
            "enfantGauche": null,
            "enfantDroit": null
        },
        "enfantDroit": {
            "_C": "Noeud",
            "valeur": 3,
            "enfantGauche": null,
            "enfantDroit": null
        }
    },
    "enfantDroit": {
        "_C": "Noeud",
        "valeur": 6,
        "enfantGauche": {
            "_C": "Noeud",
            "valeur": 5,
            "enfantGauche": null,
            "enfantDroit": null
        },
        "enfantDroit": {
            "_C": "Noeud",
            "valeur": 7,
            "enfantGauche": null,
            "enfantDroit": null
        }
    }
}