MAJ : bouton rza + clignotement explication

This commit is contained in:
mpelissi 2023-03-11 22:35:29 +01:00
parent 5c079f6fcd
commit 3ed43a8420
4 changed files with 449 additions and 26 deletions

View File

@ -0,0 +1,411 @@
{
"identite": {
"Firstname": "ùù",
"Name": "ùù",
"Age": "1",
"Sexe": "M"
},
"tache_N1": {
"obj_file": "gorgoile_update_user_study_centered_normed.obj",
"mesh": "gorgoile",
"position_init_idx_i": 7,
"position_init_idx_j": 1,
"theta_init": 0.7853981633974483,
"delta_init": 5.497787143782138,
"choix_poses": [
[
"choix1",
1.5707963267948966,
3.9269908169872414,
5,
0
],
[
"choix2",
1.5707963267948966,
3.141592653589793,
4,
0
],
[
"choix3",
1.5707963267948966,
2.356194490192345,
3,
0
]
]
},
"tache_N2": {
"obj_file": "camel_update_user_study_normed.obj",
"mesh": "camel",
"position_init_idx_i": 1,
"position_init_idx_j": 1,
"theta_init": 0.7853981633974483,
"delta_init": 0.7853981633974483,
"choix_poses": [
[
"choix1",
0.7853981633974483,
0.7853981633974483,
1,
1
],
[
"choix2",
0.7853981633974483,
0,
0,
1
],
[
"choix3",
0.7853981633974483,
5.497787143782138,
7,
1
]
]
},
"tache_N3": {
"obj_file": "dragon_update_user_study_normed.obj",
"mesh": "dragon",
"position_init_idx_i": 4,
"position_init_idx_j": 3,
"theta_init": -0.7853981633974483,
"delta_init": 3.141592653589793,
"choix_poses": [
[
"choix1",
-0.7853981633974483,
3.141592653589793,
4,
3
],
[
"choix2",
-0.7853981633974483,
2.356194490192345,
3,
3
],
[
"choix3",
-0.7853981633974483,
1.5707963267948966,
2,
3
]
]
},
"tache_N4": {
"obj_file": "horse_update_user_study_normed.obj",
"mesh": "horse",
"position_init_idx_i": 2,
"position_init_idx_j": 3,
"theta_init": -0.7853981633974483,
"delta_init": 1.5707963267948966,
"choix_poses": [
[
"choix1",
-0.7853981633974483,
1.5707963267948966,
2,
3
],
[
"choix2",
-0.7853981633974483,
0.7853981633974483,
1,
3
],
[
"choix3",
-0.7853981633974483,
0,
0,
3
]
]
},
"Analyse": {
"analyse_N1": {
"mesh": "camel",
"idx": [
3
],
"mots": [
"4. Eyes contact"
]
},
"analyse_N2": {
"mesh": "gorgoile",
"idx": [
2
],
"mots": [
"3. Debout"
]
},
"analyse_N3": {
"mesh": "dragon",
"idx": [
3
],
"mots": [
"4. Eyes contact"
]
}
},
"Interactions": [
{
"time": 1678570397746,
"type": "start"
},
{
"time": 1678570401342,
"type": "Fin contexte - Début inscription"
},
{
"time": 1678570405745,
"type": "Fin inscription"
},
{
"time": 1678570406339,
"type": "Début explications"
},
{
"time": 1678570406394,
"type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (4, 1)"
},
{
"time": 1678570406394,
"type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 3.141592653589793)"
},
{
"time": 1678570409443,
"type": "fleche droite"
},
{
"time": 1678570410040,
"type": "fleche haut"
},
{
"time": 1678570410192,
"type": "fleche haut"
},
{
"time": 1678570410192,
"type": "Affichage error à cause de fleche haut"
},
{
"time": 1678570410758,
"type": "fleche bas"
},
{
"time": 1678570410892,
"type": "fleche bas"
},
{
"time": 1678570411509,
"type": "fleche droite"
},
{
"time": 1678570415960,
"type": "bouton pose n°1"
},
{
"time": 1678570423377,
"type": "Fin explication"
},
{
"time": 1678570423972,
"type": "Début étude"
},
{
"time": 1678570423998,
"type": "Affichage Mesh random : gorgoile en idx_i, idx_j : (7, 1)"
},
{
"time": 1678570423998,
"type": "Affichage Mesh random : gorgoile en theta, delta : (0.7853981633974483, 5.497787143782138)"
},
{
"time": 1678570425322,
"type": "fleche droite"
},
{
"time": 1678570425473,
"type": "fleche droite"
},
{
"time": 1678570425907,
"type": "fleche haut"
},
{
"time": 1678570426540,
"type": "bouton pose n°1"
},
{
"time": 1678570426973,
"type": "fleche droite"
},
{
"time": 1678570427306,
"type": "bouton pose n°2"
},
{
"time": 1678570428405,
"type": "fleche droite"
},
{
"time": 1678570428690,
"type": "bouton pose n°3"
},
{
"time": 1678570429189,
"type": "bouton valider"
},
{
"time": 1678570429210,
"type": "Affichage Mesh random : camel en idx_i, idx_j : (1, 1)"
},
{
"time": 1678570429210,
"type": "Affichage Mesh random : camel en theta, delta : (0.7853981633974483, 0.7853981633974483)"
},
{
"time": 1678570429707,
"type": "bouton pose n°1"
},
{
"time": 1678570430123,
"type": "fleche droite"
},
{
"time": 1678570430423,
"type": "bouton pose n°2"
},
{
"time": 1678570430823,
"type": "fleche droite"
},
{
"time": 1678570431140,
"type": "bouton pose n°3"
},
{
"time": 1678570431641,
"type": "bouton valider"
},
{
"time": 1678570431696,
"type": "Affichage Mesh random : dragon en idx_i, idx_j : (4, 3)"
},
{
"time": 1678570431696,
"type": "Affichage Mesh random : dragon en theta, delta : (-0.7853981633974483, 3.141592653589793)"
},
{
"time": 1678570432222,
"type": "bouton pose n°1"
},
{
"time": 1678570432606,
"type": "fleche droite"
},
{
"time": 1678570432922,
"type": "bouton pose n°2"
},
{
"time": 1678570433489,
"type": "fleche droite"
},
{
"time": 1678570433807,
"type": "bouton pose n°3"
},
{
"time": 1678570434372,
"type": "bouton valider"
},
{
"time": 1678570434396,
"type": "Affichage Mesh random : horse en idx_i, idx_j : (2, 3)"
},
{
"time": 1678570434396,
"type": "Affichage Mesh random : horse en theta, delta : (-0.7853981633974483, 1.5707963267948966)"
},
{
"time": 1678570435239,
"type": "bouton pose n°1"
},
{
"time": 1678570435723,
"type": "fleche droite"
},
{
"time": 1678570436006,
"type": "bouton pose n°2"
},
{
"time": 1678570436472,
"type": "fleche droite"
},
{
"time": 1678570436873,
"type": "bouton pose n°3"
},
{
"time": 1678570437489,
"type": "bouton valider"
},
{
"time": 1678570437489,
"type": "fin des choix."
},
{
"time": 1678570437489,
"type": "Début analyse n°1"
},
{
"time": 1678570438307,
"type": "ajout check sur : analyse n°1, mot 4. Eyes contact"
},
{
"time": 1678570438741,
"type": "Bouton valider analyse."
},
{
"time": 1678570438741,
"type": "Début analyse n°2"
},
{
"time": 1678570439373,
"type": "ajout check sur : analyse n°2, mot 3. Debout"
},
{
"time": 1678570439875,
"type": "Bouton valider analyse."
},
{
"time": 1678570439875,
"type": "Début analyse n°3"
},
{
"time": 1678570440807,
"type": "ajout check sur : analyse n°3, mot 4. Eyes contact"
},
{
"time": 1678570441275,
"type": "Bouton valider analyse."
},
{
"time": 1678570441289,
"type": "Fin analyse"
}
]
}

View File

@ -19,7 +19,7 @@ function init_variable(premier_appel){
///////////////////////////////////////////////////////
// CE QUE L'ON RECUPERE A LA FIN
// dictionnaire avec les choix pour TOUS les mesh
choix = {}
if (premier_appel){choix = {}}
// dictionnaire avec les checkbox pour TOUS les mesh
checkbox_clicked = {}
///////////////////////////////////////////////////////
@ -82,12 +82,22 @@ function init_variable(premier_appel){
R = 2.5
// Enchainement des pages
page_contexte = true
page_inscription = false // true
page_explication = false
page_explication_bis = false
page_vues = false // false
page_analyse = false
if (premier_appel){
page_contexte = true
page_inscription = false // true
page_explication = false
page_explication_bis = false
page_vues = false // false
page_analyse = false
// cas raz : on recommence juste la partie vues
} else {
page_contexte = false
page_inscription = false // true
page_explication = false
page_explication_bis = false
page_vues = true // false
page_analyse = false
}
// Pour afiicher les recap dans la partie analys,e on les conserve tous
all_ctxMins = {}
@ -327,7 +337,7 @@ function animate() {
}
////////////////////////////////////////////////////////////////////////////////
if (page_explication){
//console.log("boucle explication")
console.log("boucle explication")
// on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_inscription)
// Variable pour les fonctions
@ -372,13 +382,15 @@ function animate() {
}
// bouton entr ele tutorial et l'étude
if (page_explication_bis){
commencer_etude()
ctx.clearRect(0, 0, canvas.width, canvas.height)
console.log("boucle explication2")
commencer_etude()
}
////////////////////////////////////////////////////////////////////////////////
// page de choix
if (page_vues && num_tache <= nb_mesh){
//console.log("boucle choix")
console.log("boucle choix")
// on enlève les touches du clavier associé à la page inscription
document.removeEventListener("keydown", action_clavier_explication)
//init touche clavier

View File

@ -440,24 +440,13 @@ function action_bouton_raz(){
// affichage
ctx.drawImage(imgs['croix'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.65, window.innerHeight-h_bouton +10, 60,50)
ctx.drawImage(imgs['check'], (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
// // survol croix
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50)){
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.75, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
// } // survol check
// if (is_inside(xyMouseMove,(window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50)){
// draw_contour((window.innerWidth-w_bouton*2.5)+w_bouton*0.25, window.innerHeight-h_bouton +10, 50,50, "rgb(255, 0, 255)")
// }
// click sur le check : on raz
//draw_contour( (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)
// si on veut raz
if (clicked && is_inside(xyMouseMove, (window.innerWidth-w_bouton*2.1)+w_bouton*0.15, window.innerHeight-h_bouton +10, 50,50)){
init_variable(false);
idx_i_init = Math.floor(Math.random()*8); idx_j_init = Math.floor(Math.random()*5)
setUp_3D(indice_mesh, idx_i_init, idx_j_init)
interactions.push({"time": new Date().getTime(), "type": "bouton raz check"})}
// click sur la croix ou ailleurs : on clear
//if (clicked && is_inside(xyMouseMove,W_3D*0.35+a+2*b+ecart*7 + w_bouton +400*1/2, H_3D+dy+ecart*2 + 100, 50,50)){
if(clicked){
bouton_raz_clicked = false
interactions.push({"time": new Date().getTime(), "type": "bouton raz croix"})}

View File

@ -214,11 +214,22 @@ function init_explication(){
// 6.1
{"type":"a_cliquer", "x": positions_bouton[15].x, "y":positions_bouton[15].y, "w":positions_bouton[15].w, "h":positions_bouton[15].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// 6.2
[{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// [{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.6 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// {"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
// ],
[{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.6 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_regarder", "x": W_3D + (window.innerWidth-W_3D)/2.5 -5, "y": (H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_cliquer", "x": positions_bouton[16].x, "y":positions_bouton[16].y, "w":positions_bouton[16].w, "h":positions_bouton[16].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
],
//6.3
[{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// [{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": ((H_3D/3.5)*0.4 + 100+(20+ H_3D/3.5)*2 + 20) - ((H_3D/3.5)*0.4 + 100) , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
// {"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
// ],
[{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5), "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_regarder", "x": W_3D+ (window.innerWidth-W_3D)/2.5 + W_3D/3.5 +10 -5 , "y": (H_3D/3.5)*0.4 + 100 + (20+ H_3D/3.5)*2, "w":20 +10, "h": 20 , "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente},
{"type":"a_cliquer", "x": positions_bouton[17].x, "y":positions_bouton[17].y, "w":positions_bouton[17].w, "h":positions_bouton[17].h, "c":color_clignotement,"a": alpha_clignotement, "t": temps_attente}
],
//6.4 remove
@ -371,7 +382,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){
clignotement_contour(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, clignotement.c, epaisseur_clignotement)
}
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.8)
clignotement_rectangle(2000, clignotement.x, clignotement.y, clignotement.w, clignotement.h, "rgb(0, 255, 255)", 0.8)
}
// on a plusieurs clignotement
} else {
@ -383,7 +394,7 @@ function traitement_explications(idx_i_explication, idx_j_explication){
}
// 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.8)
clignotement_rectangle(2000, clignotement_p.x, clignotement_p.y, clignotement_p.w, clignotement_p.h, "rgb(0, 255, 255)", 0.8)
}
}
}