133 lines
4.8 KiB
TeX
133 lines
4.8 KiB
TeX
|
\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:
|
||
|
|
|