TD sur javascript pour l'ISN

2017-12-05 11:46:12 +03:00 · 2017-12-05 11:46:12 +03:00 · 584f730ac1
commit 584f730ac1
parent 50448e13e1
2 changed files with 132 additions and 0 deletions
--- a/ISN/P5js/javascript_deplacement.pdf
+++ b/ISN/P5js/javascript_deplacement.pdf
--- a/ISN/P5js/javascript_deplacement.tex
+++ b/ISN/P5js/javascript_deplacement.tex
@ -0,0 +1,132 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+
+\usepackage{listings}
+
+\date{Décembre 2017}
+\title{P5js et déplacements}
+\tribe{ISN}
+
+\definecolor{mygreen}{rgb}{0,0.6,0}
+\definecolor{mygray}{rgb}{0.5,0.5,0.5}
+\definecolor{mymauve}{rgb}{0.58,0,0.82}
+
+\lstdefinelanguage{JavaScript}{
+  keywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
+  keywordstyle=\color{blue}\bfseries,
+  ndkeywords={class, export, boolean, throw, implements, import, this},
+  ndkeywordstyle=\color{darkgray}\bfseries,
+  identifierstyle=\color{black},
+  sensitive=false,
+  comment=[l]{//},
+  morecomment=[s]{/*}{*/},
+  commentstyle=\color{purple}\ttfamily,
+  stringstyle=\color{red}\ttfamily,
+  morestring=[b]',
+  morestring=[b]"
+}
+\lstset{ %
+  backgroundcolor=\color{white},   % choose the background color
+  basicstyle=\footnotesize,        % size of fonts used for the code
+  breaklines=true,                 % automatic line breaking only at whitespace
+  captionpos=b,                    % sets the caption-position to bottom
+  commentstyle=\color{mygreen},    % comment style
+  escapeinside={\%*}{*)},          % if you want to add LaTeX within your code
+  keywordstyle=\color{blue},       % keyword style
+  stringstyle=\color{mymauve},     % string literal style
+}
+
+\begin{document}
+
+\maketitle
+
+\bigskip
+
+Le but de ce TD est découvrir un nouveau langage: Javascript et d'explorer diverses façons de faire déplacer des objets.
+
+\bigskip
+
+Documentations en français sur Javascript: \url{https://developer.mozilla.org/fr/docs/Web/JavaScript}
+
+De manière générale, quand vous faites une recherche sur javascript ajouter le mot clé ES6 (ou supérieur). Ce sont les spécifications pour écrire correctement du javascript.
+
+\section{p5.js}
+
+Site internet de P5.js: \url{https://p5js.org/}
+
+Liens vers la références des fonctions de cette librairie: \url{https://p5js.org/reference/}
+
+\bigskip
+
+Pour faire fonctionner p5.js il faut avoir les 3 fichiers suivant dans la même répertoire.
+\begin{itemize}
+    \item Le fichier html à ouvrir avec votre navigateur (on l'appelle classiquement index.html)
+
+        \begin{lstlisting}[language=html, frame=single]
+<html>
+  <head>
+    <script src="p5.js"></script>
+    <script src="sketch.js"></script>
+  </head>
+   <body>
+  </body>
+</html>
+        \end{lstlisting}
+
+    \item La library p5js que vous pouvez télécharger \url{https://github.com/processing/p5.js/releases/download/0.5.16/p5.js}
+
+    \item Votre programme (souvent appellé sketch.js - il doit avoir le même nom que dans le fichier html). Ce fichier doit au minimum contenir les lignes suivantes:
+
+        \begin{lstlisting}[language=Javascript, frame=single]
+function setup() {
+    // Entre les deux accolades ({), on initialise notre animation
+    createCanvas(480, 600)
+}
+
+function draw() {
+    // Entre les deux accolades ({), on explique ce que javascript doit repeter indefiniement.
+    // Par exemple colorier le fond de notre image en noir
+    background(0,0,0)
+
+}
+        \end{lstlisting}
+\end{itemize}
+
+\section{Mouvement d'une balle}
+
+\subsection{Créer une balle et la faire déplacer en ligne droite}
+
+À vous de trouver comment tracer une ellipse puis de la faire déplacer en ligne droite.
+
+\subsection{Pleins de mouvements possibles}
+
+À vous de choisir les mouvements qui vous intéresse le plus et à vous de les coder!
+
+\begin{itemize}
+    \item \textbf{* Petits mouvements aléatoires}: la balle doit faire de petits mouvement comme si elle vibrait de façon aléatoire.\\
+        P5.js met à disposition une fonction \texttt{random} pour faire de l'aléatoire.
+    \item \textbf{** Rebond sur les bords}: la balle doit rebondir quand elle atteint un bord.\\
+        Voici la syntaxe pour écrire une condition en javascript.
+        \begin{lstlisting}[language=Javascript, frame=single]
+if (condition){
+    // que doit-on faire quand la condition est vraie
+} else {
+    // que doit-on faire quand la condition est fausse
+}
+        \end{lstlisting}
+    \item \textbf{** Passer d'un bord à un autre}: la balle quand elle atteint un bord, elle doit réapparaitre sur le côté opposé. \\
+        L'opérateur javascript modulo ou reste par la division euclidienne (\%) est pratique pour ce genre de situation.
+    \item \textbf{*** Trajectoire en cloche}: La balle est lancée dans une direction avec une vitesse initial et est soumis à la gravitation pour retomber (pensez à vos cours de physique!).
+    \item \textbf{* Mouvement fluide de haut en bas}: La balle a un mouvement périodique de bas en haut (pensez aux fonctions périodiques que vous connaissez).
+    \item \textbf{** Mouvement en cercle}: La balle décrit un cercle autour d'un point (pensez au cercle trigonométrique).
+\end{itemize}
+
+
+
+\end{document}
+
+%%% Local Variables: 
+%%% mode: latex
+%%% TeX-master: "master"
+%%% End:
+