Désolé pour le dérangement..
J'ai des exercices à réaliser mêlant JavaScript et la librairie P5.js et je fais appel à vous car je n'arrive
pas du tout à les résoudre. J'ai passé plusieurs heures à me torturer la cervelle mais je ne parviens même pas à
afficher des éléments sur la page web..
Merci d'avance pour votre aide !
EXERCICE 1 :
Soit la classe Poisson qui possède un constructeur initialisant les propriétés suivantes :
•Une position (x, y) (valeurs numériques)
•Un vitesse horizontale et une vitesse verticale (valeurs numériques)
Question 1 :
Déclarer la classe Poisson.
Question 2 :
Ajoutez à la classe Poisson une méthode dessine(...). Cette méthode doit :
• Ne pas prendre de paramètre et Ne rien retourner
• Dessiner un rectangle de 40 pixels de long et 15 pixels de haut a la position actuelle du poisson
Testez votre code en instanciant dans la méthode setup(...) de P5 un poisson p1 et en appelant sa méthode dessine(...).
Question 3 :
Ajoutez une méthode bouge(...) a la classe Poisson. Cette méthode doit :
• Ne pas prendre de paramètre et Ne rien retourner
• Déplacer le poisson de sa vitesse horizontale et de sa vitesse verticale (il faut additionner la vitesse a la position actuelle, en x et en y).
Testez votre code en ajoutant dans la fonction draw(...) de P5 :
• Un appel a clear() pour effacer le canvas.
• Un appel a bouge() pour mettre a jour la position du poisson p1.
• Un appel a dessine() pour redessiner le poisson p1 a sa nouvelle position. (attention a l’endroit ou vous déclarez la variable p1)
EXERCICE 2 :
Améliorons le graphisme de notre poisson. Prenons 2 images de poisson (une tournée à droite et l'autre à gauche). Penser à les insérer dans le répertoire contenant le code.
Question 1 :
Dans la fonction preload(), préchargez ces deux images. Vous devez utiliser la fonction loadImage de P5. (attention a l’endroit ou vous déclarer les deux variables qui vont faire référence aux images chargées !)
Question 2 :
Modifiez la fonction affiche(). Le rectangle ne doit plus être affiché. L’image du poisson tourné a droite doit être affiché si la vitesse horizontale est négative, et l’image du poisson tourné a gauche doit être affiché sinon. Vous devez utilisez la fonction image(...) de P5.
EXERCICE 3 :
Ajoutons un peu de hasard a notre poisson. La fonction Math.random() de JavaScript produit un nombre aléatoire ∈[0; 1[.
Question 1 :
Une position de départ aléatoire : Modifiez l’instanciation de p1 pour que la position initiale du poisson ∈[50; 500]
Question 2 :
Une vitesse et une direction initiale aléatoires : Modifiez l’instanciation de p1 pour que les vitesses horizontale et verticale du poisson ∈[−2; 2].
Question 3 :
Une taille aléatoire : Modifiez le constructeur de la classe Poisson afin qu’il initialise a 1 une nouvelle propriété échelle.
Ajoutez une méthode setEchelle(...) qui : Prend un paramètre numérique échelle, ne retourne rien, modifie la valeur de la propriété échelle du poisson en fonction du paramètre recu.
Modifiez la fonction dessine() et plus précisément l’appel à l'image(...). Il faut spécifier la taille souhaitée pour votre poisson. (On peut connaître la largeur et la hauteur réelle d’une image via ses propriétés width et height). Vous avez besoin de dire à l'image(...) que la taille souhaitée est la taille réelle multipliée par l’échelle.
Testez ce code en appelant la méthode setEchelle(...) après avoir instancié p1. Vous devez lui fournir un paramètre de valeur aléatoire ∈[0.5; 1.5].