AssemBEURRE : Bretagne, Animation et binaire

Pour un [projet universitaire](https://gitlab.aliens-lyon.fr/eharnisc/assembeurre) à rendre, on devait rendre une animation/jeu de notre choix fait entièrement en assembleur. Parmi les contraintes, il y avait : - Pouvoir dessiner des lignes entre deux points de l'écran - Pouvoir dessiner des rectangles entre deux points de l'écran - Pouvoir dessiner des cercles - Pouvoir afficher des caractères à l'écran - Laisser notre imagination faire le reste Alors avec le même collègue que pour [notre projet OSkour](https://www.elowarp.fr/blog/kernel-clavier-et-interrupt-descriptor-table/), nous avons longue réfléchi... Puis beaucoup rigolé... Parce que assembleur ça ressemble à peu de choses à assemBEURRE... Qui nous a fait penser à la Bretagne... Bref nous voilà parti pour faire une animation sur la Bretagne.  _Crédit : [Audrey AK](https://www.flickr.com/photos/43007351@N04)_ Contrairement à notre projet de système d'exploitation, nous ne voulions pas y passer les 3 prochaines semaines entière, donc nous sommes parties sur quelque chose d'assez simple "en soit" qui est de faire flotter un drapeau Breton. Nous devions programmer dans un assembleur customisé (l'[ISA](https://gitlab.aliens-lyon.fr/eharnisc/assembeurre/-/blob/main/bisare/isa-card.pdf?ref_type=heads) donné) et puis exécuter notre projet sur le simulateur Python `bISAre` crée par le professeur. Première contrainte technique : le simulateur Python est très lent. Repeintre l'écran (640x480) prend 2s pleine, si on veut faire une animation alors il faut réfléchir un peu. ## Première idée : la découpe en ligne En regardant le drapeau breton, la première idée est clairement de découper le drapeau en _ligne_ alternante entre blanc à noir et de dessiner les petits sigles en haut a gauche ensuite. C'est une fausse bonne idée : il faut réfléchir à comment faire l'animation de flottement. En regardant ce qui se faisait en pixelart, l'animation de flottement se fait en décalant les _colonnes_ plus ou moins en haut ou en bas.  _Crédit : [Walya](https://mx.pinterest.com/pin/885027764299935490/)_ Adoptons alors une autre approche. ## Seconde idée : la découpe en colonne Plus intelligente, on pense déjà à l'animation qui vient par la suite. Maintenant, il faut coder le fait de faire une colonne. Regardons le drapeau, les yeux dans les yeux, et essayons de voir combien de colonnes on fait avec ça.  _Illustration initiale : Domaine public_ Bon là il y a deux facons de faire une colonne, soit on code chacune des colonnes soit on continu notre combat de regard avec le drapeau et on remarque qu'il y a en fait que 4 types de colonnes différentes.  Il n'y a plus que 4 fonctions à faire, un par type de colonnes. On peut faire une fonction qui nous fait des lignes qui alternent de couleur donc le seul point difficile devient à réaliser les sigles du drapeau, qui font beaucoup penser aux mamies de la pub tipiak... Pour cela, on remarque que l'on peut coder chacune des colonnes sur 7 pixels de largeur en noir ou blanc, il nous suffit d'encoder alors chacune des lignes en binaire avec un 0 s'il y a un pixel blanc et un 1 s'il y a un pixel noir :  _Image du haut de la découpe de la conne de type 2_ On voit que la première ligne(en partant du bas) peut s'encoder $0101010_2 = 42_{10}$, la seconde ligne en $0111110_2 = 62_{10}$ etc (l'indicage $_2$ ou $_{10}$ indique la base dans laquelle on considère le nombre). Il nous suffit de faire une fonction qui décode les nombres et qui affiche les pixels correspondant à l'écran. Une facon de faire est de prendre un registre (= une variable) $r1 = 1$, au tour $r2$ de la boucle de décaler $r1$ de $r2-1$ bits vers la gauche, de faire un `ET` bit à bit entre $r1$ et le registre $r0$ contenant la valeur encodée, la stocker dans $r1$ puis de redécaler cette valeur de $r2-1$ bits vers la droite. Comme ça $r1$ vaut 1 s'il y a un pixel noir au $r2$-ième pixel (en partant de la gauche), et 0 sinon. Il s'en suit l'affichage du pixel ou non. On appelera cette façon la _sélection d'un bit_, on en reparle juste après.  _Illustration de la selection du 3 eme pixel en partant de la gauche_  _Illustration de la selection du 2 eme pixel en partant de la gauche_ En itérant sur toute la colonne, on dessine tous les sigles ! Parfait, on est capable de dessiner chacuns des types de colonnes ! Passons à l'animation. ## Animation Rappelons que le flottement d'un drapeau est un mouvement continu, si le bout du drapeau se décale, le reste du drapeau va suivre avec une petite latence. Ok comment on implémente ça ? La meilleure façon que j'ai trouvé est d'encoder l'état (= colonne plus ou moins haute) d'une colonne sur 2 bits et d'avoir un registre $r0$ qui contient tous les états de toutes les colonnes.  _Illustration de l'encodage : 00 = +0; 01 = +1; 10 = +2; 11 = -1_ On peut voir la ligne du bas comme une suite d'encodage des états, appelons le $r0$, alors $r0 = 00011011_2$ encode l'état de toutes nos colonnes. Maintenant, si nous avons l'encodage de tous les états des colonnes, on peut réaliser de la _sélection de bits_ mais cette fois sur 2 bits pour que chaque colonne récupère son état et qu'elle se déplace en haut ou en bas. On a un registre $r0$ qui encode l'état de toutes les colonnes, mais là c'est encore statique, comment on donne cet animation de flottement ? Assez simplement, il nous suffit de sauvegarder l'état de la colonne la plus à droite (les 2 bits les plus à droite du registre) dans $r1$, décaler $r0$ de 2 bits vers la droite, décaler $r1$ du nombre de bits de $r0$ moins 2 et d'ajouter les deux ! On a créé une animation cyclique !!  _Animation montrant la cyclicité, on peut suivre la colonne la plus haute allant de gauche à droite puis revenir à gauche_ Et voilà comment on fait un drapeau Breton qui flotte <3