\part{L'interface \label{interface}}
\section{Interactions élémentaires}
\paragraph{}
La première interface a été pensée pour être la plus simple possible.
L'utilisateur contrôle une caméra qui se déplace librement dans un modèle 3D.

\paragraph{}
La translation de la caméra est contrôlée par le clavier : les touches Z, Q, S,
et D servent respectivement à avancer, aller à gauche, reculer et aller à
droite (de même que les touches fléchées).

\paragraph{}
On peut pivoter la caméra de plusieurs manières :
\begin{itemize}
    \item via le pavé numérique (2, 4, 6, et 8 pour tourner respectivement vers
        le bas, vers la gauche, vers la droite et vers le haut)
    \item via la souris, comme \emph{drag-n-drop}, en cliquant un point de la
        scène et en le déplaçant
    \item via la souris, en mode \emph{pointer-lock}, comme dans un jeu video
        de tir
\end{itemize}


\section{Les recommandations}
\paragraph{}
Les recommandations sont là pour suggérer des points de vue à l'utilisateur.
Elles permettent d'aider la navigation. Elles sont affichées sous forme
d'objets 3D ajoutés à la scène. Deux affichages ont été testés.


\subsection{Les \emph{viewports}}
\paragraph{}
Les \emph{viewports} sont les affichages les plus simples : ils représentent
une caméra, avec son centre optique et son plan image.
\begin{figure}[H]
    \centering
    \includegraphics[scale=0.275]{img/new/01.png}
    \caption{Une recommandation \emph{viewport}}
\end{figure}
Cette façon d'afficher une recommandation a l'avantage d'être simple, de ne pas
beaucoup masquer le reste des modèles et suggère assez bien l'idée d'un
\emph{point de vue recommandé}, mais elle a l'inconvéniant d'être ambigüe à
cause de la perspective (dans cette image, il peut être difficile de savoir si
le point de vue et vers le modèle ou vers nous).


\subsection{Les flèches}
\subsubsection{Principe}
Les flèches sont supposées être plus intuitives pour un utilisateur qui n'a pas
l'habitude des \emph{viewports} précédemment utilisés. Plutôt que de suggérer
un point de vue, elles suggèrent le mouvemement qui va mener à ce point de vue.
\begin{figure}[H]
    \centering
    \includegraphics[scale=0.275]{img/new/02.png}
    \caption{Des recommandations flèches}
\end{figure}

\subsubsection{Courbure de la flèche}
Pour le dessin des flèches, plusieurs choses sont à prendre en compte :
\begin{itemize}
    \item il faut éviter que la flèche soit trop \emph{présente} à l'écran et
        qu'elle obstrue trop le reste de la scène
    \item il faut que la flèche soit dans un plan qui ne soit pas orthogonal au
        plan image de la caméra. En effet, si la flèche est dans un plan
        orthogonal au plan image de la caméra, elle se projettera comme un
        segment et on ne pourra pas voir la courbure de la flèche.
\end{itemize}

\paragraph{}
Pour trouver la courbure de la flèche, nous posons $C$ le centre de la caméra,
$R$ le centre de la recommandation, et $R'$ le vecteur qui donne la direction
de la recommandation. Nous cherchons ensuite un polynôme $f$ tel que :
$$\left\{\begin{array}{lcl}
    f(0) & = & C \\
    f(1) & = & R \\
    f'(1) & = & \lambda R' \text{ avec } \lambda \in \mathbb{R}^{+}
\end{array}\right.$$

\paragraph{}
Le problème de ce polynôme est qu'il ne vérifie aucune des contraintes énoncées
précédemment : puisque $f(0) = C$, le bout de la flèche est dans la caméra, et
va donc masquer toute la scène, et la courbe va en plus se projeter sur une
ligne sur l'écran.

\paragraph{}
Pour solutionner le premier problème, nous nous contenterons d'afficher
seulement la flèche pour des instants $t \in [0.5, 1]$.

\paragraph{}
Pour solutionner le deuxième problème, nous allons translater le centre de la
caméra vers le bas et le côté de la direction de la recommandation, pour
accentuer la courbure de la flèche, et nous résolvons plutôt le système suivant
:
$$\left\{\begin{array}{lcl}
    f(0) & = & C - e_z + \lambda R' \\
    f(1) & = & R \\
    f'(1) & = & \lambda R' \text{ avec } \lambda \in \mathbb{R}^{+}
\end{array}\right.$$

\subsection{Les interactions}
\subsubsection{Au survol}
\indent Cette fonctionnalité est inspirée des récents lecteurs video sur le
web.  Lorsque l'on regarde une video, on a la barre de \emph{seeking} en bas et
passer le curseur sur cette barre affiche l'image de la vidéo à l'instant visé.
Nous avons simplement adapté cette techniques à nos recommandations : lorsque
le curseur survole une recommandation, une prévisualisation est affichée dans
une petite boite au voisinage du curseur.

\begin{figure}[H]
    \centering
    \includegraphics[scale=0.275]{img/new/03.png}
    \caption{Une prévisualisation}
\end{figure}

\subsubsection{Au clic}
\indent Lors d'un clic sur une recommandation, la caméra suit un mouvement
fluide jusqu'au point de vue recommandé. La trajectoire est définié par un
polynôme interpolant tel que :
\begin{itemize}
    \item la position initiale est la position de la caméra
    \item la position finale est la position de la recommandation
    \item la dérivée de la trajectoire à l'instant final est la direction de la
        recommandation
\end{itemize}

\paragraph{}
Ce mouvement fluide est là pour ne pas perturber l'utilisateur qui pourrait
\emph{se perde} si jamais il était téléporté

\paragraph{}
De plus, les recommandations se comportent comme des liens hypertextes : elles
sont bleues si elles n'ont jamais été clicées, et deviennent violettes si
l'utilisateur les a déjà consommées. Ceci est fait pour qu'un utilisateur
puisse savoir par où il est passé, et ce qui lui reste encore à visiter.


\section{Autres éléments de navigation}
\paragraph{}
Pour faciliter la navigation, quelques autres éléments de navigation sont
présents.

\begin{figure}[H]
    \centering
    \begin{tikzpicture}[]
        \node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{img/new/buttons.png}};
        \tikzvline{-7}{1}
        \tikzvline{-5.8}{2}
        \tikzvline{-5.2}{3}
        \tikzvline{-4}{4}
        \tikzvline{-1.5}{5}

        \draw (8,5) -- (7,5);
        \draw (8,5) node[right]{6};

        \draw (-8,5) -- (-7,5);
        \draw (-8,5) node[left]{7};
    \end{tikzpicture}
    \caption{Les différents éléments de l'interface}
\end{figure}


\paragraph{}
\begin{enumerate}

    \item \emph{Reset camera} : pour chaque scène, une position initiale est
        définie. Cliquer sur ce bouton ramène la caméra à sa position initiale.

    \item \emph{Previous} : à chaque clic sur une recommandation, les positions
        intiales et finales sont sauvegardées. Cliquer sur ce bouton ramène à
        la position précédente.

    \item \emph{Next} : cliquer sur ce bouton ramène à la position suivante.

    \item \emph{Pointer lock} : permet de passer du mode \emph{pointer-lock} au
        mode \emph{drag-n-drop} et vice-versa.

    \item \emph{Music} : un lecteur qui contrôle une petite musique qui permet
        de se mettre dans l'ambiance de la scène.

    \item \emph{Coin gauge} : une jauge qui représente l'avancement de la
        récupération des pièces.

    \item \emph{FPS counter} : indique la période de rafraîchissement du rendu.

\end{enumerate}