La méthode addSpeed permet de modifier la vitesse d'un sprite. D'un point de vue physique, en simplifiant les choses, nous pouvons dire que la modification de la vitesse d'un sprite est similaire à l'application d'une force sur ce même sprite (pour les puristes, cela n'est pas tout à fait vrai puisque la modification de vitesse d'un objet A, aussi appelée accélération de A, est égale à la force divisée par la masse de A). Dans toute la suite de cette activité, nous considérerons la méthode setSpeed comme une méthode nous permettant d'appliquer une force sur un sprite.

Cette méthode addSpeed prend 2 paramètres : la valeur de la "force" et le couple "direction + sens" de la force (une force est modélisée par une "flèche" appelée vecteur en mathématiques, une force a donc une intensité (une valeur), une direction et un sens).

Cette direction et ce sens sont représentés par un angle :


Nous allons commencer par modéliser le poids d'un objet (le poids d'un objet A est la force exercée par la Terre sur l'objet A). Cette force est modélisée par un vecteur vertical dirigé vers le bas.

À faire vous même 5.1

Saisissez le code suivant dans le fichier script.js et testez cet exemple


var img;
var smiley_sprite;
function preload() {
	img=loadImage("asset/smiley.png");
}
function setup() {
	createCanvas(800,300);
	smiley_sprite=createSprite(400,20);
	smiley_sprite.addImage(img);
}
function draw() {
	background(240,240,240);
	smiley_sprite.addSpeed(0.1,90);
	drawSprites();
}
			

Nous avons placé smiley_sprite.addSpeed(0.1,90) dans la fonction draw car le poids s'applique sur le sprite en "permanence" (à chaque image). Si vous désirez appliquer une force "ponctuellement" (par exemple une "pichenette" avec les doigts sur une bille), il ne faudra pas placer addSpeed dans la fonction draw.

Rajoutons un "sol" afin de faire rebondir le sprite

À faire vous même 5.2

Saisissez le code suivant dans le fichier script.js et testez cet exemple


var img;
var smiley_sprite;
var sol;
function preload() {
	img=loadImage("asset/smiley.png");
}
function setup() {
	createCanvas(800,300);
	smiley_sprite=createSprite(400,20);
	smiley_sprite.addImage(img);
	sol=createSprite(400,305,800,10);
	sol.immovable=true;
}
function draw() {
	background(240,240,240);
	smiley_sprite.addSpeed(0.2, 90);
	smiley_sprite.bounce(sol);
	drawSprites();
}
			

En testant l'exemple ci-dessus, vous avez dû remarquer que la balle rebondissait de plus en plus haut, ce qui est évidemment impossible. Au mieux, le choc contre le sol est dit "élastique" (l'énergie de la balle se conserve : la balle rebondit toujours à la même hauteur). Ici, la balle gagne de l'énergie à chaque rebond, ce qui est problématique (visiblement, il y a un problème avec la gestion des rebonds dans p5.play)

Afin de rendre cette scène plus réaliste, nous allons rajouter une force de "frottements" qui s'appliquera à chaque rebond.

À faire vous même 5.3

Saisissez le code suivant dans le fichier script.js et testez cet exemple


var img;
var smiley_sprite;
var sol;
function preload() {
	img=loadImage("asset/smiley.png");
}

function setup() {
	createCanvas(800,300);
	smiley_sprite=createSprite(400,30);
	smiley_sprite.addImage(img);
	sol=createSprite(400,305,800,10);
	sol.immovable=true;
}

function draw() {
	background(240,240,240);
	smiley_sprite.addSpeed(0.2, 90);
	smiley_sprite.bounce(sol,frottement);
	drawSprites();
}
function frottement(){
	smiley_sprite.addSpeed(2,90);
}
			

Dans l'exemple ci-dessus, à chaque rebond, la fonction frottement est exécutée. Cette fonction permet d'appliquer une force (smiley_sprite.addSpeed(2,90)) qui permettra de diminuer l'energie du sprite à chaque rebond.

À faire vous même 5.4

Écrivez un programme permettant d'obtenir ceci (appuyez sur la touche "Entrée") :

Vous devez remarquer qu'il est impossible de sauter si le sprite est en l'air.