<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>VRデータ可視化ツール</title>
    
    <style>
        body {
          margin:0px;
          padding:0px;
          }
          
       hr {
          border: none;
          border-top: 2px dotted #ced1d3;
          }
.split {
  position: absolute;
  width: 50%;
  height: 100%;
}
.left-box {
  float:left;
  width: 1100px;
}
.right-box {
  float:right;
  width: 300px;
}
    .blinking-text {
      animation: blink 0.9s infinite;
      }

    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
      }

    .popup-overlay {
      display: block;
      z-index: 99999;
      background-color: #00000070;
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
    }

    .popup-window {
      width: 90vw;
      max-width: 560px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 6px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .popup-text {
      margin: 0;
    }

    .popup-text:not(:last-of-type) {
      margin-top: 1em;
    }

    /* 2のポップアップスタイル */
    .popup-overlay-2 {
      display: none;
      background-color: #00000070; /* 背景を暗くする */
      z-index: 99999;
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
    }
        
     /* 3のポップアップスタイル */
    .popup-overlay-3 {
      display: none;
      background-color: #00000070; /* 背景を暗くする */
      z-index: 99999;
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
    }
    
    /*プログレスバーの設定*/
    #progress-bar-container {
            width: 1140px;
            height: 7px;
            position: absolute;
            top: 625px;
            left: 53px;
            cursor: pointer; /* カーソルをポインターに変更 */
            background-color: #e0e0e0; /* バーコンテナの背景色を変更 */
    }

    #progress-bar {
            height: 100%;
            background-color: #85baef;
            width: 0;
            position: absolute;
    }
    
    #progress-handle {
            width: 15px;
            height: 15px;
            background-color: #85baef;
            border-radius: 50%;
            position: absolute;
            top: 50%; /* 上端の位置を50%に指定 */
            transform: translateY(-50%); /* 上端を基準にして要素を上に移動 */
            left: 0;
            cursor: pointer;
            
    }
    
/*スコア表示のバー設定*/
    .color-bar {
      position: relative;
      width: 500px;
      height: 25px;
      border: 2px solid #000; /* 枠線の設定 */
      box-sizing: border-box; /* 枠線も含めたボックスサイズ指定 */
    }
    
    .text-label {
      position: absolute;
      top: -3px;
      left: 510px; /* バーの右端に配置 */
      width: 100%;
      background: #FFF3B8;
      padding: 5px; 
    }
    
    .color-bar2 {
      position: relative;
      width: 500px;
      height: 25px;
      background: linear-gradient(to right,#ff0000 0px, #ff0000 83px, #ffd700 83px, #ffd700 250px, 
                                           #00cc00 250px, #00cc00 500px);
                                           /*#f6e85e 0px, #f6e85e 83px, #ffa726 83px, #ffa726 250px,#00cc00 250px, #00cc00 500px);*/
      border: 2px solid #000; /* 枠線の設定 */
      box-sizing: border-box; /* 枠線も含めたボックスサイズ指定 */
    }
    .star-marker {
      position: absolute;
      font-size: 24px;
      color: #000;
      }
/*ここからボタンデザインのCSS*/
.circle{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: #85baef;
    color: #FFF;
    text-align: center;
    position:relative;
    left:5px;
    bottom:9px; 
    margin: 10px 0;
    opacity: 0.8; 
}
.button_b {
  display       : inline-block;
  position      : relative;
  border-radius : 18%;          /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 10px;   /* 余白       */
  background    : #4d8bff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  opacity       : 0.8;         /* 透明度     */
  transition    : .3s;         /* なめらか変化 */
  border: none; /* 枠線の太さと色を指定 */
}
.button_o {
  display       : inline-block;
  border-radius : 18%;          /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 10px;   /* 余白       */
  background    : #ff7f00;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  opacity       : 0.8;         /* 透明度     */
  transition    : .3s;         /* なめらか変化 */
  border: none; /* 枠線の太さと色を指定 */
}

.circle:hover {
  opacity       : 1;           /* カーソル時透明度 */
}
.button_o:hover {
  opacity       : 1;
}
.button_b:hover {
  opacity       : 1;
}

.btn,
a.btn,
button.btn {
  font-weight: 700;
  line-height: 2;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}

    </style>
</head>
<body>
<!--ここにポップアップの記述-->
<script>
    let camera, scene,renderer;
	var posx = [-0.5843511, -0.5923371, -0.5143127, -0.5035049, -0.484911, -0.4769785, -0.4692684, -0.4630871, -0.5222968, -0.646522, -0.5830521, -0.5260196, -0.5709156, -0.5167404, -0.4672164, -0.2329667, -0.1272267, -0.03256886];
	var posz = [0.1817894, 0.138423, 0.05273104, 0.034132, 0.04222298, 0.04823804, 0.05642223, 0.09306169, 0.2804093, 0.6239462, 1.053934, 1.616333, 2.160304, 2.750021, 3.372035, 3.979876, 4.579666, 5.136336];
	var time = ['00:00:00.00', '00:00:00.50', '00:00:01.00', '00:00:020', '00:00:02.00', '00:00:02.50', '00:00:03.00', '00:00:03.50', '00:00:04.01', '00:00:04.51', '00:00:05.01', '00:00:05.51', '00:00:06.01', '00:00:06.51', '00:00:07.01', '00:00:07.51', '00:00:08.01', '00:00:08.52'];
	
	var rotx = [0.08506931, 0.235652, 0.9620506, 0.9588857, 0.9340552, 0.897034, 0.8881455, 0.8452662, -0.1881963, -0.8352191, -0.96306, -0.4312168, 0.0361208, 0.0376997, 0.01805235, -0.1100157, -0.08161122, -0.2335936];
	var roty = [0.01376307, 0.06435914, 0.0395049, 0.07795557, 0.09087741, 0.09812509, 0.09086481, 0.07840791, 0.07038861, 0.08635908, 0.1176269, 0.0634802, 0.05906114, 0.06999966, 0.1260574, 0.02202322, -0.003226275, -0.06641089];
	var rotz = [0.99628, 0.9697041, 0.269996, 0.2728753, 0.3453726, 0.4309309, 0.4504901, 0.5285617, 0.9796059, 0.5430939, 0.2422381, 0.9000124, 0.9976007, 0.9968344, 0.9918587, 0.9936858, 0.996659, 0.9700637];
	var carType;

var carData = {
carSpeed: [
    { carSpeed_0: '50' },
    { carSpeed_1: '50' },
    { carSpeed_2: '40' },
    { carSpeed_3: '40' },
    { carSpeed_4: '50' },
    { carSpeed_5: '60' },
    { carSpeed_6: '40' },
  ],
    firstTime: [
    { firstTime_0: '00:00:00.00' },
    { firstTime_1: '00:00:00.00' },
    { firstTime_2: '00:00:00.00' },
    { firstTime_3: '00:00:00.00' },
    { firstTime_4: '00:00:00.00' },
    { firstTime_5: '00:00:00.00' },
    { firstTime_6: '00:00:06.01' },
  ],
  posX: [
    { posX_0: ['-20.83333', '-13.6111', '-6.666656', '0.2777864', '7.222229', '14.16667', '21.11113', '28.0556', '35.00006', '41.94453', '48.88899', '55.83346', '62.77792', '70.00017', '76.94463', '83.8891', '90.83356', '97.77803'] },
    { posX_1: ['48.61111', '41.38887', '34.4444', '27.49994', '20.55547', '13.61101', '6.666571', '-0.2778722', '-7.222315', '-14.16676', '-21.11122', '-28.05568', '-35.00014', '-42.22239', '-49.16685', '-56.11132', '-63.05579', '-70.00025'] },
    { posX_2: ['-100', '-94.22224', '-88.66671', '-83.11118', '-77.55564', '-72.00011', '-66.44457', '-60.88904', '-55.3335', '-49.77797', '-44.22243', '-38.6669', '-33.11137', '-27.33361', '-21.77808', '-16.22254', '-10.66698', '-5.111426'] },
    { posX_3: ['100', '94.22224', '88.66671', '83.11118', '77.55564', '72.00011', '66.44457', '60.88904', '55.3335', '49.77797', '44.22243', '38.6669', '33.11137', '27.33361', '21.77808', '16.22254', '10.66698', '5.111426'] },
    { posX_4: ['-180.5556', '-173.3335', '-166.3892', '-159.445', '-152.5007', '-145.5564', '-138.6121', '-131.6679', '-124.7235', '-117.779', '-110.8346', '-103.8901', '-96.94563', '-89.72339', '-82.77892', '-75.83446', '-68.88999', '-61.94553'] },
    { posX_5: ['258.3333', '249.6667', '241.3335', '233.0003', '224.6671', '216.3339', '208.0007', '199.6675', '191.3343', '183.0011', '174.6679', '166.3347', '158.0014', '149.3349', '141.0017', '132.6685', '124.3352', '116.0018'] },
    { posX_6: ['-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-200', '-194.222', '-188.6663', '-183.1106', '-177.5549', '-171.9991'] },
  ],
  posZ: [
    { posZ_0: '5' },
    { posZ_1: '2' },
    { posZ_2: '5' },
    { posZ_3: '2' },
    { posZ_4: '5' },
    { posZ_5: '2' },
    { posZ_6: '5' },
  ]
  };

	var carNum = 7; //車の台数を記録
	
	var i = 0;
	var t_step = 0.125;
	
	var t_count=1; //1のときは描画を進める、-1のときは停止する
	
	
	var fileNamePlayer;
	var playerlogNumber;
	
	var manMaterial = 0x0067c0;
	var manScale = 163.1;

	//関数の定義
	var playerlogLoaded = false;
	var gamesLoaded = false;
	var objectlogLoaded = false;
	
	var playerData;
	var gamesData;
	var objectData;
	
	var gameid;

	var sex = 1;
	var age = 20;
	var hit_object = 2;
	var license = 2;
	var hitTime = "00:09.0";
	
	var cam_y = 4800;
	var cam_z = -5300;
	var camF = 0;
	
	var situationText = "確認中…";
	var situationNum = 0;
	var currentNum = 0;	

    //ボタンのOnClickイベント関数
    //停止・再生ボタン
    function b_s(){
      t_count *= -1;
      if(Math.floor(i)===max){b_re();}
      }
    
    //戻るボタン
    function b_back(){
      i -= 1;
      t_count = -1;
      }
    
    //進むボタン
    function b_go(){
      i += 1;
      t_count = -1;
      }
      
   //二倍速ボタン
    function b_x2(){
      t_step = 0.25;
      }
           
   //一倍速ボタン
    function b_x1(){
      t_step = 0.125;
      }
      
    //再描画ボタン
    function b_re(){
      i = 0;
      t_count = 1;
      situationText = "確認中…";
      situationTextColor = "black";
      situationNum = 0;
      }
      
    //カメラ操作ボタン
    function camAbove(){
      cam_y = 2000;
	  cam_z = -800;
	  camF = 1;
      }
    
    function camFront(){
	  cam_y = 1500;
	  cam_z = -2000;
	  camF = 0;
      }
      

    function camP(){
      if(camF === 0){cam_z += 200;}
	  cam_y -= 200;
      }
    function camM(){
      if(camF === 0){cam_z -= 200;}
	  cam_y += 200;
      }



	//間に算術平均を挿入した配列を作る関数
	function Mean(arr) {
  	var result = [];
  
  	for (var i = 0; i < arr.length; i++) {
    	result.push(parseFloat(arr[i])); // 文字列を数値に変換して追加
    
    if (i < arr.length - 1) {
      var average = (parseFloat(arr[i]) + parseFloat(arr[i + 1])) / 2; // 平均の計算
      result.push(average);
      }
     }
  return result;
  }

	//配列の長さを倍にする関数
	function duplicate(arr) {
  var result = [];

  for (var i = 0; i < arr.length; i++) {
    result.push(arr[i]);
    if (i < arr.length - 1) {
      result.push(arr[i]);
    }
  }

  return result;
}
</script>

<!-- 参考ページhttps://rilaks.jp/blog/popup-css/ -->
<script type="module">
    import * as THREE from'https://unpkg.com/three@0.126.1/build/three.module.js';
    import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
    import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';
    
        var progressBar = document.getElementById("progress-bar");
        var progressBarContainer = document.getElementById("progress-bar-container");
        var progressHandle = document.getElementById("progress-handle");
        var isDragging = false;

scene = new THREE.Scene();
scene.scale.x = -1;


camera = new THREE.PerspectiveCamera(70, 1000 / 500, 0.1, 10000);
camera.near = 1;
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#myCanvas'),
  antialias: true
});
renderer.setSize(1200, 600);//1000,500 1510,755
// アンビエントライトの設定
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // カラー、明るさ
scene.add(ambientLight);
// 平行光源の設定
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, -1).normalize(); // 光源の位置を設定
// シーンに光源を追加
scene.add(directionalLight);

camera.position.set(0, cam_y, cam_z);
camera.lookAt(0, 0, 0);


	// 地面を作成
      const geometry = new THREE.BoxGeometry(40000, 1, 5000);
      const material = new THREE.MeshStandardMaterial({color: 0x808080});
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);
      
     // スタート線・ゴール線を作成
      const geometry_walk = new THREE.BoxGeometry(40000, 1, 50, 100, 1, 1);
      const material_walk = new THREE.MeshStandardMaterial({color: 0xf5f5f5});
      const box_walk = new THREE.Mesh(geometry_walk, material_walk);
      const box_walk_end = new THREE.Mesh(geometry_walk, material_walk);
            box_walk_end.position.z += 650;
      
      box.add(box_walk);
      box.add(box_walk_end);
      
    //中央線を作成
      const geometry_center = new THREE.BoxGeometry(40000, 1, 20, 100, 1, 1);
      const material_center = new THREE.MeshStandardMaterial({color: "orange"});
      const box_center = new THREE.Mesh(geometry_center, material_center);
      box_center.position.z += 325;
      box.add(box_center);    

    
	// 人を作成
      const geometry_man = new THREE.CylinderGeometry( 30, 25, manScale, 32 );
      const material_man = new THREE.MeshStandardMaterial({ color: manMaterial });
      const man = new THREE.Mesh(geometry_man, material_man);
      
      const geo_head = new THREE.SphereGeometry( 27, 32, 32 );
      const head = new THREE.Mesh(geo_head, material_man );
      man.add( head );
      
      man.position.x = 0;
      man.position.z = 0;
      scene.add(man);

     // 視線の描画
     var material_line = new THREE.LineBasicMaterial({ color: 0xff0000 });
     
     // manのジオメトリ取得
     const manPosition = man.position.clone();
     var geometry_line = new THREE.BufferGeometry().setFromPoints([manPosition, 
                         new THREE.Vector3(rotx[0] * 600, roty[0] * 600, rotz[0] * 600)]);
     var line = new THREE.Line(geometry_line, material_line);
     head.add(line);

      // 50m、100mの位置にポイント
      const textureLoader = new THREE.TextureLoader();
      const texture_50 = textureLoader.load('./50m.png');
      const texture_100 = textureLoader.load('./100m.png');
      
      const geometry_50 = new THREE.PlaneGeometry( 800, 600, 32 );
      const geometry_100 = new THREE.PlaneGeometry( 1000, 600, 32 );
      const material_50 = new THREE.MeshBasicMaterial( { map: texture_50, side: THREE.DoubleSide } );
      const material_100 = new THREE.MeshBasicMaterial( { map: texture_100, side: THREE.DoubleSide } );
      
      const plane_50right = new THREE.Mesh( geometry_50, material_50 );
      plane_50right.position.x = 5000;
      plane_50right.position.y = 200;
      plane_50right.position.z = 1000;
      scene.add( plane_50right );
	  plane_50right.rotation.x = Math.PI / 4;
      
      const plane_50left = new THREE.Mesh( geometry_50, material_50 );
      plane_50left.position.x = -5000;
      plane_50left.position.y = 200;
      plane_50left.position.z = 1000;
      scene.add( plane_50left );
	  plane_50left.rotation.x = Math.PI / 4;
      
      const plane_100right = new THREE.Mesh( geometry_100, material_100 );
      plane_100right.position.x = 10000;
      plane_100right.position.y = 200;
      plane_100right.position.z = 1000;
      scene.add( plane_100right );
	  plane_100right.rotation.x = Math.PI / 4;
      
      const plane_100left = new THREE.Mesh( geometry_100, material_100 );
      plane_100left.position.x = -10000;
      plane_100left.position.y = 200;
      plane_100left.position.z = 1000;
      scene.add( plane_100left );
	  plane_100left.rotation.x = Math.PI / 4;


     //glbファイルの読み込み
    var colorFile;
    var cars = {};
    const loader = new GLTFLoader();
    function createCar(carID) {
        const carSpeed = carData.carSpeed[carID][`carSpeed_${carID}`];
	    // 速度に応じてカラーを設定
	    if (carSpeed == '60') {colorFile = './carObjectR.glb';
	    } else if (carSpeed == '50') {colorFile = './carObjectY.glb';
	    } else if (carSpeed == '40') {colorFile = './carObjectB.glb';
	    }
        loader.load(colorFile, function(gltf) {
            var car = gltf.scene;
            if(carData.posZ[carID][`posZ_${carID}`]==2){
                  car.rotation.y -= Math.PI / 2;
            }else{
                  car.rotation.y = Math.PI / 2;
            }
            car.scale.set(120, 120, 120);
            car.position.set(carData.posX[carID][`posX_${carID}`][0]*100, 100, carData.posZ[carID][`posZ_${carID}`]*100 );
            cars[`car_${carID}`] = car;
            scene.add(cars[`car_${carID}`]);
        }, undefined, function(e) {
            i.error(e);
        });
        }
 //文字点滅表示のための関数
function startBlinking() {
    situation.classList.add("blinking-text"); // 点滅クラスを追加
    }

function stopBlinking() {
    situation.classList.remove("blinking-text"); // 点滅クラスを削除
    }
 stopBlinking();
	window.startAnimation = function() {
	  /*横断挙動に関する数値化-------------------------------------------------------------------------------------------------*/
	  //変数の定義
	  var checkSwing;//確認角度
	  var bigSwing = 0;  //確認角度30°以上の確認
	  var smallSwing = 0;//確認角度30°以下の確認
	  
	  var maxSwingRight = 0; //一番奥まで確認した時の角度を記録する（右）
      var maxSwingLeft = 0;  //一番奥まで確認した時の角度を記録する（左）
      
      var maxSRHistory = []; //角度の深さを記録（右）
      var maxSLHistory = []; //角度の深さを記録（左）
      
      var swingRightTime = 0;//確認時間（右）
      var swingLeftTime = 0; //確認時間（左）
      
      var previousSwing = 0; //正面を向いた時を感知するため一つ前の角度を記録
      
      var startTime;         //横断開始時刻を記録
      var finishTime = rotx.length;        //横断終了時刻を記録
      
      var rightCarDis = []; //右側からの接近車両との距離を記録
      var leftCarDis = [];  //左側からの接近車両との距離を記録
      var rightCloseCar; //最も近い右側からの接近車両との距離を記録
      var leftCloseCar;  //最も近い左側からの接近車両との距離を記録
                   
      //首振り角度数値化
      function calculateAngleWithZAxis(x, z) {
          // 直線の方向ベクトル
          const lineVector = { x: x, y: 0, z: z };
          // Z軸方向ベクトル
          const zAxisVector = { x: 0, y: 0, z: 1 };
          // ベクトルの大きさを計算する関数
          const calculateMagnitude = (vector) => Math.sqrt(vector.x ** 2 + vector.y ** 2 + vector.z ** 2);
          // 内積を計算する関数
          const calculateDotProduct = (vector1, vector2) => vector1.x * vector2.x + vector1.y * vector2.y + vector1.z * vector2.z;
          // 方向ベクトルとZ軸方向ベクトルのなす角を計算（ラジアン）
          const angleRadians = Math.acos(calculateDotProduct(lineVector, zAxisVector) / (calculateMagnitude(lineVector) * calculateMagnitude(zAxisVector)));
          // ラジアンから度に変換
          var angleDegrees = angleRadians * (180 / Math.PI);
          //左を見ている場合負の値にする
          if(x<0){ angleDegrees *= -1; }
          return angleDegrees;
          }
      
      //点と点を結んだ直線の長さを求める関数
      function calculateDistance(x1, y1, x2, y2) {
          const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
          return distance;
          }


      //首振り回数数値化
      //首振り角度が0～29°の時の回数、30°以上の時の回数をカウント
      for (let i = 0; i < rotx.length ; i++) {
          //finishTime = i;
          checkSwing = calculateAngleWithZAxis(rotx[Math.floor(i)], rotz[Math.floor(i)]);
          //右向きの場合
          if(checkSwing > 0){
               swingRightTime += 1;
               if(checkSwing > maxSwingRight){
                   maxSwingRight = checkSwing;
                   }
               }
          //左向きの場合
          else if(checkSwing < 0){
               swingLeftTime += 1;
               if(checkSwing < maxSwingLeft){
                   maxSwingLeft = checkSwing;
                   }
               }
          //正面を向いたかどうか
          if(previousSwing * checkSwing < 0){
               //右向き・左向きの首振りの角度を記録
               if(previousSwing > 0){
                   maxSRHistory.push(maxSwingRight);
                   }
               else{
                   maxSLHistory.push(maxSwingLeft);
                   }

               //大きな首振りだったか小さな首振りだったのか調べカウント
               if(maxSwingRight >= 30 || maxSwingLeft <= -30){
                   bigSwing += 1;
                   }
               else{
                   smallSwing += 1;
                   }
               maxSwingRight = 0;
               maxSwingLeft = 0;
               }
               previousSwing = checkSwing;
               
               //横断開始時刻を算出
               if(posz[Math.floor(i)] - posz[0] > 0.2 && startTime == undefined || (i == finishTime && startTime == 0)){
                   startTime = i/2;
                   //横断開始位置から終了位置までの距離を求める
                   var mitinori = calculateDistance(posx[Math.floor(i)], posz[Math.floor(i)], posx[finishTime-1], posz[finishTime-1]);
                   //横断開始時の左右の車との距離を算出
                   for (var j = 0; j <= carNum - 1; j++) {
                       if(carData.posZ[j][`posZ_${j}`] == 2 && carData.posX[j][`posX_${j}`][Math.floor(i)] > 0){
                           rightCarDis.push(carData.posX[j][`posX_${j}`][Math.floor(i)]);
                           }
                       else if(carData.posZ[j][`posZ_${j}`] == 5 && carData.posX[j][`posX_${j}`][Math.floor(i)] < 0){
                           leftCarDis.push(carData.posX[j][`posX_${j}`][Math.floor(i)]);
                       }
                   }
                   rightCloseCar = Math.min(...rightCarDis);
                   leftCloseCar = - Math.max(...leftCarDis);
                   }
          }
          
        swingRightTime /= 2;
        swingLeftTime /= 2;
        
        //横断終了時刻を算出
        finishTime /= 2;
        //横断にかかった時間を算出
        var walkTime =  Math.round((finishTime - startTime) * 10) / 10;
        //横断速度を算出
        var walkSpeed = Math.round((mitinori / walkTime) * 100) / 100;
        
        //平均を求める関数
        function average(numbers) {
               let sum = numbers.reduce((acc, num) => acc + num, 0);
               return sum / numbers.length;
               }
      
      /*スコア算出------------------------------------------------------------------------------------------------------------*/
      var evaluations = [];
	  var text1;
	  var text2;
	  var text3;
	  var text4;
	  //②大きい首振り
	  var bigSwingScore;
	  var star2;
	  if(bigSwing <= 7){
	     bigSwingScore = "C";
	     text1 = "左右確認の回数が少ないようです。遠いところまでしっかり確認してから横断しましょう。";
	  }else if(bigSwing > 7 && bigSwing <= 12 ){
	     bigSwingScore = "B";
	     text1 = "少し左右確認の回数が少ないようです。右・左としっかり確認を行いましょう。";
	  }else if(bigSwing > 12){
	     bigSwingScore = "A";
	     text1 = "充分に左右確認ができています。";
	  }else{bigSwingScore = "C";
	        text1 = "左右確認の回数が少ないです。遠いところまでしっかり確認してから横断しましょう。";}
	  evaluations.push(bigSwingScore);
	  if(bigSwing > 19.5){star2 = 1;
	  }else if(bigSwing < 4.5){
	  star2 = 0;
	  }else{
	  star2 = (bigSwing - 4.5)/ 15;}
	  
	  
	  var text2_1;
	  var checkTime = 0;
	  //③確認時間（右）
	  var swingRightTimeScore;
	  var star3;
	  if(swingRightTime >= 14.375 && swingRightTime <= 19.875 ){
	     swingRightTimeScore= "A";
	  }else if(swingRightTime >= 12 && swingRightTime < 14.375){
	     swingRightTimeScore= "B";
	     checkTime = -1;
	  }else if(swingRightTime > 19.875  && swingRightTime <= 23){
	     swingRightTimeScore= "B";
	     checkTime = 1;
	  }else{
	     swingRightTimeScore= "C";
	  }
	  evaluations.push(swingRightTimeScore);
	  if(swingRightTime > 26.125){star3 = 1;
	  }else if(swingRightTime < 8.875){
	  star3 = 0;
	  }else{
	  star3 = (swingRightTime - 8.875)/ 17.25;}
	  
	  //④確認時間（左）
	  var swingLeftTimeScore;
	  var star4;
	  if(swingLeftTime >= 12.75 && swingLeftTime <= 16.5 ){
	     swingLeftTimeScore= "A";
	  }else if(swingLeftTime >= 11 && swingLeftTime < 12.75){
	     swingLeftTimeScore= "B";
	     checkTime = -1;
	  }else if(swingLeftTime > 16.5  && swingLeftTime <= 18.5){
	     swingLeftTimeScore= "B";
	     checkTime = 1;
	  }else{
	     swingLeftTimeScore= "C";
	  }
	  evaluations.push(swingLeftTimeScore);
	  if(swingLeftTime > 20.5){star4 = 1;
	  }else if(swingLeftTime < 9){
	  star4 = 0;
	  }else{
	  star4 = (swingLeftTime - 9)/ 11.5;}
	  
	  if(checkTime = -1){
	     text2_1 = "確認時間が短いようです。横断前に安全をしっかりと確認してから渡りましょう。";
	  }else if(checkTime = 1){
	     text2_1 = "確認時間が長すぎるようです。安全に横断できるタイミングを見逃さないようにしましょう。";
	  }else{
	     text2_1 = "十分に確認できています。";
	  }
	  
	  var text2_2 = "テスト";
	  var checkRatio;
	  //⑤左右確認比率
	  var LRCheckRatio = swingLeftTime/swingRightTime;
	  var LRCheckRatioScore;
	  var star5;
	  if(LRCheckRatio >= 0.7358818 && LRCheckRatio <= 1.059857 ){
	     LRCheckRatioScore= "A";
	     text2_2 = "左右をバランスよく確認できています。";
	  }else if(LRCheckRatio >= 0.628836 && LRCheckRatio < 0.7358818){
	     checkRatio = -1;
	     LRCheckRatioScore= "B";
	  }else if(LRCheckRatio > 1.059857  && LRCheckRatio <= 1.276786){
	     checkRatio = 1;
	     LRCheckRatioScore= "B";
	     
	  }else if(LRCheckRatio < 0.628836){
	     checkRatio = -1;
	     LRCheckRatioScore= "C";
	  }else{
	     checkRatio = 1;
	     LRCheckRatioScore= "C";
	  }
	  evaluations.push(LRCheckRatioScore);
	  if(LRCheckRatio > 1.49){star5 = 1;
	  }else if(LRCheckRatio < 0.412){
	  star5 = 0;
	  }else{
	  star5 = (LRCheckRatio - 0.411907) / 1.08;}

      if(checkRatio = -1){
	     text2_2 = "右側の確認時間が左側に対して長いようです。左側からの車にも注意しましょう。";
	  }else if(checkRatio = 1){
	     text2_2 = "左側の確認時間が右側に対して長いようです。右側からの車にも注意しましょう。";
	  }
	  text2 = text2_1 + "\n" + "\n" + text2_2;
	  
	  //⑥横断速度
	  var walkSpeedScore;
	  var star6;
	  if(walkSpeed <= 0.4644541){
	     walkSpeedScore = "C";
	     text3 = "横断速度が遅いようです。急ぎ足で横断しましょう。";
	  }else if(walkSpeed > 0.4644541 && walkSpeed <= 0.9495847 ){
	     walkSpeedScore = "B";
	     text3 = "横断速度が少し遅いようです。もう少しだけ急ぎ足で横断しましょう。";
	  }else{
	     walkSpeedScore = "A";
	     text3 = "良い速度で横断できています。";
	  }
	  evaluations.push(walkSpeedScore);
	  if(walkSpeed < 0.2219){star6 = 0;
	  }else{
	  star6 = (walkSpeed - 0.2426)/ 1.4554;}
	  
	  //⑦横断時の右側車両との距離
	  var rightCloseCarScore;
	  var star7;
	  if(rightCloseCar <= 66.525 ){
	     rightCloseCarScore = "C";
	  }else if(rightCloseCar > 66.525 && rightCloseCar <= 90.85 ){
	     rightCloseCarScore = "B";
	  }else{
	     rightCloseCarScore = "A";
	  }
	  evaluations.push(rightCloseCarScore);
	  if(rightCloseCar < 54.3625){star7 = 0;
	  }else{
	  star7 = (rightCloseCar - 54.3625) / 72.96;}
	  //⑧横断時の右側車両との距離
	  var leftCloseCarScore;
	  var star8;
	  if(leftCloseCar <= 51.275){
	     leftCloseCarScore = "C";
	  }else if(leftCloseCar > 51.275 && leftCloseCar <= 93.8 ){
	     leftCloseCarScore = "B";
	  }else{
	     leftCloseCarScore = "A";
	  }
	  evaluations.push(leftCloseCarScore);
	  if(leftCloseCar < 30.0125){star8 = 0;
	  }else{
	  star8 = (leftCloseCar - 30.0125)/ 127.575;}
	  
	  //評価に対するコメントを設定するため、スコアを簡単な名前の変数に格納
	  var R = rightCloseCarScore;
	  var L = leftCloseCarScore;
	  if(R === "A"){
	     if(L === "A"){
	        //両方Aの時
	        text4 = "右・左どちらの車両とも距離を取って横断できていますね。安全なタイミングで横断が出来ています。";
	        }
	     else{
	        //右がA、左がB or Cの時
	        text4 = "左側の車両との距離が短いようです。右側の車両だけに気を取られないように注意しましょう。";
	     }
	  }
	  else if(R === "B"){
	     if(L === "A"){
	        //右がB・左がAの時
	        text4 = "右側の車両との距離が短いようです。左側の車両だけに気を取られないように注意しましょう。";
	     }
	     else{
	        //両方B、または右がB・左がCの時
	        text4 = "車両との距離が少し短いようです。十分に距離があることを確認してから横断を開始しましょう。";
	     }
	  }
	  else{
	     if(L === "A"){
	        //右がC・左がA
	        text4 = "右側の車両との距離が短いようです。左側の車両だけに気を取られないように注意しましょう。";
	     }
	     else if(L === "B"){
	        //右がC・左がB
	        text4 = "車両との距離が少し短いようです。十分に距離があることを確認してから横断を開始しましょう。";
	     }
	     else{
	       //両方Cの時
	        text4 = "車両との距離が短いようです。十分に距離があることを確認してから横断を開始しましょう。";
	     }
	  }
	  
	  
	  /*総合評価の算出 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
	  // 各横断挙動に対する重
	  //evaluations = ["A", "A", "A", "A", "A", "A", "A"];
	  const weights = [ 0.3, 0.1, 0.1, 0.1, 0.5, 0.2, 0.2];
	  
	  // 各横断挙動を重みで加重平均
	  const weightedEvaluations = evaluations.map((evaluation, index) => {
	  // マッチング関数を使用して横断挙動に対応する重みを取得
	  const weight = weights[index % weights.length];
	  // 評価を数値に変換して重みで掛ける
	  return( evaluation === "A" ? 2  * weight : (evaluation === "B" ? 1 : 0) * weight );
	  });
	  
	  const finalEvaluation = weightedEvaluations.reduce((sum, value) => sum + value, 0);
	  console.log(finalEvaluation);
	  var finalScore;
	  if(finalEvaluation >= 2.25){
	      finalScore = "A";
	  }else if(finalEvaluation >= 0.75){
	      finalScore = "B";
	  }else{
	      finalScore = "C";
	  }
	  /*スコアバー上のマーカーを作成------------------------------------------------------------------------------------------*/
   // JavaScriptでstar-markerを作成
    function createStarMarker(parent, markerPosition) { 
       const starMarker = document.createElement('div');
       starMarker.classList.add('star-marker');
       starMarker.innerHTML = '&#9733;'; // 星マーク
       
       // star-markerを親要素に追加
       parent.appendChild(starMarker);
       // star-markerの位置を設定
       const barWidth = parent.clientWidth;
       const markerLeft = barWidth * markerPosition;
       
       // star-markerの位置を動的に指定
       starMarker.style.left = `${markerLeft}px`;
       starMarker.style.top = '50%'; // バーの上の中央に配置
       starMarker.style.transform = 'translate(-50%, -50%)';
       }
    
    // 複数のスターマーカーを作成
const colorBar2 = document.getElementById('myColorBar2');
/*colorBar2.style.background = `linear-gradient(to right, #f6e85e 0px, #f6e85e 94px, #ffa726 94px, #ffa726 156px, 
                                           #00cc00 156px, #00cc00 312px, #ffa726 312px, #ffa726 406px, 
                                           #f6e85e 406px, #f6e85e 500px)`;*/

const colorBar3 = document.getElementById('myColorBar3');
colorBar3.style.background = `linear-gradient(to right, #ff0000 0px, #ff0000 91px, #ffd700 91px, #ffd700 159px, 
                                           #00cc00 159px, #00cc00 319px, #ffd700 319px, #ffd700 409px, 
                                           #ff0000 409px, #ff0000 500px)`;

const colorBar4 = document.getElementById('myColorBar4');
colorBar4.style.background = `linear-gradient(to right, #ff0000 0px, #ff0000 87px, #ffd700 87px, #ffd700 163px, 
                                           #00cc00 163px, #00cc00 326px, #ffd700 326px, #ffd700 413px, 
                                           #ff0000 413px, #ff0000 500px)`;

const colorBar5 = document.getElementById('myColorBar5');
colorBar5.style.background = `linear-gradient(to right, #ff0000 0px, #ff0000 100px, #ffd700 100px, #ffd700 150px, 
                                           #00cc00 150px, #00cc00 300px, #ffd700 300px, #ffd700 400px, 
                                           #ff0000 400px, #ff0000 500px)`;

/*黄・橙・赤のカラーコード
colorBar3.style.background = `linear-gradient(to right, #f6e85e 0px, #f6e85e 91px, #ffa726 91px, #ffa726 159px, 
                                           #00cc00 159px, #00cc00 319px, #ffa726 319px, #ffa726 409px, 
                                           #f6e85e 409px, #f6e85e 500px)`;

const colorBar4 = document.getElementById('myColorBar4');
colorBar4.style.background = `linear-gradient(to right, #f6e85e 0px, #f6e85e 87px, #ffa726 87px, #ffa726 163px, 
                                           #00cc00 163px, #00cc00 326px, #ffa726 326px, #ffa726 413px, 
                                           #f6e85e 413px, #f6e85e 500px)`;

const colorBar5 = document.getElementById('myColorBar5');
colorBar5.style.background = `linear-gradient(to right, #f6e85e 0px, #f6e85e 100px, #ffa726 100px, #ffa726 150px, 
                                           #00cc00 150px, #00cc00 300px, #ffa726 300px, #ffa726 400px, 
                                           #f6e85e 400px, #f6e85e 500px)`;
*/


const colorBar6 = document.getElementById('myColorBar6');
const colorBar7 = document.getElementById('myColorBar7');
const colorBar8 = document.getElementById('myColorBar8');
createStarMarker(colorBar2, star2);
createStarMarker(colorBar3, star3);
createStarMarker(colorBar4, star4);
createStarMarker(colorBar5, star5);
createStarMarker(colorBar6, star6);
createStarMarker(colorBar7, star7);
createStarMarker(colorBar8, star8);
	  /*----------------------------------------------------------------------------------------------------------------------*/
	  
      for (var carID = 0; carID <= carNum - 1; carID++) {
		       createCar(carID);
		       carData.posX[carID][`posX_${carID}`] = Mean(Mean(carData.posX[carID][`posX_${carID}`]));
		 }
	    posx = Mean(Mean(posx));
	    posz = Mean(Mean(posz));
	    rotx = Mean(Mean(rotx));
	    roty = Mean(Mean(roty));
	    rotz = Mean(Mean(rotz));
	    
	    time = duplicate(duplicate(time));
	    window.max = time.length-1;
        
        // プログレスバーを更新する関数
        function updateProgressBar() {
            var progressRatio = (i / max) * 100;
            progressBar.style.width = progressRatio + "%";
            progressHandle.style.left = progressRatio + "%";
            }

            
        // プログレスバーをつかんだときの処理
        progressHandle.addEventListener("mousedown", function (event) {
            isDragging = true;
            updateProgress(event);
        });

        // ドラッグ中の処理
        document.addEventListener("mousemove", function (event) {
            if (isDragging) {
                updateProgress(event);
            }
        });

        // ドラッグが終了したときの処理
        document.addEventListener("mouseup", function () {
            isDragging = false;
        });

        // 進捗をマウスの位置に基づいて更新する関数
        function updateProgress(event) {
            var containerRect = progressBarContainer.getBoundingClientRect();
            var mouseX = event.clientX - containerRect.left;
            var progressRatio = Math.min(1, Math.max(0, mouseX / containerRect.width));

            i = Math.round(progressRatio * max);
            updateProgressBar();
        }

	man.scale.set( 2, manScale/157.2 * 2,  2 );
    man.position.y = manScale/2;
	head.position.y = manScale/2 + manScale/5.5;
  	function draw() {
    //レンダリングループ
    	requestAnimationFrame( draw );
    	if(!isDragging && t_count == 1){
    		i += t_step;
    		updateProgressBar();
    		}
    	if(Math.floor(i) <= max-1){
    		man.material.color.set(manMaterial);
    		var situationTextColor = "black";
      		man.position.x = posx[Math.floor(i)]*100;
      		man.position.z = posz[Math.floor(i)]*100;


      if(Math.floor(i) === 0 || Math.floor(i)%4 === 0){
      //軌跡の描画
      var material_tra = new THREE.MeshBasicMaterial( { color: 0xff0011 } );
	  var geometry_tra = new THREE.CircleGeometry( 12, 500 );
	  var tra = new THREE.Mesh( geometry_tra, material_tra );
	  box.add( tra );
	  tra.rotation.x = -Math.PI / 2;
	  tra.position.x = posx[Math.floor(i)]*100;
	  tra.position.y = 5;
      tra.position.z = posz[Math.floor(i)]*100;
      }

      		// 直線の座標を更新
      		line.geometry.setFromPoints([manPosition, 
      		                             new THREE.Vector3(rotx[Math.floor(i)] * 600, roty[Math.floor(i)] * 600, 
      												       rotz[Math.floor(i)] * 600)]);

      		
      		for (var j = 0; j <= carNum - 1; j++) {
      		var firstTime = carData.firstTime[j][`firstTime_${j}`];
      		       if (cars[`car_${j}`]) { // `car_${j}` の値が存在するかチェック
      		           cars[`car_${j}`].position.x = carData.posX[j][`posX_${j}`][Math.floor(i)] * 100;
      		       }
      		    }
      		    }
      		    
      		    if(posz[Math.floor(i)] - posz[0]>0.2){
      		            situationText = "横断開始";
      		            situationNum = 1;
      		            }
      		            
      		    else{   situationText = "確認中…";
      		            situationNum = 0;
      		            }
      		         
      		    if(Math.floor(i) == max){
      		        situationNum = 2;
      		  		if(hit_object == 1){
      		  		    //man.material.color.set(0x0000ff); // 横断成功→人のカラーを青色に変更
      		  		    situationText = "横断成功！";
      		  		    situationTextColor = "blue";
      		  		    }
      		  		else if(hit_object == 0){
      		  		    //man.material.color.set('yellow'); // 時間切れ→人のカラーを黄色に変更
      		  		    situationText = "時間切れ！";
      		  		    situationTextColor = "orange";
      		  		}else{
      		  	        //man.material.color.set(0xff0000); // 横断失敗→人のカラーを赤色に変更
      		  	        situationText = "車と接触！";
      		  	        situationTextColor = "red";
      		  	        }
      		         t_count = -1;
      		         
      		  }
    	if(currentNum != situationNum){
    	   startBlinking();
    	   setTimeout(stopBlinking, 2500);
    	   currentNum = situationNum;
    	   }
      	document.getElementById("elapsed-time").innerText = "経過時間 / " + time[Math.floor(i)];
      	var situationElement = document.getElementById("situation");
      	situationElement.innerText = situationText;
      	situationElement.style.color = situationTextColor;
      	situationElement.style.fontSize = "20px"; // 文字サイズ
      	situationElement.style.fontWeight = "bold"; // 太さ      	
      	/*横断挙動の点数を表示--------------------------------------------------------------------------------------------------*/
      	document.getElementById("score2").innerText = "30°以上の首振り確認回数 " + bigSwing + "回："+ bigSwingScore;
      	document.getElementById("score3").innerText = "確認時間（右） " + Math.round(swingRightTime * 10) / 10 + "秒：" + swingRightTimeScore;
      	document.getElementById("score4").innerText = "確認時間（左） " + Math.round(swingLeftTime * 10) / 10 + "秒：" + swingLeftTimeScore;
      	document.getElementById("score5").innerText = "左右確認比率 " + Math.round(LRCheckRatio * 10 )/ 10 + "：" + LRCheckRatioScore;
      	document.getElementById("score6").innerText = "横断速度 " + walkSpeed + "m/s：" + walkSpeedScore;
      	document.getElementById("score7").innerText = "右側車両との距離 " + Math.round(rightCloseCar * 10) / 10  + "m：" + rightCloseCarScore;
      	document.getElementById("score8").innerText = "左側車両との距離 " + Math.round(leftCloseCar * 10) / 10  + "m：" + leftCloseCarScore;
      	document.getElementById("scoreAll").innerText = "総合評価：" + finalScore;
      	
      	document.getElementById("text1").innerText = text1;
		document.getElementById("text2").innerText = text2;
		document.getElementById("text3").innerText = text3;
		document.getElementById("text4").innerText = text4;
      /*
      camera.position.set(man.position.x, manScale+150, man.position.z)
      camera.lookAt(rotx[Math.floor(i)] * 600, manScale+150, rotz[Math.floor(i)] * 600);
      */
      	camera.position.y = cam_y;
      	camera.position.z = cam_z;
      	camera.lookAt(0, 0, 0);
    	renderer.render( scene, camera );
  		};
		draw();
  		}
    startAnimation();

		document.getElementById("age-sex").innerText ="20歳 男性";
		document.getElementById("hit-object").innerText = "接触：普通車 40km/h";
		document.getElementById("license").innerText = "免許:所持";
		document.getElementById("carNum").innerText = "出現する車の台数："+ 5 + "台";
		

		
	</script>
    <div class="split left-box">
             <canvas id="myCanvas"></canvas>
             <a href="#" class="circle" name="b_s" onClick="b_s()">▶ll</a>
             <div id="progress-bar-container">
             <div id="progress-bar"></div>
             <div id="progress-handle"></div><br><br>
             
        <big><b><p id="scoreAll" style="background: #fff4db; padding: 5px; "></p></b></big>
        <p id="score2"></p>
        <div class="color-bar2"  id="myColorBar2">
           <div id="text1" class="text-label"></div>
         </div>
        <br><br><hr>
        <p id="score3"></p>
        <div class="color-bar"  id="myColorBar3">
           <div id="text2" class="text-label"></div>
         </div>
        <p id="score4"></p>
        <div class="color-bar"  id="myColorBar4"></div>
        <p id="score5"></p>
        <div class="color-bar"  id="myColorBar5"></div>
        <br><hr>
        <p id="score6"></p>
        <div class="color-bar2"  id="myColorBar6">
           <div id="text3" class="text-label"></div>
        </div>
        
        <br><br><hr>
        <p id="score7"></p>
        <div class="color-bar2"  id="myColorBar7">
           <div id="text4" class="text-label"></div>
         </div>
        <p id="score8"></p>
        <div class="color-bar2"  id="myColorBar8"></div>
        <br>
        </div>
        
    <div class="split right-box" style="position:absolute; top:0px; left:1210px;">
        <!-- クレジット -->
        <div style="position: absolute; top: 0; left: 0; font-size: 8px; opacity: 1">
            <span>作成：滋賀大学 データサイエンス学部 川井ゼミ 内田実結</span>
        </div>
        <img src="./carSpeed_color.png" alt="Your Image" width="200" height="190" style = "position:relative; top: 10px;"><br>
        <p id="elapsed-time"></p>
        <p class="blinking-text" id="situation"></p>
        <p id="age-sex"></p>
        <p id="hit-object"></p>
        <p id="license"></p>
        <p id="carNum"></p>
        <a href="./index_dataUp_carData.html" class="btn btn--orange btn--radius">データを手入力</a>
        <hr>

        <div>
                <b><font size="4"><nobr>再生速度　　</nobr></font></b>
                <input type="button" value="×1" name="b_x1" onClick="b_x1()" class="button_b">
                <input type="button" value="×2" name="b_x2" onClick="b_x2()" class="button_b">
        </div>
        <div>
                <hr>
                <b><font size="4"><nobr>カメラ操作　</nobr></font></b>
                <input type="button" value="＋" name="camP" onClick="camP()" class="button_o">
                <input type="button" value="―" name="camM" onClick="camM()" class="button_o">
        </div>

    </div>
</body>
</html>