explications du code contenue dans multidirectional-talk.html

multidirectional-talk.html

Partie servant à la construction

C'est un fichier HTML:
<!DOCTYPE html>
<html>
avec une entête :
<head>
<meta charset="UTF-8">
qui appel une page css :
<link rel="stylesheet" href="multidirectional-talk.css"/>
</head>
Nous ouvrons le corps de page et donnons un titre :
<body>
<h2>generate image in css</h2><br><br>
Le concept du dessin en multidirectionnel est qu'il existe une forme dès que nous commençons à dessiner. Que l'aspect de cette forme est la résultante de plusieurs dimensions en équilibre. Selon les valeurs entrées dans les dimensions nous obtenons un cercle, un rectangle. Toutes les formes sont de même nature. Pour réaliser une forme nous plaçons un selecteur de valeur par dimension, par exemple pour la dimension largeur :
width:<input type="number" min="1" max="500" name="nb1" id="Nb1">
Et ceci pour chaque dimension
Nous indiquons que l'outil après sert à générer la forme en indiquant où la générer. :
<p>Generates image content :</p>
Nous créons autant de bouton qu'il y a d'images dans la vidéo, en exemple pour l'image 1 :
<button id="tet1" >1</button>
Nous créons un sélecteur de fichier son :
<br><br>
<h2>generate sound in js</h2><br><br>
<p>Select sound : jo audio format, for mix in the video :</p>
<input type="number" min="1" max="16" name="nbson" id="Nbson"><br>
Nous indiquons combien il y a de fichiers son, car cela modifie le code js :
<br><br>
<h2>generate sound in js</h2><br><br>
<p>Select sound : jo audio format, for mix in the video :</p>
<input type="number" min="1" max="16" name="nbson" id="Nbson"><br>
Avec un bouton, nous indiquons à quelle image fixer le fichier son. Le fait de fixer le son à l'image permet que celui-ci soit mixé au changement de vitesse et non pas déformé.
<p>Placement of audio files in the video:</p>
<button Id="snd1">1</button>
Nous allons chercher les fichiers son au format audio abadie.jo sur l'ordinateur pour les préparer :
<br><br><br>
<p>get sound : abadie jo audio format, for header javascript :</p>
<p>
1:<input type="file" name="Gsnd1" id="gsnd1" onchange="gens1(this.files)"/>

Base de support de construction

Première partie le fichier html de la vidéo

Nous indiquons en premier que c'est une page HTML et ouvrons l'entête :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>multidirectional-talk</title>

Nous commençons à dessiner les premières bases comme celle qui masque les dessins, cette propriété du dessin n'est désactivée qu'au moment ou on veut que le dessin s'affiche. Le concept est que tout les dessins sont en permanence dans la vidéo avec une propriété qui les masques. Assujetit à un compteur de position dans le temps, la fonction qui cache le dessin est désactivé selon l'image :

<style>

.indique{
  cursor:pointer;
}
.cachemoi {
    display: none;
}

.sortdutrou {
    display: inline;
}

.action{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:blue;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.action5mn{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:red;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionvitesse{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:green;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionunivers{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionunivers{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:2%;
  border-right:1px solid #BBB;
  cursor:pointer;
}

Nous plaçons un premier repère pour pouvoir générer le code dans l'entête css de la page HTML :
<div id='repere_tourne'> </div>
Nous fermons le css de l'entête, fermons l'entête et ouvrons le corps de la page HTML :
```
</style>
</head>
<body>
```
En premier nous créons les emplacements ou seront générés les fichiers audio :
```
<div id="basewave1"> </div>
```
Nous créons notre permière image en la cachant à l'aide de la class css cachemoi :
```
<div id="fleur1" class="cachemoi" >
```
Cette image c'est celle qui va apparaitre en dernier, car le compteur qui crée la base de temps soustrait. La balise de l'image n'est pas fermée afin que le code générée soit contenue dans la balise.
Nous créons un emplacement ou seront générés les images à l'aide du code css généré:
```
<div id='repere_injection_monde1_img16'> </div>
```
Nous fermons la balise de la première image :
```
 </div>
```
L'opération est répétée autant de fois qu'il y a d'images et d'univers dans la vidéo.
Nous créons une barre de navigation dans le temps pour que l'utilisateur puisse aborder le document par un lieu d'accroche après une première vision rapide :
```

<div class="action" id="actionx1aPress" style="margin-left:1%;">
</div>
```

Nous créons une action d'arrêt sur image, avec son retour à la lecture et autres possibilités d'utilisation sur la vitesse:

<div class="action5mn" id="actionstopa" style="margin-left:61%;">
</div>
<div class="action5mn" id="actionrestarta" style="margin-left:63%;">
</div>
<div class="actionvitesse" id="diminuLeVenta" style="margin-left:67%;">
-</div>
<div class="actionvitesse" id="acelereLeVenta" style="margin-left:69%;">
+</div>
<div class="actionunivers" id="action1Pressa" style="margin-left:75%;">
</div>
<div class="actiontexte" style="margin-left:15%;">
<p>time line</p></div>
<div class="actiontexte" style="margin-left:61%;">
<p>pause</p></div>
<div class="actiontexte" style="margin-left:67%;">
<p>speed</p></div>
<div class="actiontexte" style="margin-left:75%;">
<p>multidirectional talk</p></div>

Nous plaçons les liens vers les 4 fichiers utiles à la vidéo, les fichiers à copier/coller générés en dessous dans la page HTML génératrice :

<script type="text/javascript" src="example.js"> </script>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript" src="adapt.js"></script>
<script type="text/javascript" src="jom.js"></script>

Nous fermons la page HTML à copier/coller :
```
</html> 
```

Deuxième partie le fichier javascript de la vidéo,
example.js

Nous annonçons que le code est celui de example.js :
<h2>Part javascript to copy / paste the file example.js</h2>
Nous créons une variable de positionnement, et nous la plaçons au début à 15.
Car dans l'exemple, il y a 16 images par univers, que le 0 est une image, et que c'est un compte à rebour :
var persistanceretinienne = 15;
Nous créons une variable de gestion pour le compteur de temps:
var nbimg = null;
Nous créons une variable pour indiquer combien de fois la vidéo est joué en boucle :
var nbboucle = 70;
Nous créons une variable de gestion :
var mua1 = 0;
Nous créons un point de repère pour que l'utilisateur puisse indiquer la vitesse initiale :
</pre><div id="vitesse"> </div><pre>

Nous créons les variables utiles à la construction :

var ouioui;
var joueur = 'fleur';
var joueur1;
var joueur2;
var version = 1;
var joueur3 = 'bisfleur';
var joueur4;
var joueur5 = 'bis';
var joueur7;
var joueur8;
var arretimage5mn = 300000;
var souvenirvitesse = 1000;

Préparation pour pouvoir générer les sons dès l'ouverture de la vidéo :
var soud1 = [</pre><div id="donner_son1"> </div><pre>];
Création d'une fonction qui accélère la vidéo au clique sur un bouton, et pistage du bouton acelereLeVenta par la ligne en dessous :
function acelereLeVent(){
if(vitesseDuVent>123){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
}
}
document.getElementById("acelereLeVenta").addEventListener("click", acelereLeVent);
Création d'une fonction qui ralentie la vidéo au clique sur un bouton, et pistage du bouton diminuLeVenta par la ligne en dessous :
function diminuLeVent(){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
document.getElementById("diminuLeVenta").addEventListener("click", diminuLeVent);
Création d'une fonction qui met sur pause la vidéo au clique sur un bouton, et pistage du bouton actionstopa par la ligne en dessous :
function actionstop(){
clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);
Création d'une fonction qui met sur pause la vidéo au clique sur un bouton, et pistage du bouton actionstopa par la ligne en dessous :
function actionstop(){
clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);
Création d'une fonction qui relance la vidéo au clique sur un bouton, et pistage du bouton actionrestarta par la ligne en dessous :
function actionrestart(){
clearInterval(nbimg);
vitesseDuVent = souvenirvitesse;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionrestarta").addEventListener("click", actionrestart);
Gestion de l'affichage :
function decoupe2(joueur4){
document.getElementById(joueur4).className = 'cachemoi';}
function decoupe1(joueur2){
document.getElementById(joueur2).className = 'cachemoi';}
function decoupe3(joueur1){
document.getElementById(joueur1).className = 'sortdutrou';}
function restecalme(joueur1,joueur8,ouioui){
if(version == 1){
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';}
for (var placier = 1; placier < ouioui; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';}
document.getElementById(joueur1).className = 'sortdutrou';
document.getElementById(joueur8).className = 'cachemoi';
}
if(version == 2){
for (var placier = 1; placier < ouioui; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
document.getElementById(joueur8).className = 'sortdutrou';
document.getElementById(joueur1).className = 'cachemoi';
}
}
Création d'une fonction qui positionne l'image dans le temps et place le son :
function change(persistanceretinienne)
{
switch (persistanceretinienne) {
case 0:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
</pre>
<div id="repere_son16"> </div>
<pre>
break;
Nous fixons une limite au compteur le compteur de temps :
function durermax()
{
clearInterval(nbimg);
}
Nous créons le compteur de temps à l'aide d'une boucle qui décrémente la position de l'image "persistanceretinienne--":
change(persistanceretinienne);
persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{
/* selection du nombre d'image*/
/* persistanceretinienne = 3;*/
persistanceretinienne = 15;
nbboucle = nbboucle-1;
}
}
Nous démarrons la lecture de la vidéo :
function lancertout()
{
nbimg = setInterval(seance, vitesseDuVent);
setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne);
}
Nous démarrons la génération des sons et lancertout :
function lancertout1()
{
lecjo(soud1);
lecjo(soud2);
lecjo(soud3);
lecjo(soud4);
lecjo(soud5);
lecjo(soud6);
lecjo(soud7);
lecjo(soud8);
lecjo(soud9);
lecjo(soud10);
lecjo(soud11);
lecjo(soud12);
lecjo(soud13);
lecjo(soud14);
lecjo(soud15);
lecjo(soud16);
lancertout();
}
Nous créons notre sélectionneur de fichier audio pour que le même son puisse être jouer plusieurs fois en même temps. La technique est de créer plusieurs fois le même son en utilisant des noms différents, et la fonction appel à chaque fois un nom différent :
function JoueLeSon(mua1){
(mua1==0){
var multia1 = document.getElementById("1awav");
multia1.play();}
else if(mua1==1){
var multia2 = document.getElementById("2awav");
multia2.play();}
else if(mua1==2){
var multia3 = document.getElementById("3awav");
multia3.play();}
else if(mua1==3){
var multia4 = document.getElementById("4awav");
multia4.play();}
}
Nous créons une fonction qui permet de changer d'univers à chaque clique sur un bouton:
function action1Press(){
version = version + 1;
if(version>2){
version = 1;}
}
Nous pistons les cliques sur les boutons de position qui permettent de changer de position dans la vidéo:
document.getElementById("action1Pressa").addEventListener("click", action1Press);
function actionx1Press(){
persistanceretinienne = 15;}
Nous pistons les cliques sur les boutons de position qui permettent de changer de position dans la vidéo:
document.getElementById("action1Pressa").addEventListener("click", action1Press);
function actionx1Press(){
persistanceretinienne = 15;}
Nous demandons au fichiers javascript de se lancer dès que la page HTML est chargée :
document.addEventListener("DOMContentLoaded", function(event) {
load();
});
Nous allons chercher le javascript :
<script type="text/javascript" src="page-scripts/multidirectional-talk.js"
Et nous fermons la page HTML génératrice :
</body>
</html>