2023-03-06 18:01:12 +01:00
function init _explication ( ) {
alpha _ecran = 0.9
alpha _clignotement = 0.8
color _ecran = "rgb(255,255,255)"
color _texte = "rgb(0,0,0)"
2023-03-10 08:57:25 +01:00
color _clignotement = "rgb(0,255,255)"
2023-03-07 18:16:30 +01:00
font _texte = window . innerWidth
ecart _x = 50
l _texte _max = window . innerWidth - W _3D - 2 * ecart _x - 50
marge _texte _x = 20
marge _texte _y = 50
w _bouton _suivant = boutons [ "suivant" ] . width * 0.3
h _bouton _suivant = boutons [ "suivant" ] . height * 0.3
temps _attente = 3000
// actions = [
// {'ecran': {'x': W_3D + ecart_x, "y": H_3D*0.7, "w":window.innerWidth-W_3D-2*ecart_x, "h":H_3D*0.45, "c":color_ecran,"a": alpha_ecran},
// 'texte': ,
// 'clignotement': {"x":0, "y":0, "w":100, "h":100, "c":color_clignotement,"a": alpha_clignotement, "t": new Date().getTime()+temps_attente},
// 'bouton' :{"afficher": true, "x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant},
// 'condition_suivant':{"x": W_3D + ecart_x + window.innerWidth-W_3D-2*ecart_x - w_bouton_suivant - marge_texte_x, "y": H_3D*0.7 + H_3D*0.45 - h_bouton_suivant -marge_texte_x, "w": w_bouton_suivant, "h":h_bouton_suivant}}
// ]
ecrans = [
// 0
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 1.1
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 1.2,
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 1.3
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 2.1 : Selection 1er vues
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 2.2 : clique sur fleche droite
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 2.3 : clique sur fleche haut
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 2.4 : clique sur fleche haut
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 2.5 : PBL trop haut
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 3.1 : clique sur fleche bas
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 3.2 : clique sur fleche bas
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 3.3 : clique sur fleche droite
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran } ,
// 4: Selection de la vue
{ 'x' : W _3D + ecart _x , "y" : H _3D * 0.6 , "w" : window . innerWidth - W _3D - 2 * ecart _x , "h" : H _3D * 0.45 , "c" : color _ecran , "a" : alpha _ecran }
]
textes = [
// 0
{ "t" : "Here is how the interface looks like." , "x" : ecrans [ 0 ] . x + marge _texte _x , "y" : ecrans [ 0 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 1.1 : ecran 3D
{ "t" : "You have: A screen to view the 3D object," , "x" : ecrans [ 1 ] . x + marge _texte _x , "y" : ecrans [ 1 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 1.2 : fleche
{ "t" : "You have: Arrows to move the 3D object," , "x" : ecrans [ 2 ] . x + marge _texte _x , "y" : ecrans [ 2 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 1.3 : bouton
{ "t" : "You have: Buttons to make your selection." , "x" : ecrans [ 3 ] . x + marge _texte _x , "y" : ecrans [ 3 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 2.1 : Selection 1er vues
{ "t" : "Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 2.2 : clique sur fleche droite
{ "t" : "Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 2.3 : clique sur fleche haut
{ "t" : "Let's try to select your first view. To do this, let's move the 3D model. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 2.4 : clique sur fleche haut
{ "t" : "ArrowUp once again. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 2.5 : PBL trop haut
{ "t" : "You can't go further. Error messages may appear if you make impossible manipulations. Now let's try again to select our first view : GO DOWN. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.01 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 3.1 : clique sur fleche bas
{ "t" : "It's better. Once again. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 3.2 : clique sur fleche bas
{ "t" : "It's better. Go to the right. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.012 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 3.3 : clique sur fleche bas
{ "t" : "Let's imagine that you choose this point of view. You have to select it with the button. (Follow the guide)" , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.011 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
// 4 :
{ "t" : "You have chosen your first viewpoint. It is displayed on your right. This one has become gray on the 3D screen. You can no longer select it." , "x" : ecrans [ 4 ] . x + marge _texte _x , "y" : ecrans [ 4 ] . y + marge _texte _y , "f" : 0.011 , "l" : l _texte _max , "c" : color _texte , "i" : 50 } ,
]
positions _bouton = [
// 0
{ "afficher" : true , "x" : ecrans [ 0 ] . x + ecrans [ 0 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 0 ] . y + ecrans [ 0 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 1.1
{ "afficher" : true , "x" : ecrans [ 1 ] . x + ecrans [ 1 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 1 ] . y + ecrans [ 1 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 1.2
{ "afficher" : true , "x" : ecrans [ 2 ] . x + ecrans [ 2 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 2 ] . y + ecrans [ 2 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 1.3
{ "afficher" : true , "x" : ecrans [ 3 ] . x + ecrans [ 3 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 3 ] . y + ecrans [ 3 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 2.1 : Selection 1er vues
{ "afficher" : true , "x" : ecrans [ 4 ] . x + ecrans [ 4 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 4 ] . y + ecrans [ 4 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 2.2 : clique sur fleche droite
{ "afficher" : true , "x" : ecrans [ 5 ] . x + ecrans [ 5 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 5 ] . y + ecrans [ 5 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 2.3 : clique sur fleche haut
{ "afficher" : true , "x" : ecrans [ 6 ] . x + ecrans [ 6 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 6 ] . y + ecrans [ 6 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 2.4 : clique sur fleche haut
{ "afficher" : true , "x" : ecrans [ 7 ] . x + ecrans [ 7 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 7 ] . y + ecrans [ 7 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 2.5 : PBL trop haut
{ "afficher" : true , "x" : ecrans [ 8 ] . x + ecrans [ 8 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 8 ] . y + ecrans [ 8 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 3.1 : clique sur fleche bas
{ "afficher" : true , "x" : ecrans [ 9 ] . x + ecrans [ 9 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 9 ] . y + ecrans [ 9 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 3.2 : clique sur fleche bas
{ "afficher" : true , "x" : ecrans [ 10 ] . x + ecrans [ 10 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 10 ] . y + ecrans [ 10 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 3.3 : clique sur fleche droite
{ "afficher" : true , "x" : ecrans [ 11 ] . x + ecrans [ 11 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 11 ] . y + ecrans [ 11 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant } ,
// 4
{ "afficher" : true , "x" : ecrans [ 12 ] . x + ecrans [ 12 ] . w - w _bouton _suivant - marge _texte _x , "y" : ecrans [ 12 ] . y + ecrans [ 12 ] . h - h _bouton _suivant - marge _texte _x / 2 , "w" : w _bouton _suivant , "h" : h _bouton _suivant }
2023-03-06 18:01:12 +01:00
]
2023-03-07 18:16:30 +01:00
clignotements = [
// 0
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : positions _bouton [ 0 ] . x , "y" : positions _bouton [ 0 ] . y , "w" : positions _bouton [ 0 ] . w , "h" : positions _bouton [ 0 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : temps _attente } ,
2023-03-07 18:16:30 +01:00
// 1.1 : ecran 3D
2023-03-10 08:57:25 +01:00
[ { "type" : "a_regarder" , "x" : 0 , "y" : h _progress _bar , "w" : W _3D , "h" : H _3D , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
{ "type" : "a_cliquer" , "x" : positions _bouton [ 1 ] . x , "y" : positions _bouton [ 1 ] . y , "w" : positions _bouton [ 1 ] . w , "h" : positions _bouton [ 1 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : temps _attente } ,
] ,
2023-03-07 18:16:30 +01:00
// 1.2 : fleche
2023-03-10 08:57:25 +01:00
[ { "type" : "a_regarder" , "x" : W _3D * 0.2 - b , "y" : H _3D + DY , "w" : b + a + b , "h" : b + a + b , "c" : color _clignotement , "a" : alpha _clignotement , "t" : new Date ( ) . getTime ( ) + 500 } ,
{ "type" : "a_cliquer" , "x" : positions _bouton [ 2 ] . x , "y" : positions _bouton [ 2 ] . y , "w" : positions _bouton [ 2 ] . w , "h" : positions _bouton [ 2 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : temps _attente } ,
] ,
2023-03-07 18:16:30 +01:00
// 1.3
2023-03-10 08:57:25 +01:00
[ { "type" : "a_regarder" , "x" : W _3D * pos _bouton , "y" : H _3D + dy * 2 , "w" : w _bouton * 2 + ecart _bouton , "h" : h _bouton * 2 + ecart _bouton , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
{ "type" : "a_cliquer" , "x" : positions _bouton [ 3 ] . x , "y" : positions _bouton [ 3 ] . y , "w" : positions _bouton [ 3 ] . w , "h" : positions _bouton [ 3 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : temps _attente } ,
] ,
2023-03-07 18:16:30 +01:00
// 2.1 : Selection 1er vues
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : positions _bouton [ 4 ] . x , "y" : positions _bouton [ 4 ] . y , "w" : positions _bouton [ 4 ] . w , "h" : positions _bouton [ 4 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : temps _attente } ,
2023-03-07 18:16:30 +01:00
// 2.2 : clique sur fleche droite
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 + a , "y" : H _3D + DY + b , "w" : b , "h" : a , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 2.3 : clique sur fleche haut
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 , "y" : H _3D + DY , "w" : a , "h" : b , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 2.4 : clique sur fleche haut
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 , "y" : H _3D + DY , "w" : a , "h" : b , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 2.5 : PBL trop haut
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 , "y" : H _3D + DY + b + a , "w" : a , "h" : b , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 3.1 : clique sur fleche bas
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 , "y" : H _3D + DY + b + a , "w" : a , "h" : b , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 3.2 : clique sur fleche bas --> next step fleche droite
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * 0.2 + a , "y" : H _3D + DY + b , "w" : b , "h" : a , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 3.3 : clique sur fleche drioite --> next step bouton pose
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : W _3D * pos _bouton , "y" : H _3D + dy * 2 , "w" : w _bouton , "h" : h _bouton , "c" : color _clignotement , "a" : alpha _clignotement , "t" : 500 } ,
2023-03-07 18:16:30 +01:00
// 4
2023-03-10 08:57:25 +01:00
{ "type" : "a_cliquer" , "x" : positions _bouton [ 12 ] . x , "y" : positions _bouton [ 12 ] . y , "w" : positions _bouton [ 12 ] . w , "h" : positions _bouton [ 12 ] . h , "c" : color _clignotement , "a" : alpha _clignotement , "t" : new Date ( ) . getTime ( ) }
2023-03-07 18:16:30 +01:00
]
conditions _suivant = [
// 0
{ "type" : "bouton" , "x" : positions _bouton [ 0 ] . x , "y" : positions _bouton [ 0 ] . y , "w" : positions _bouton [ 0 ] . w , "h" : positions _bouton [ 0 ] . h } ,
// 1.1
{ "type" : "bouton" , "x" : positions _bouton [ 1 ] . x , "y" : positions _bouton [ 1 ] . y , "w" : positions _bouton [ 1 ] . w , "h" : positions _bouton [ 1 ] . h } ,
// 1.2
{ "type" : "bouton" , "x" : positions _bouton [ 2 ] . x , "y" : positions _bouton [ 2 ] . y , "w" : positions _bouton [ 2 ] . w , "h" : positions _bouton [ 2 ] . h } ,
// 1.3
{ "type" : "bouton" , "x" : positions _bouton [ 3 ] . x , "y" : positions _bouton [ 3 ] . y , "w" : positions _bouton [ 3 ] . w , "h" : positions _bouton [ 3 ] . h } ,
// 2.1 : Selection 1er vues
{ "type" : "bouton" , "x" : positions _bouton [ 4 ] . x , "y" : positions _bouton [ 4 ] . y , "w" : positions _bouton [ 4 ] . w , "h" : positions _bouton [ 4 ] . h } ,
// 2.2 : clique sur fleche droite
{ "type" : "fleche_d" , "x" : clignotements [ 5 ] . x , "y" : clignotements [ 5 ] . y , "w" : clignotements [ 5 ] . w , "h" : clignotements [ 5 ] . h } ,
// 2.3 : clique sur fleche haut
{ "type" : "fleche_h" , "x" : clignotements [ 6 ] . x , "y" : clignotements [ 6 ] . y , "w" : clignotements [ 6 ] . w , "h" : clignotements [ 6 ] . h } ,
// 2.4 : clique sur fleche haut
{ "type" : "fleche_h" , "x" : clignotements [ 7 ] . x , "y" : clignotements [ 7 ] . y , "w" : clignotements [ 7 ] . w , "h" : clignotements [ 7 ] . h } ,
// 2.5 : PBL trop haut
{ "type" : "fleche_b" , "x" : clignotements [ 8 ] . x , "y" : clignotements [ 8 ] . y , "w" : clignotements [ 8 ] . w , "h" : clignotements [ 8 ] . h } ,
// 3.1 : clique sur fleche bas
{ "type" : "fleche_b" , "x" : clignotements [ 9 ] . x , "y" : clignotements [ 9 ] . y , "w" : clignotements [ 9 ] . w , "h" : clignotements [ 9 ] . h } ,
// 3.2 : clique sur fleche bas
{ "type" : "fleche_d" , "x" : clignotements [ 10 ] . x , "y" : clignotements [ 10 ] . y , "w" : clignotements [ 10 ] . w , "h" : clignotements [ 10 ] . h } ,
// 3.3 : clique sur bouton pose
{ "type" : "bouton_pose" , "x" : clignotements [ 11 ] . x , "y" : clignotements [ 11 ] . y , "w" : clignotements [ 11 ] . w , "h" : clignotements [ 11 ] . h } ,
// 4 : clique sur next
{ "type" : "bouton" , "x" : positions _bouton [ 12 ] . x , "y" : positions _bouton [ 12 ] . y , "w" : positions _bouton [ 12 ] . w , "h" : positions _bouton [ 12 ] . h }
]
nb _action = ecrans . length
2023-03-06 18:01:12 +01:00
num _action = 0
2023-03-07 18:16:30 +01:00
nb _click _explication = 0
2023-03-10 08:57:25 +01:00
time _clicke = time _animate
console . log ( 'initttt' )
2023-03-07 18:16:30 +01:00
2023-03-06 18:01:12 +01:00
}
2023-03-07 18:16:30 +01:00
function traitement _explications ( idx _i _explication , idx _j _explication ) {
temps _pop = 8000
if ( num _action == 0 ) {
idx _i = idx _i _explication
idx _j = idx _j _explication
}
console . log ( "debut" , idx _i , idx _j , num _action )
2023-03-06 16:02:20 +01:00
ctx . strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge
ctx . fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu
2023-03-07 18:16:30 +01:00
if ( num _action < nb _action ) {
// Données
ecran = ecrans [ num _action ]
texte = textes [ num _action ]
clignotement = clignotements [ num _action ]
position _bouton = positions _bouton [ num _action ]
condition _suivant = conditions _suivant [ num _action ]
2023-03-06 16:02:20 +01:00
2023-03-07 18:16:30 +01:00
afficher _ecran ( ecran . x , ecran . y , ecran . w , ecran . h , ecran . c , ecran . a )
print _text ( handle _text ( texte . t , texte . x , texte . y , texte . f * font _texte + "pt Courier" , texte . l , texte . c , texte . i ) )
survol _bouton ( )
// s'il faut afficher le bouton next/previous
if ( position _bouton . afficher ) {
// bouton suivant
ctx . drawImage ( boutons [ 'suivant' ] , position _bouton . x , position _bouton . y , position _bouton . w , position _bouton . h )
if ( is _inside ( xyMouseMove , position _bouton . x , position _bouton . y , position _bouton . w , position _bouton . h ) ) {
2023-03-10 08:57:25 +01:00
//console.log('ttt')
2023-03-07 18:16:30 +01:00
draw _rectangle ( position _bouton . x , position _bouton . y , position _bouton . w , position _bouton . h , "rgb(200, 200, 200)" , 0.6 ) }
// Bouton previous
if ( num _action > 0 ) {
ctx . drawImage ( boutons [ 'avant' ] , position _bouton . x - w _bouton _suivant - marge _texte _x , position _bouton . y , position _bouton . w , position _bouton . h )
if ( is _inside ( xyMouseMove , position _bouton . x - w _bouton _suivant - marge _texte _x , position _bouton . y , position _bouton . w , position _bouton . h ) ) {
2023-03-10 08:57:25 +01:00
//console.log("dedans")
2023-03-07 18:16:30 +01:00
draw _rectangle ( position _bouton . x - w _bouton _suivant - marge _texte _x , position _bouton . y , position _bouton . w , position _bouton . h , "rgb(200, 200, 200)" , 0.6 ) }
}
}
2023-03-10 08:57:25 +01:00
// 1 clignotement courant donc taille = 8 car 8 keys
if ( Object . keys ( clignotement ) . length == 8 ) {
if ( time _animate > time _clicke + clignotement . t && num _action != 12 && clignotement . type == "a_cliquer" ) {
clignotement _contour ( 2000 , clignotement . x , clignotement . y , clignotement . w , clignotement . h , clignotement . c , 10 )
}
if ( time _animate > time _clicke + clignotement . t && clignotement . type == "a_regarder" ) {
clignotement _rectangle ( 2000 , clignotement . x , clignotement . y , clignotement . w , clignotement . h , "rgb(17, 138, 178)" , 0.6 )
}
// on a plusieurs clignotement
} else {
for ( let p = 0 ; p < clignotement . length ; p ++ ) {
clignotement _p = clignotement [ p ]
// contour
if ( time _animate > time _clicke + clignotement _p . t && num _action != 12 && clignotement _p . type == "a_cliquer" ) {
clignotement _contour ( 2000 , clignotement _p . x , clignotement _p . y , clignotement _p . w , clignotement _p . h , clignotement _p . c , 10 )
}
// rectangle
if ( time _animate > time _clicke + clignotement _p . t && clignotement _p . type == "a_regarder" ) {
clignotement _rectangle ( 2000 , clignotement _p . x , clignotement _p . y , clignotement _p . w , clignotement _p . h , "rgb(17, 138, 178)" , 0.6 )
}
}
}
2023-03-07 18:16:30 +01:00
// si on clique sur NEXT
if ( condition _suivant . type == "bouton" && clicked && click _inside ( xyMouseDown , condition _suivant . x , condition _suivant . y , condition _suivant . w , condition _suivant . h ) ) {
console . log ( "next" )
action _suivante ( )
2023-03-10 08:57:25 +01:00
2023-03-07 18:16:30 +01:00
}
// Si on clique sur PREVIOUS
//if (condition_suivant.type =="bouton" && num_action >0 && clicked && click_inside(xyMouseDown, condition_suivant.x- w_bouton_suivant - marge_texte_x, condition_suivant.y, condition_suivant.w, condition_suivant.h)){
if ( num _action > 0 && clicked && click _inside ( xyMouseDown , position _bouton . x - w _bouton _suivant - marge _texte _x , position _bouton . y , position _bouton . w , position _bouton . h ) ) {
console . log ( "previous" )
action _previous _explication ( )
}
// Si on clique sur Fleche droite
if ( condition _suivant . type == "fleche_d" && num _action > 0 && clicked && click _inside ( xyMouseDown , condition _suivant . x , condition _suivant . y , condition _suivant . w , condition _suivant . h ) ) {
console . log ( "fleche_d" )
action _droite _explication ( )
}
// Si on clique sur Fleche Haut
if ( condition _suivant . type == "fleche_h" && num _action > 0 && clicked && click _inside ( xyMouseDown , condition _suivant . x , condition _suivant . y , condition _suivant . w , condition _suivant . h ) ) {
console . log ( "fleche_h" )
action _haut _explication ( )
}
// Si on clique sur Fleche bas
if ( condition _suivant . type == "fleche_b" && num _action > 0 && clicked && click _inside ( xyMouseDown , condition _suivant . x , condition _suivant . y , condition _suivant . w , condition _suivant . h ) ) {
console . log ( "fleche_b" )
texte _temporaire = { }
action _bas _explication ( )
}
// Si on clique sur Fleche bas
if ( condition _suivant . type == "bouton_pose" && num _action > 0 && clicked && click _inside ( xyMouseDown , condition _suivant . x , condition _suivant . y , condition _suivant . w , condition _suivant . h ) ) {
console . log ( "bouton_pose" )
action _bouton _pose ( )
action _suivante ( )
}
// FIN du tuto
if ( num _action == nb _action ) {
console . log ( "explications finies" )
action _fin _explication ( )
}
}
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
function action _fin _explication ( ) {
choix _courant = { }
liste _poses = [ ]
nb _choix _fait = 0
page _explication = false
page _vues = true
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : "Fin explication. Début des choix." } )
}
function action _previous _explication ( ) {
if ( ( num _action == 6 ) || ( num _action == 11 ) ) { action _fleche _gauche ( ) ; update _mesh ( idx _i , idx _j ) }
if ( ( num _action == 7 ) ) { action _fleche _bas ( ) ; update _mesh ( idx _i , idx _j ) }
if ( ( num _action == 9 ) || ( num _action == 10 ) ) { action _fleche _haut ( ) ; update _mesh ( idx _i , idx _j ) }
if ( num _action == 12 ) { action _bouton _retirer ( ) }
action _precedente ( )
2023-03-06 16:02:20 +01:00
}
2023-03-07 18:16:30 +01:00
function action _haut _explication ( ) {
action _fleche _haut ( )
update _mesh ( idx _i , idx _j )
action _suivante ( )
}
function action _droite _explication ( ) {
action _fleche _droite ( )
update _mesh ( idx _i , idx _j )
action _suivante ( )
}
function action _bas _explication ( ) {
action _fleche _bas ( )
update _mesh ( idx _i , idx _j )
action _suivante ( )
}
function action _suivante ( ) {
num _action = num _action + 1
2023-03-10 08:57:25 +01:00
time _clicke = time _animate
2023-03-07 18:16:30 +01:00
}
function action _precedente ( ) {
num _action = num _action - 1
2023-03-10 08:57:25 +01:00
time _clicke = time _animate
2023-03-07 18:16:30 +01:00
}
function update _mesh ( I , J ) {
theta = 2 * Math . PI * ( ( 2 / 8 ) * ( J == 0 ) + ( 1 / 8 ) * ( J == 1 ) + ( - 1 / 8 ) * ( J == 3 ) + ( - 2 / 8 ) * ( J == 4 ) )
delta = 2 * Math . PI * ( I / 8 )
//camera.position.set(R*Math.cos(theta)*Math.cos(delta), R*Math.sin(theta)*Math.cos(delta), R*Math.sin(delta)) // repère wiki
camera . position . set ( R * Math . cos ( delta ) * Math . cos ( theta ) , R * Math . sin ( theta ) , R * Math . sin ( delta ) * Math . cos ( theta ) ) // repère JS
camera . lookAt ( 0 , 0 , 0 )
}
function action _clavier _explication ( event ) {
switch ( event . key ) {
// selectionner pose
case ' ' :
if ( num _action == 11 ) {
console . log ( "pose clavier" )
action _bouton _pose ( )
action _suivante ( ) }
break ;
// valider
case 'Enter' :
console . log ( "next clavier" )
if ( num _action < nb _action && condition _suivant . type == "bouton" ) {
action _suivante ( ) }
if ( num _action == nb _action ) {
action _fin _explication ( )
}
break ;
case 'Backspace' :
if ( num _action > 0 ) {
if ( num _action == 6 ) { action _fleche _gauche ( ) ; update _mesh ( idx _i , idx _j ) }
if ( ( num _action == 7 ) ) { action _fleche _bas ( ) ; update _mesh ( idx _i , idx _j ) }
console . log ( "previous clavier" )
action _precedente ( ) }
break ;
case 'ArrowRight' :
if ( condition _suivant . type == "fleche_d" ) {
console . log ( "fleche_d clavier" )
action _droite _explication ( )
}
break
case 'ArrowUp' :
if ( condition _suivant . type == "fleche_h" ) {
console . log ( "fleche_h clavier" )
action _haut _explication ( )
}
break
case 'ArrowDown' :
if ( condition _suivant . type == "fleche_b" ) {
console . log ( "fleche_b clavier" )
action _bas _explication ( )
}
break
}
}
function survol _bouton _explication ( ) {
if ( is _inside ( xyMouseMove , W _3D * pos _bouton , H _3D + dy * 2 , w _bouton , h _bouton ) ) { draw _rectangle ( W _3D * pos _bouton , H _3D + dy * 2 , w _bouton , h _bouton , "rgb(200, 200, 200)" , 0.6 ) }
2023-03-06 16:02:20 +01:00
}
2023-03-07 18:16:30 +01:00
//ctx.clearRect(0, 0, canvas.width, canvas.height)
//texte = "Explications"
//font = "42pt Courier"
//ctx.font = font
//largeur = ctx.measureText(texte).width
//ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
