\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:

