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