Vous devez avoir des connaissances de base sur les vecteurs (un niveau "classe de seconde" de l'enseignement général devrait suffire). Si nécessaire, vous trouverez des cours de mathématiques en ligne qui abordent ce sujet, par exemple ici.

Vous devez maîtriser les notions suivantes :

Avant de pouvoir travailler sur ces activités, il est nécessaire d'avoir étudié les activités consacrées à p5.js. Si ce n'est pas le cas, rendez-vous ici.

À faire vous-même 1.1

À faire vous-même 1.2

Complétez le fichier "index.html" avec le code suivant : 


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Faire de la physique (et un peu de maths) avec avec p5js</title>
    <script src="p5.min.js"></script>
    <script src="mobile.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

Ce fichier ne sera plus modifié dans la suite de ces activités. À chaque fois que vous aurez à créer un nouvel exemple, il vous suffira de "copier-coller" le dossier "phy_0" (en modifiant le nom).

Nous n'utiliserons pas le fichier "mobile.js" dans cette activité.

Pour manipuler les vecteurs, p5js propose la classe "p5.Vector". Voici quelques exemples d'utilisation des méthodes de la classe p5.Vector (un vecteur est un objet (au sens programmation orientée objet) dans p5js) :

Pour créer un vecteur, il suffit d'écrire :


var AB;
function setup() {
   AB=createVector(5,15);
}
function draw() {
}

Ce programme vous permet de créer un vecteur $\vec{AB}$ de coordonnées $\begin{pmatrix} 5 \\ 15 \end{pmatrix}$

Si vous ne passez aucun paramètre à la fonction createVector :


var AB;
function setup() {
   AB=createVector();
}
function draw() {
}

par défaut, le vecteur $\vec{AB}$ a pour coordonnées $\begin{pmatrix} 0 \\ 0 \end{pmatrix}$ (vecteur nul $\vec{0}$).

Il est possible d'obtenir la coordonnée x d'un vecteur $\vec{AB}$ en écrivant "AB.x" (même chose pour la coordonnée y avec "AB.y"). "AB.x" et "AB.y".

À faire vous-même 1.3

Saisissez et testez ce code

script.js


var AB;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    text("x : "+AB.x+" y : "+AB.y,10,10);
}
function draw() {
}

La méthode mag permet d'obtenir la norme d'un vecteur.

À faire vous-même 1.4

Saisissez et testez ce code


var AB;
var normeAB;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    normeAB = AB.mag();
    text("norme : "+normeAB,10,10);
}
function draw() {
}

La méthode mult permet d'avoir le résultat d'un vecteur par un réel. Cette méthode peut s'utiliser de 2 manières différentes :

À faire vous-même 1.5

Saisissez et testez ce code


var AB;
var k=2;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    text("Avant => x : "+AB.x+" y : "+AB.y,10,10);
    AB.mult(k);
    text("Après => x : "+AB.x+" y : "+AB.y,10,30);
}
function draw() {
}

À faire vous-même 1.6

Saisissez et testez ce code


var AB;
var CD;
var k=2;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    CD=p5.Vector.mult(AB,k)
    text("AB => x : "+AB.x+" y : "+AB.y,10,10);
    text("CD => x : "+CD.x+" y : "+CD.y,10,30);
}
function draw() {
}

La méthode add permet d'additionner 2 vecteurs. Comme pour la méthode mult, la méthode add peut être utilisée de 2 façons :

À faire vous-même 1.7

Saisissez et testez ce code


var AB;
var CD;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    CD =createVector(9,8);
    text("Avant : AB => x : "+AB.x+" y : "+AB.y,10,10);
    text("Avant : CD => x : "+CD.x+" y : "+CD.y,10,30);
    AB.add(CD);
    text("Après : AB => x : "+AB.x+" y : "+AB.y,10,50);
    text("Après : CD => x : "+CD.x+" y : "+CD.y,10,70);
}
function draw() {
}

À faire vous-même 1.8

Saisissez et testez ce code


var AB;
var CD;
var EF;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    CD =createVector(9,8);
    EF = createVector();
    text("Avant : AB => x : "+AB.x+" y : "+AB.y,10,10);
    text("Avant : CD => x : "+CD.x+" y : "+CD.y,10,30);
    text("Avant : EF => x : "+EF.x+" y : "+EF.y,10,50);
    EF = p5.Vector.add(AB,CD)
    text("Après : AB => x : "+AB.x+" y : "+AB.y,10,70);
    text("Après : CD => x : "+CD.x+" y : "+CD.y,10,90);
    text("Après : EF => x : "+EF.x+" y : "+EF.y,10,90);
}
function draw() {
}

La méthode sub permet de soustraire 2 vecteurs, elle s'utilise comme la méthode add. La relation $\vec{EF}=\vec{AB}-\vec{CD}$ s'écrit :


EF = p5.Vector.sub(AB,CD);

Comme pour la méthode add, il est aussi possible d'écrire :


AB.sub(CD);

La méthode normalize permet de normaliser un vecteur (cette notion vous est peut-être inconnue). Soit un vecteur $\vec{AB}$ la normalisation de ce vecteur donnera un vecteur $\vec{u}$ qui aura la même direction et le même sens que $\vec{AB}$ mais qui n'aura pas la même norme. On aura $||\vec{u}||$=1 ($\vec{u}$ est un vecteur unitaire). On aura donc $\vec{AB}=||\vec{AB}||\vec{u}$.

À faire vous-même 1.9

Saisissez et testez ce code


var AB;
var normeAB;
function setup() {
    createCanvas(800,600);
    AB=createVector(5,15);
    normeAB=AB.mag();
    text("Avant norme de u = "+normeAB,10,10);
    AB.normalize();
    normeAB=AB.mag();
    text(" Après norme de AB = "+normeAB,10,30);
}
function draw() {
}