Intégrer une animation dans un exercice

Pour intégrer Instrumenpoche dans un exercice, il faut créer une instance de l'objet Alea2Iep

import Alea2iep from "../../modules/Alea2iep.js";
const anim = new Alea2iep()

Si on veut utiliser une animation qui ne dépend pas des valeurs de l'énoncé, il suffit de récupérer un fichier Instrumenpoche au format XML.

anim.xml = `
   <xml version="1.0" encoding="UTF-8" ?>
   <INSTRUMENPOCHE version="2" licence="CC-BY-SA" >
   <action sens="5" angle="17.18" mouvement="rotation" objet="regle" />
   <action abscisse="346" ordonnee="381" epaisseur="0" couleur="noir" id="1" mouvement="creer" objet="point" />
   <action ordonnee="-30" abscisse="-10" couleur="noir" nom="A" id="1" mouvement="nommer" objet="point" />
   </INSTRUMENPOCHE>
`

texteCorr += anim.html()

À noter que l'on peut remplacer anim.html() par anim.htmlBouton() et ainsi avoir un bouton pour afficher ou masquer l'animation (qui est masquée par défaut au chargement).

Créer une animation

Après avoir créé l'instance de Alea2iep, on cite les commandes dans l'ordre chronologique, puis on génère le code HTML.

const anim = new Alea2iep()

const A = point(4,5) // Fonction à importer depuis /modules/2d.js

anim.pointCreer(A)
anim.regleMontrer(A)
anim.segmentTracer(A,B)
anim.pointCreer(B)
anim.crayonMasquer()
anim.couleur = "forestgreen" // Cela change la couleur pour tous les futurs tracés
anim.epaisseur = 2 // Cela change l'épaisseur pour tous les futurs tracés
anim.compasMontrer(A)
anim.compasEcarterAvecRegle(AC)
anim.compasTracerArcCentrePoint(A,C,40)
anim.compasDeplacer(B)
anim.compasEcarterAvecRegle(BC)
anim.compasTracerArcCentrePoint(B,C)
anim.compasMasquer()

texteCorr += anim.htmlBouton()

Recadrer une animation

La commande anim.recadre(xMin, yMax) doit apparaitre avant toutes les autres animations pour être prise en compte.

const xMin = Math.min(0, B.x, C.x, M.x, M.x + xU, N.x, N.x + xV) - 1
const yMax = Math.max(0, B.y, C.y, M.y, M.y + yU, N.y, N.y + yV) + 2
anim.recadre(xMin, yMax)
anim.crayonMontrer(M)
anim.tracer(translation(M, u), { vecteur: true, couleur: 'blue' })
...

Pour créer et tester ses animations, on peut utiliser coopmaths.fr/mathalea2iep.html.