introduction a la simulation - math et...
TRANSCRIPT
![Page 1: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/1.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Introduction a la Simulationou comment creer votre premier jeu video
Jacques Duma
♣♦♥♠
http://math.et.info.free.fr/
http://ateliermathematique.free.fr/
♣♦♥♠ Introduction a la Simulation
![Page 2: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/2.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Aspect visuel souhaite
♣♦♥♠ Introduction a la Simulation
![Page 3: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/3.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html>
<head><title>Jeu de Balle</title>
</head><body><h1>Balle Rebondissante</h1><div>
CADRE<div>BALLE</div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 4: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/4.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html><head>
<title>Jeu de Balle</title>
</head><body>
<h1>Balle Rebondissante</h1><div>
CADRE<div>BALLE</div>
</div>
</body></html>
♣♦♥♠ Introduction a la Simulation
![Page 5: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/5.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html><head><title>Jeu de Balle</title>
</head><body>
<h1>Balle Rebondissante</h1><div id="cadre">
CADRE<div>BALLE</div>
</div>
</body></html>
♣♦♥♠ Introduction a la Simulation
![Page 6: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/6.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html><head><title>Jeu de Balle</title>
</head><body><h1>Balle Rebondissante</h1>
<div>CADRE<div>BALLE</div>
</div>
</body></html>
♣♦♥♠ Introduction a la Simulation
![Page 7: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/7.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html><head><title>Jeu de Balle</title>
</head><body><h1>Balle Rebondissante</h1><div>CADRE
<div>BALLE</div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 8: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/8.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Page HTML : «index.html»
<html><head><title>Jeu de Balle</title>
</head><body><h1>Balle Rebondissante</h1><div>CADRE<div>BALLE</div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 9: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/9.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }
#cadre {width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;position : fixed ;top : 75px ; left : 75px ;
}#balle {
width : 100px ; height : 100px ;background-color : red ;position : absolute ;top : 10px ; left : 10px ;
}CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 10: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/10.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }#cadre {
width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;
position : fixed ;top : 75px ; left : 75px ;
}
#balle {width : 100px ; height : 100px ;background-color : red ;position : absolute ;top : 10px ; left : 10px ;
}CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 11: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/11.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }#cadre {
width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;position : fixed ;top : 75px ; left : 75px ;
}
#balle {width : 100px ; height : 100px ;background-color : red ;position : absolute ;top : 10px ; left : 10px ;
}CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 12: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/12.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }#cadre {
width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;position : fixed ;top : 75px ; left : 75px ;
}#balle {
width : 100px ; height : 100px ;background-color : red ;
position : absolute ;top : 10px ; left : 10px ;
}
CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 13: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/13.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }#cadre {
width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;position : fixed ;top : 75px ; left : 75px ;
}#balle {
width : 100px ; height : 100px ;background-color : red ;position : absolute ;top : 10px ; left : 10px ;
}
CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 14: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/14.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Feuille de styles en CSS : «style.css»
h1 { color : blue ; }#cadre {
width : 500px ; height : 300px ;border : 4px black solid ;background-color : silver ;position : fixed ;top : 75px ; left : 75px ;
}#balle {
width : 100px ; height : 100px ;background-color : red ;position : absolute ;top : 10px ; left : 10px ;
}CADRE et BALLE supprimes du texte HTML
♣♦♥♠ Introduction a la Simulation
![Page 15: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/15.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Lien entre HTML et CSS :
<html><head><title>Jeu de Balle</title>
</head><body><h1>Balle Rebondissante</h1><div>CADRE<div> BALLE </div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 16: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/16.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Lien entre HTML et CSS :
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css">
</head><body><h1>Balle Rebondissante</h1><div>CADRE<div> BALLE </div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 17: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/17.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Lien entre HTML et CSS :
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css">
</head><body><h1>Balle Rebondissante</h1><div id="cadre">CADRE<div id="balle"> BALLE </div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 18: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/18.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
Lien entre HTML et CSS :
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css">
</head><body><h1>Balle Rebondissante</h1><div id="cadre"><div id="balle"> </div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 19: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/19.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
HTML : HyperText Markup LanguageLangage a Balises pour l’HyperTexte
Balises pre-definies (tag)
html, head, link, body, h1, div,... etc.
Structure : Texte ecrit entre deux balises de meme nom
<html> balise ouvrante... ici du Texte eventuellement encadre par d’autres balises ...
</html> balise fermante
Liste Attribut-Valeur dans les balises ouvrantes
<div id="balle">
♣♦♥♠ Introduction a la Simulation
![Page 20: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/20.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
HTML : HyperText Markup LanguageLangage a Balises pour l’HyperTexte
Balises pre-definies (tag)
html, head, link, body, h1, div,... etc.
Structure : Texte ecrit entre deux balises de meme nom
<html> balise ouvrante... ici du Texte eventuellement encadre par d’autres balises ...
</html> balise fermante
Liste Attribut-Valeur dans les balises ouvrantes
<div id="balle">
♣♦♥♠ Introduction a la Simulation
![Page 21: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/21.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
HTML : HyperText Markup LanguageLangage a Balises pour l’HyperTexte
Balises pre-definies (tag)
html, head, link, body, h1, div,... etc.
Structure : Texte ecrit entre deux balises de meme nom
<html> balise ouvrante... ici du Texte eventuellement encadre par d’autres balises ...
</html> balise fermante
Liste Attribut-Valeur dans les balises ouvrantes
<div id="balle">
♣♦♥♠ Introduction a la Simulation
![Page 22: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/22.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Aspect visuel souhaiteCode source de la page HTMLFeuille de Styles en CSSResume de ce qui a ete vu
CSS : Cascading Style SheetsFeuilles de style en cascade
Geometrie des cases de texte : Le texte de chaque element de lastructure est affiche dans un rectangle parametrable :
width
height Texte
padding
margin border
background-color
color
#balle { width: 100px; height: 100px; background-color: red;position: absolute; top: 10px; left: 10px; }
♣♦♥♠ Introduction a la Simulation
![Page 23: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/23.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Animation : Affichage image par image
Une Animation consiste a changer periodiquement l’image affichee
× x(0, 0)
y
(dx , dy)
vecteur deplacement
Balle
(x , y)
•t = 0
♣♦♥♠ Introduction a la Simulation
![Page 24: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/24.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Animation : Affichage image par image
Une Animation consiste a changer periodiquement l’image affichee
× x(0, 0)
y
(dx , dy)
vecteur deplacement
Balle
(x , y)
•
•t = 0
t = dt
♣♦♥♠ Introduction a la Simulation
![Page 25: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/25.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Animation : Affichage image par image
Une Animation consiste a changer periodiquement l’image affichee
× x(0, 0)
y
(dx , dy)
vecteur deplacement
Balle
(x , y)•
•
•
t = 0
t = dt
t = 2dt
♣♦♥♠ Introduction a la Simulation
![Page 26: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/26.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Animation : Affichage image par image
Une Animation consiste a changer periodiquement l’image affichee
× x(0, 0)
y
(dx , dy)
vecteur deplacement
Balle
(x , y)
•
•
•
•
t = 0
t = dt
t = 2dt
t = 3dt
♣♦♥♠ Introduction a la Simulation
![Page 27: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/27.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Animation : Affichage image par image
Une Animation consiste a changer periodiquement l’image affichee
× x(0, 0)
y
(dx , dy)
vecteur deplacement
Balle
(x , y)
•
•
•
•
•
t = 0
t = dt
t = 2dt
t = 3dt
♣♦♥♠ Introduction a la Simulation
![Page 28: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/28.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe horizontal
× x(0, 0)
y
mur bas
(dx ,−dy)
(dx , dy)
•
•
♣♦♥♠ Introduction a la Simulation
![Page 29: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/29.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe horizontal
× x(0, 0)
y
mur bas
(dx ,−dy)
(dx , dy)
•
•
♣♦♥♠ Introduction a la Simulation
![Page 30: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/30.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe horizontal
× x(0, 0)
y
mur bas
(dx ,−dy)
(dx , dy)
•
•
♣♦♥♠ Introduction a la Simulation
![Page 31: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/31.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe horizontal
× x(0, 0)
y
mur bas
(dx ,−dy)
(dx , dy)
•
•
♣♦♥♠ Introduction a la Simulation
![Page 32: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/32.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe vertical
× x
mu
rd
roit
(0, 0)
y
(−dx , dy)(dx , dy)
••
♣♦♥♠ Introduction a la Simulation
![Page 33: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/33.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe vertical
× x
mu
rd
roit
(0, 0)
y
(−dx , dy)
(dx , dy)
••
♣♦♥♠ Introduction a la Simulation
![Page 34: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/34.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe vertical
× x
mu
rd
roit
(0, 0)
y
(−dx , dy)(dx , dy)
••
♣♦♥♠ Introduction a la Simulation
![Page 35: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/35.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Symetrie par rapport a un axe vertical
× x
mu
rd
roit
(0, 0)
y
(−dx , dy)(dx , dy)
••
♣♦♥♠ Introduction a la Simulation
![Page 36: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/36.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Position, Vitesse, Temps, Mouvement
MouvementLe mouvement de la balle sur la page
sera simule par un affichage image par image
Temps
Le temps ecoule entre deux images sera le nombre dt
VitesseLa vitesse est une variation de position par rapport au temps
le deplacement sera representee par le vecteur (dx , dy)
PositionLa position est representee par les coordonnees (x , y)
♣♦♥♠ Introduction a la Simulation
![Page 37: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/37.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Position, Vitesse, Temps, Mouvement
MouvementLe mouvement de la balle sur la page
sera simule par un affichage image par image
Temps
Le temps ecoule entre deux images sera le nombre dt
VitesseLa vitesse est une variation de position par rapport au temps
le deplacement sera representee par le vecteur (dx , dy)
PositionLa position est representee par les coordonnees (x , y)
♣♦♥♠ Introduction a la Simulation
![Page 38: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/38.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Position, Vitesse, Temps, Mouvement
MouvementLe mouvement de la balle sur la page
sera simule par un affichage image par image
Temps
Le temps ecoule entre deux images sera le nombre dt
VitesseLa vitesse est une variation de position par rapport au temps
le deplacement sera representee par le vecteur (dx , dy)
PositionLa position est representee par les coordonnees (x , y)
♣♦♥♠ Introduction a la Simulation
![Page 39: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/39.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
AnimationRebonds de la balle sur les murs horizontauxRebonds de la balle sur les murs verticauxResume de ce qui a ete vu
Position, Vitesse, Temps, Mouvement
MouvementLe mouvement de la balle sur la page
sera simule par un affichage image par image
Temps
Le temps ecoule entre deux images sera le nombre dt
VitesseLa vitesse est une variation de position par rapport au temps
le deplacement sera representee par le vecteur (dx , dy)
PositionLa position est representee par les coordonnees (x , y)
♣♦♥♠ Introduction a la Simulation
![Page 40: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/40.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Initialisation «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
function avancerBalleDunPas() {. . .
}
// initialisation lors du chargement de la page HTML
function init() {
div_balle = document.getElementById("balle") ;
timer = setInterval(avancerBalleDunPas, dt) ;}
♣♦♥♠ Introduction a la Simulation
![Page 41: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/41.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Initialisation «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
function avancerBalleDunPas() {. . .
}
// initialisation lors du chargement de la page HTML
function init() {
div_balle = document.getElementById("balle") ;timer = setInterval(avancerBalleDunPas, dt) ;
}
♣♦♥♠ Introduction a la Simulation
![Page 42: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/42.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Initialisation «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
function avancerBalleDunPas() {. . .
}
// initialisation lors du chargement de la page HTMLfunction init() {
div_balle = document.getElementById("balle") ;timer = setInterval(avancerBalleDunPas, dt) ;
}
♣♦♥♠ Introduction a la Simulation
![Page 43: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/43.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Initialisation «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
function avancerBalleDunPas() {. . .
}
// initialisation lors du chargement de la page HTMLfunction init() {
div_balle = document.getElementById("balle") ;timer = setInterval(avancerBalleDunPas, dt) ;
}
♣♦♥♠ Introduction a la Simulation
![Page 44: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/44.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Animation de la Balle «code.js»
// appel tous les dt milli secondesfunction avancerBalleDunPas() {
x = x + dx ;y = x + dy ;if (x < 0 || x > murDroit) {
dx = -dx ; // rebond horizontal} else if (y < 0 || y > murBas) {
dy = -dy ; // rebond vertical} else { // on change la position de la balle
div_balle.style.left = x + "px" ; // left : 5pxdiv_balle.style.top = y + "px" ; // top : 9px
}
}
♣♦♥♠ Introduction a la Simulation
![Page 45: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/45.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Animation de la Balle «code.js»
// appel tous les dt milli secondesfunction avancerBalleDunPas() {
x = x + dx ;y = x + dy ;
if (x < 0 || x > murDroit) {dx = -dx ; // rebond horizontal
} else if (y < 0 || y > murBas) {dy = -dy ; // rebond vertical
} else { // on change la position de la ballediv_balle.style.left = x + "px" ; // left : 5pxdiv_balle.style.top = y + "px" ; // top : 9px
}
}
♣♦♥♠ Introduction a la Simulation
![Page 46: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/46.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Animation de la Balle «code.js»
// appel tous les dt milli secondesfunction avancerBalleDunPas() {
x = x + dx ;y = x + dy ;if (x < 0 || x > murDroit) {
dx = -dx ; // rebond horizontal}
else if (y < 0 || y > murBas) {dy = -dy ; // rebond vertical
} else { // on change la position de la ballediv_balle.style.left = x + "px" ; // left : 5pxdiv_balle.style.top = y + "px" ; // top : 9px
}
}
♣♦♥♠ Introduction a la Simulation
![Page 47: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/47.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Animation de la Balle «code.js»
// appel tous les dt milli secondesfunction avancerBalleDunPas() {
x = x + dx ;y = x + dy ;if (x < 0 || x > murDroit) {
dx = -dx ; // rebond horizontal} else if (y < 0 || y > murBas) {
dy = -dy ; // rebond vertical}
else { // on change la position de la ballediv_balle.style.left = x + "px" ; // left : 5pxdiv_balle.style.top = y + "px" ; // top : 9px
}
}
♣♦♥♠ Introduction a la Simulation
![Page 48: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/48.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Animation de la Balle «code.js»
// appel tous les dt milli secondesfunction avancerBalleDunPas() {
x = x + dx ;y = x + dy ;if (x < 0 || x > murDroit) {
dx = -dx ; // rebond horizontal} else if (y < 0 || y > murBas) {
dy = -dy ; // rebond vertical} else { // on change la position de la balle
div_balle.style.left = x + "px" ; // left : 5pxdiv_balle.style.top = y + "px" ; // top : 9px
}}
♣♦♥♠ Introduction a la Simulation
![Page 49: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/49.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Declaration des variables «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
var x = 250 ; // balle au centre du cadrevar y = 150 ; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5 ; // vecteur du mouvement de la ballevar dy = 2 ; // par exemple (5, 2)
var murDroit = 500 - 100 ; // largeur_cadre - largeur_ballevar murBas = 300 - 100 ; // hauteur_cadre - hauteur_balle
var dt = 20 ; // temps en milli secondes entre chaque pas
♣♦♥♠ Introduction a la Simulation
![Page 50: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/50.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Declaration des variables «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
var x = 250 ; // balle au centre du cadrevar y = 150 ; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5 ; // vecteur du mouvement de la ballevar dy = 2 ; // par exemple (5, 2)
var murDroit = 500 - 100 ; // largeur_cadre - largeur_ballevar murBas = 300 - 100 ; // hauteur_cadre - hauteur_balle
var dt = 20 ; // temps en milli secondes entre chaque pas
♣♦♥♠ Introduction a la Simulation
![Page 51: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/51.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Declaration des variables «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
var x = 250 ; // balle au centre du cadrevar y = 150 ; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5 ; // vecteur du mouvement de la ballevar dy = 2 ; // par exemple (5, 2)
var murDroit = 500 - 100 ; // largeur_cadre - largeur_ballevar murBas = 300 - 100 ; // hauteur_cadre - hauteur_balle
var dt = 20 ; // temps en milli secondes entre chaque pas
♣♦♥♠ Introduction a la Simulation
![Page 52: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/52.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Declaration des variables «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
var x = 250 ; // balle au centre du cadrevar y = 150 ; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5 ; // vecteur du mouvement de la ballevar dy = 2 ; // par exemple (5, 2)
var murDroit = 500 - 100 ; // largeur_cadre - largeur_ballevar murBas = 300 - 100 ; // hauteur_cadre - hauteur_balle
var dt = 20 ; // temps en milli secondes entre chaque pas
♣♦♥♠ Introduction a la Simulation
![Page 53: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/53.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Declaration des variables «code.js»
var div_balle ; // <div> de la ballevar timer ; // pour l’animation avec setInterval
var x = 250 ; // balle au centre du cadrevar y = 150 ; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5 ; // vecteur du mouvement de la ballevar dy = 2 ; // par exemple (5, 2)
var murDroit = 500 - 100 ; // largeur_cadre - largeur_ballevar murBas = 300 - 100 ; // hauteur_cadre - hauteur_balle
var dt = 20 ; // temps en milli secondes entre chaque pas
♣♦♥♠ Introduction a la Simulation
![Page 54: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/54.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Appel JavaScript «index.html»
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css">
</head><body><h1>Balle Rebondissante</h1><div id="cadre"><div id="balle"></div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 55: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/55.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Appel JavaScript «index.html»
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css"><script src="code.js" type="text/javascript"></script>
</head><body><h1>Balle Rebondissante</h1><div id="cadre"><div id="balle"></div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 56: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/56.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Appel JavaScript «index.html»
<html><head><title>Jeu de Balle</title><link rel="stylesheet" href="style.css" type="text/css"><script src="code.js" type="text/javascript"></script>
</head><body onload="init()"><h1>Balle Rebondissante</h1><div id="cadre"><div id="balle"></div>
</div></body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 57: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/57.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Clic sur la Balle «index.html»
<html>
<head>
<title>Jeu de Balle</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="code.js" type="text/javascript"></script>
</head>
<body onload="init()">
<h1>Balle Rebondissante</h1>
<div id="cadre">
<div id="balle"></div>
</div>
</body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 58: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/58.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Clic sur la Balle «index.html»
<html>
<head>
<title>Jeu de Balle</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="code.js" type="text/javascript"></script>
</head>
<body onload="init()">
<h1>Balle Rebondissante</h1>
<div id="cadre">
<div id="balle" class="mobile"></div>
</div>
</body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 59: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/59.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML : Clic sur la Balle «index.html»
<html>
<head>
<title>Jeu de Balle</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="code.js" type="text/javascript"></script>
</head>
<body onload="init()">
<h1>Balle Rebondissante</h1>
<div id="cadre">
<div id="balle" class="mobile" onclick="clicBalle()"></div>
</div>
</body>
</html>
♣♦♥♠ Introduction a la Simulation
![Page 60: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/60.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
CSS : Modification de la Balle «style.css»
#balle {position : absolute ;width : 200px ; height : 200px ;
}
.mobile { background-color : red ; }
.immobile {background-color : yellow ;border : 8px black dashed ;
}
♣♦♥♠ Introduction a la Simulation
![Page 61: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/61.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
CSS : Modification de la Balle «style.css»
#balle {position : absolute ;width : 200px ; height : 200px ;
}
.mobile { background-color : red ; }
.immobile {background-color : yellow ;border : 8px black dashed ;
}
♣♦♥♠ Introduction a la Simulation
![Page 62: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/62.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
CSS : Modification de la Balle «style.css»
#balle {position : absolute ;width : 200px ; height : 200px ;
}
.mobile { background-color : red ; }
.immobile {background-color : yellow ;border : 8px black dashed ;
}
♣♦♥♠ Introduction a la Simulation
![Page 63: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/63.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Reaction de la Balle «code.js»
// appel lors d’un clic sur la ballefunction clicBalle() {
if (div_balle.className === "mobile") {clearInterval(timer) ; // Stopdiv_balle.className = "immobile" ;
} else {timer = setInterval(avancerBalleDunPas, dt) ; // Godiv_balle.className = "mobile" ;
}
}
♣♦♥♠ Introduction a la Simulation
![Page 64: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/64.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Reaction de la Balle «code.js»
// appel lors d’un clic sur la ballefunction clicBalle() {
if (div_balle.className === "mobile") {clearInterval(timer) ; // Stopdiv_balle.className = "immobile" ;
}
else {timer = setInterval(avancerBalleDunPas, dt) ; // Godiv_balle.className = "mobile" ;
}
}
♣♦♥♠ Introduction a la Simulation
![Page 65: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/65.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Reaction de la Balle «code.js»
// appel lors d’un clic sur la ballefunction clicBalle() {
if (div_balle.className === "mobile") {clearInterval(timer) ; // Stopdiv_balle.className = "immobile" ;
} else {timer = setInterval(avancerBalleDunPas, dt) ; // Godiv_balle.className = "mobile" ;
}}
♣♦♥♠ Introduction a la Simulation
![Page 66: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/66.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
JavaScript : Reaction de la Balle «code.js»
// appel lors d’un clic sur la ballefunction clicBalle() {
if (div_balle.className === "mobile") {clearInterval(timer) ; // Stopdiv_balle.className = "immobile" ;
} else {timer = setInterval(avancerBalleDunPas, dt) ; // Godiv_balle.className = "mobile" ;
}}
♣♦♥♠ Introduction a la Simulation
![Page 67: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/67.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML CSS JavaScriptTechnologies du Web cote Client
Tout Navigateur Internet interprete :
HTMLLangage de description du contenu textuel des pages
CSSLangage de description de l’aspect visuel de l’affichage
JavaScriptLangage de programmation des interactions du client sur l’inteface
♣♦♥♠ Introduction a la Simulation
![Page 68: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/68.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML CSS JavaScriptTechnologies du Web cote Client
Tout Navigateur Internet interprete :
HTMLLangage de description du contenu textuel des pages
CSSLangage de description de l’aspect visuel de l’affichage
JavaScriptLangage de programmation des interactions du client sur l’inteface
♣♦♥♠ Introduction a la Simulation
![Page 69: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/69.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Animation : Balle RebondissanteModification du source HTMLInteraction de l’utilisateur : Jouer a attraper la BalleResume de ce qui a ete vu
HTML CSS JavaScriptTechnologies du Web cote Client
Tout Navigateur Internet interprete :
HTMLLangage de description du contenu textuel des pages
CSSLangage de description de l’aspect visuel de l’affichage
JavaScriptLangage de programmation des interactions du client sur l’inteface
♣♦♥♠ Introduction a la Simulation
![Page 70: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/70.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le faire : Edition des codes sources
Il vous suffit d’un editeur de texte pour creer trois fichiers
I «index.html» la page HTMLI «style.css» la feuille de style CSSI «code.js» le code JavaScript
♣♦♥♠ Introduction a la Simulation
![Page 71: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/71.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le faire : Edition des codes sources
I «index.html» la page HTML
I «style.css» la feuille de style CSS
I «code.js» le code JavaScript
♣♦♥♠ Introduction a la Simulation
![Page 72: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/72.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le faire : Edition des codes sources
I «index.html» la page HTML
I «style.css» la feuille de style CSS
I «code.js» le code JavaScript
♣♦♥♠ Introduction a la Simulation
![Page 73: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/73.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le faire : Edition des codes sources
I «index.html» la page HTML
I «style.css» la feuille de style CSS
I «code.js» le code JavaScript
♣♦♥♠ Introduction a la Simulation
![Page 74: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/74.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le tester : Execution du programme
I Placez ces 3 fichiers dans un meme dossier : «Balle»
I Ouvrez alors «index.html» dans un Navigateur Internet.
Jouez :
Clic . . .
Ensuite... donnez libre cours a votre imagination ...
♣♦♥♠ Introduction a la Simulation
![Page 75: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/75.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le tester : Execution du programme
I Placez ces 3 fichiers dans un meme dossier : «Balle»
I Ouvrez alors «index.html» dans un Navigateur Internet.
Jouez :
Clic . . .
Ensuite... donnez libre cours a votre imagination ...
♣♦♥♠ Introduction a la Simulation
![Page 76: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/76.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le tester : Execution du programme
I Placez ces 3 fichiers dans un meme dossier : «Balle»
I Ouvrez alors «index.html» dans un Navigateur Internet.
Jouez : Clic
. . .
Ensuite... donnez libre cours a votre imagination ...
♣♦♥♠ Introduction a la Simulation
![Page 77: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/77.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le tester : Execution du programme
I Placez ces 3 fichiers dans un meme dossier : «Balle»
I Ouvrez alors «index.html» dans un Navigateur Internet.
Jouez : Clic . . .
Ensuite... donnez libre cours a votre imagination ...
♣♦♥♠ Introduction a la Simulation
![Page 78: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/78.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Vous pouvez le tester : Execution du programme
I Placez ces 3 fichiers dans un meme dossier : «Balle»
I Ouvrez alors «index.html» dans un Navigateur Internet.
Jouez : Clic . . .
Ensuite... donnez libre cours a votre imagination ...
♣♦♥♠ Introduction a la Simulation
![Page 79: Introduction a la Simulation - Math et infomath.et.info.free.fr/ProgrammerLeWeb/bdd/presentationB.pdf · Page d’un Navigateur Internet Simulation : Points, Vecteurs, Sym etrie,](https://reader034.vdocuments.pub/reader034/viewer/2022050119/5f4fafdec9771f2f6f63e6dd/html5/thumbnails/79.jpg)
Page d’un Navigateur InternetSimulation : Points, Vecteurs, Symetrie, Temps, Vitesse
Programmation de l’animation : Langage JavaScriptC’est simple : Vous pouvez le faire !
Edition des codes sourcesExecution du programmeInformations complementaires
Pour plus d’informations :
Vous trouverez les exemples presentes dans cet expose sur le site :
Mathematiques et Informatique
http : //math.et.info.free.fr/
... ainsi que d’autres exemples et des informations complementaires
Et aussi de nombreux problemes et exemples sur le site :
Atelier de Mathematiques «Laurent Schwartz»http : //ateliermathematique.free.fr/
♣♦♥♠
♣♦♥♠ Introduction a la Simulation