JS/canvas.js

   1 window.addEventListener("load", eventWindowLoaded, false);
   2
   3 var cancasmode = 0;
   4
   5 function tabcheck() {
   6     var introduce = document.getElementById('introduce');
   7     var ineh = document.getElementById('eucentricheightcontents');
   8     var inform = document.getElementById('form');
   9     var insingle = document.getElementById('singleparticlecontents');
  10     var intomo = document.getElementById('tomography');
  11     var inmds = document.getElementById('mds');
  12
  13     if (insingle.style.display == "") {
  14         canvasmode = 1;
  15         canvasApp();
  16         console.log("canvasmode=" + canvasmode);
  17     }else if(intomo.style.display ==""){
  18         canvasmode = 2;
  19         canvastomo();
  20         console.log("canvasmode=" + canvasmode);
  21     }else  if(inmds.style.display ==""){
  22         canvasmode =3;
  23         canvasmds();
  24         console.log("canvasmode=" + canvasmode);
  25     }else{
  26         canvasmode = 0;
  27         console.log("canvasmode=" + canvasmode);
  28     }
  29 }
  30
  31 function eventWindowLoaded() {
  32     //画面がロードされたら、canvasAppを呼び出す
  33   /*  if (canvasmode == 1) {
  34         canvasApp();
  35     } else if (canvasmode == 2) {
  36         canvastomo();
  37     }
  38     */
  39    //canvasmds();
  40     //モード切り替えの初期formの色の設定
  41     document.getElementById("formmode").style.backgroundColor = '#e0ffff';
  42     document.getElementById("formmode2").style.backgroundColor = '#e0ffff';
  43     document.getElementById("formmode3").style.backgroundColor = '#e0ffff';
  44 }
  45 /*
  46  function canvasSupport(){
  47  return Modernizer.canvas;
  48  }
  49  */
  50 //var movex = document.forms.movestage.movex.value;
  51 //var movey = document.forms.movestage.movey.value;
  52 /*
  53  function putTxt(){
  54  document.onkeydown = funcKey;
  55  }
  56  */
  57
  58 //キャンバスの初期値の設定
  59 var movex = 1;
  60 var movey = 1;
  61 var movez = 0;
  62 var movea = 0;
  63 var mode = 0;
  64 var moveformx=0;
  65 var moveformy=0;
  66 var moveformz=0;
  67 var moveformas=0;
  68 var moveformat=0;
  69
  70 var tiltmode = 1;
  71
  72
  73 function switchkey(onoff) {
  74     mode = onoff;
  75     console.log(onoff);
  76
  77 }
  78
  79 console.log("mode=" + mode);
  80
  81
  82 document.onkeydown = function(e) {
  83     // UP
  84     if (mode == 1) {
  85         if (e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 72) {
  86             movey = parseInt(movey) + parseInt(1);
  87             stagecontrol('stage',movex,movey,movez,movea);
  88             emcondition('request');
  89             if (canvasmode == 1) {
  90                 canvasApp();
  91             }else if(canvasmode ==2){
  92                 canvastomo();
  93             }else if(canvasmode ==3 ){
  94                 canvasmds();
  95             }
  96         }
  97         // DOWN
  98         if (e.keyCode == 40 || e.keyCode == 83 || e.keyCode == 74) {
  99             movey = parseInt(movey) - parseInt(1);
 100             stagecontrol('stage',movex,movey,movez,movea);
 101             emcondition('request');
 102             if (canvasmode == 1) {
 103                 canvasApp();
 104             }else if(canvasmode ==2){
 105                 canvastomo();
 106             }else if(canvasmode ==3 ){
 107                 canvasmds();
 108             }
 109         }
 110         // LEFT
 111         if (e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 75) {
 112             movex = parseInt(movex) - parseInt(1);
 113             stagecontrol('stage',movex,movey,movez,movea);
 114             emcondition('request');
 115             if (canvasmode == 1) {
 116                 canvasApp();
 117             }else if(canvasmode ==2){
 118                 canvastomo();
 119             }else if(canvasmode ==3 ){
 120                 canvasmds();
 121             }
 122         }
 123         // RIGHT
 124         if (e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 76) {
 125             movex = parseInt(movex) + parseInt(1);
 126             stagecontrol('stage',movex,movey,movez,movea);
 127             emcondition('request');
 128             if (canvasmode == 1) {
 129                 canvasApp();
 130             }else if(canvasmode ==2){
 131                 canvastomo();
 132             }else if(canvasmode ==3 ){
 133                 canvasmds();
 134             }
 135         }
 136     }
 137 };
 138
 139 function gamepad() {
 140     if (navigator.getGamepads) {
 141         // ゲームパッドリストを取得する
 142         var gamepad_list = navigator.getGamepads();
 143         // 出力テスト
 144         console.log(gamepad_list);
 145     }
 146     console.log("function gamepad");
 147     window.addEventListener("gamepadconnected", function(e) {
 148         console.log("gamepad connected!");
 149     });
 150
 151     if (window.GamepadEvent) {
 152
 153         // ------------------------------------------------------------
 154         // ゲームパッドを接続すると実行されるイベント
 155         // ------------------------------------------------------------
 156         window.addEventListener("gamepadconnected", function(e) {
 157             console.log("ゲームパッドが接続された");
 158             console.log(e.gamepad);
 159         });
 160
 161         // ------------------------------------------------------------
 162         // ゲームパッドの接続を解除すると実行されるイベント
 163         // ------------------------------------------------------------
 164         window.addEventListener("gamepaddisconnected", function(e) {
 165             console.log("ゲームパッドの接続が解除された");
 166             console.log(e.gamepad);
 167         });
 168
 169     }
 170     /*
 171      setInterval(function(e){
 172      var gamepad = e.gamepad;
 173      if (gamepad.axes[0] < -0.5) {
 174      movex = parseInt(movex) + parseInt(10);
 175      console.log("left!");
 176      canvasApp();
 177      }
 178      if (gamepad.axes[0] > 0.5) {
 179      movex = parseInt(movex) - parseInt(10);
 180      canvasApp();
 181      }
 182      if (gamepad.axes[1] < -0.5) {
 183      movey = parseInt(movey) - parseInt(10);
 184      canvasApp();
 185      }
 186      if (gamepad.axes[1] > 0.5) {
 187      movey = parseInt(movey) + parseInt(10);
 188      canvasApp();
 189
 190      }
 191      },1000/60);
 192      */
 193
 194     setInterval(function() {
 195         var str = "";
 196         // ゲームパッドリストを取得する
 197         var gamepad_list = navigator.getGamepads();
 198         // ゲームパッドリスト内のアイテム総数を取得する
 199         var num = gamepad_list.length;
 200         var i;
 201         for (i = 0; i < num; i++) {
 202             // Gamepad オブジェクトを取得
 203             var gamepad = gamepad_list[i];
 204             if (!gamepad)
 205                 continue;
 206             // ゲームパッドのインデックス値
 207             str += "index: " + gamepad.index + "\n";
 208             // タイムスタンプ情報
 209             str += "timestamp: " + gamepad.timestamp + "\n";
 210             // ゲームパッドの識別名
 211             str += "id: \"" + gamepad.id + "\"\n";
 212             // ゲームパッドの物理的な接続状態
 213             str += "connected: " + gamepad.connected + "\n";
 214             // マッピングタイプ情報
 215             str += "mapping: \"" + gamepad.mapping + "\"\n";
 216
 217             // ボタンリスト
 218             // ------------------------------------------------------------
 219             var buttons = gamepad.buttons;
 220             str += "buttons: {\n";
 221             var j;
 222             var n = buttons.length;
 223             for (j = 0; j < n; j++) {
 224                 // GamepadButton オブジェクトを取得
 225                 var button = buttons[j];
 226                 str += "  \"" + j + "\": { ";
 227                 // ボタン押下状態
 228                 str += "pressed:" + button.pressed + " , ";
 229                 // ボタン入力強度
 230                 str += "value:" + button.value + " }\n";
 231             }
 232             str += "}\n";
 233             // 軸リスト
 234             // ------------------------------------------------------------
 235             if (mode == 2) {
 236                 var axes = gamepad.axes;
 237                 str += "axes: {\n";
 238                 var j;
 239                 var n = axes.length;
 240                 for (j = 0; j < n; j++) {
 241                     if (j == 0) {
 242                         if (axes[j] < -0.5) {
 243                             movex = parseInt(movex) - parseInt(1);
 244                             console.log(movex);
 245                             console.log(axes[j]);
 246                             stagecontrol('stage',movex,movey,movez,movea);
 247                             emcondition('request');
 248                             if (canvasmode == 1) {
 249                                 canvasApp();
 250                             } else if (canvasmode == 2) {
 251                                 canvastomo();
 252                             } else if (canvasmode == 3) {
 253                                 canvasmds();
 254                             }
 255                         }
 256                         if (axes[j] > 0.5) {
 257                             movex = parseInt(movex) + parseInt(1);
 258                             stagecontrol('stage',movex,movey,movez,movea);
 259                             emcondition('request');
 260                             if (canvasmode == 1) {
 261                                 canvasApp();
 262                             } else if (canvasmode == 2) {
 263                                 canvastomo();
 264                             } else if (canvasmode == 3){
 265                                 canvasmds();
 266                             }
 267                         }
 268                     } else if (j == 1) {
 269                         if (axes[j] < -0.5) {
 270                             movey = parseInt(movey) + parseInt(1);
 271                             stagecontrol('stage',movex,movey,movez,movea);
 272                             emcondition('request');
 273                             if (canvasmode == 1) {
 274                                 canvasApp();
 275                             } else if (canvasmode == 2) {
 276                                 canvastomo();
 277                             } else if (canvasmode ==3 ) {
 278                                 canvasmds();
 279                             }
 280                         }
 281                         if (axes[j] > 0.5) {
 282                             movey = parseInt(movey) - parseInt(1);
 283                             stagecontrol('stage',movex,movey,movez,movea);
 284                             emcondition('request');
 285                             if (canvasmode == 1) {
 286                                 canvasApp();
 287                             } else if (canvasmode == 2) {
 288                                 canvastomo();
 289                             } else if (canvasmode == 3){
 290                                 canvasmds();
 291                             }
 292                         }
 293                     }
 294                 }
 295             }
 296         }
 297     }, 1000 / 60);
 298
 299
 300     window.addEventListener("gamepaddisconnected", function(e) {
 301             console.log("gamepad disconnected");
 302         });
 303     window.addEventListener("gamepadconnected", function(e) {
 304         console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
 305                 e.gamepad.index, e.gamepad.id,
 306                 e.gamepad.buttons.length, e.gamepad.axes.length);
 307     });
 308
 309 };
 310
 311
 312 function canvasApp() {
 313     var theCanvas = document.getElementById("canvasOne");
 314     //canvasとして利用するhtmlのタグの場所を指定
 315     var context = theCanvas.getContext("2d");
 316     //2Dcontextの取得
 317
 318     function drawScreen() {
 319         //実際に画面の描写を行っている部分
 320         context.fillStyle = "fffffaa";
 321         //描画画面の塗りつぶし、今回は黒
 322         context.fillRect(0, 0, 540, 605);
 323         //画面上に形を作る
 324         if (mode == 0) {
 325             //if(document.forms.movestage.movex.value!=moveformx){
 326             moveformx = document.forms.movestage.movex.value;
 327             movex=parseInt(moveformx);
 328             //}
 329             //if(document.forms.movestage.movey.value!=moveformy){
 330             moveformy = document.forms.movestage.movey.value;
 331             movey=parseInt(moveformy);
 332
 333             moveformz = document.forms.moveza.movez.value;
 334             movez=parseInt(moveformz);
 335
 336
 337             stagecontrol('stage',movex,movey,movez,movea);
 338             emcondition('request');
 339             //}
 340                //画面上に入力した数値から位置を取得
 341         }
 342         /*
 343         var movez = document.forms.s2.movez.value;
 344
 345         if (movez == 0) {
 346             movez = 1;
 347         }
 348         */
 349         var img = new Image();
 350
 351         img.onload = function() {
 352             //イメージがロードするのを待つ必要があるのでonload
 353             //context.scale(movez*0.1,movez*0.1);
 354             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 355             //context.translate(540/2,605/2);
 356             context.drawImage(img, movex, movey);
 357             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 358             document.getElementById("currentx").innerHTML = movex;
 359             document.getElementById("currenty").innerHTML = movey;
 360             console.log("x=" + movex);
 361             console.log("y=" + movey);
 362         }
 363
 364         //見る画像
 365         img.src = "./CC124crudeダイニン.jpg";
 366
 367         //--ふちの設定--現在見えてない
 368         context.strokeStyle = "#000000";
 369         //線の色
 370         context.strokeRect(5, 5, 505, 610);
 371         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 372     }
 373     drawScreen();
 374 }
 375
 376 function canvastomo() {
 377     var theCanvas = document.getElementById("canvastomo");
 378     //canvasとして利用するhtmlのタグの場所を指定
 379     var context = theCanvas.getContext("2d");
 380     //2Dcontextの取得
 381
 382     function drawScreen() {
 383         //実際に画面の描写を行っている部分
 384         context.fillStyle = "fffffaa";
 385         //描画画面の塗りつぶし、今回は黒
 386         context.fillRect(0, 0, 540, 605);
 387         //画面上に形を作る
 388         if (mode == 0) {
 389             //if(document.forms.movestage.movex.value!=moveformx){
 390             moveformx = document.forms.movestagetomo.movex.value;
 391             movex=parseInt(moveformx);
 392             //}
 393             //if(document.forms.movestage.movey.value!=moveformy){
 394             moveformy = document.forms.movestagetomo.movey.value;
 395             movey=parseInt(moveformy);
 396
 397             moveformz = document.forms.moveztomo.movez.value;
 398             movez=parseInt(moveformz);
 399
 400             if (tiltmode == 1) {
 401                 moveformas = document.forms.setting.standardnum.value;
 402                 movea = parseInt(moveformas);
 403                 stagecontrol('stage', movex, movey, movez, movea);
 404                 emcondition('request');
 405             } else if (tiltmode == 2) {
 406                 moveformat = document.forms.setting.tiltingnum.value;
 407                 movea = parseInt(moveformat);
 408                 stagecontrol('stage', movex, movey, movez, movea*(Math.cos(movea * (Math.PI / 180))));
 409                 emcondition('request');
 410             }
 411             stagecontrol('stage',movex,movey,movez,movea);
 412             emcondition('request');
 413             //}
 414                //画面上に入力した数値から位置を取得
 415         }
 416         /*
 417         var movez = document.forms.s2.movez.value;
 418
 419         if (movez == 0) {
 420             movez = 1;
 421         }
 422         */
 423         var img = new Image();
 424
 425         img.onload = function() {
 426             //イメージがロードするのを待つ必要があるのでonload
 427             //context.scale(movez*0.1,movez*0.1);
 428             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 429             //context.translate(540/2,605/2);
 430             context.drawImage(img, movex, movey);
 431             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 432             document.getElementById("currenttomox").innerHTML = movex;
 433             document.getElementById("currenttomoy").innerHTML = movey;
 434             console.log("x=" + movex);
 435             console.log("y=" + movey);
 436         }
 437
 438         //見る画像
 439         img.src = "./axoF11-2 .jpg";
 440
 441         //--ふちの設定--現在見えてない
 442         context.strokeStyle = "#000000";
 443         //線の色
 444         context.strokeRect(5, 5, 505, 610);
 445         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 446     }
 447     drawScreen();
 448 }
 449
 450 function controlmodeselect(modename){
 451         document.getElementById("key").style.backgroundColor = 'transparent';
 452         document.getElementById("key2").style.backgroundColor = 'transparent';
 453         document.getElementById("key3").style.backgroundColor = 'transparent';
 454         document.getElementById("formmode").style.backgroundColor = 'transparent';
 455         document.getElementById("formmode2").style.backgroundColor = 'transparent';
 456         document.getElementById("formmode3").style.backgroundColor = 'transparent';
 457         document.getElementById("gamepad").style.backgroundColor = 'transparent';
 458         document.getElementById("gamepad2").style.backgroundColor = 'transparent';
 459         document.getElementById("gamepad3").style.backgroundColor = 'transparent';
 460
 461         if(modename){
 462             document.getElementById(modename).style.backgroundColor = '#e0ffff';
 463         }
 464 }
 465
 466
 467 /*
 468  * To change this license header, choose License Headers in Project Properties.
 469  * To change this template file, choose Tools | Templates
 470  * and open the template in the editor.
 471  */
 472
 473 function tilt() {
 474      radio = document.getElementsByName('tilting');
 475      document.getElementById('angurar').innerHTML= document.forms.setting.tiltingnum.value;
 476     if (radio[0].checked) {
 477         tiltmode=1;
 478         document.getElementById('standard').style.display = "";
 479         document.getElementById('saxtorn').style.display = "none";
 480     } else if (radio[1].checked) {
 481         tiltmode=2;
 482         document.getElementById('standard').style.display = "none";
 483         document.getElementById('saxtorn').style.display = "";
 484     }
 485 }
 486
 487 function canvasmds() {
 488     var theCanvas = document.getElementById("canvasmds");
 489     //canvasとして利用するhtmlのタグの場所を指定
 490     var context = theCanvas.getContext("2d");
 491     //2Dcontextの取得
 492     function drawScreen() {
 493         //実際に画面の描写を行っている部分
 494         context.fillStyle = "fffffaa";
 495         //描画画面の塗りつぶし、今回は黒
 496         context.fillRect(0, 0, 540, 605);
 497         //画面上に形を作る
 498         if (mode == 0) {
 499             //if(document.forms.movestage.movex.value!=moveformx){
 500             moveformx = document.forms.movestagemds.movex.value;
 501             movex=parseInt(moveformx);
 502             //}
 503             //if(document.forms.movestage.movey.value!=moveformy){
 504             moveformy = document.forms.movestagemds.movey.value;
 505             movey=parseInt(moveformy);
 506
 507             moveformz = document.forms.movezmds.movez.value;
 508             movez=parseInt(moveformz);
 509
 510
 511             stagecontrol('stage',movex,movey,movez,movea);
 512             emcondition('request');
 513             //}
 514                //画面上に入力した数値から位置を取得
 515         }
 516         /*
 517         var movez = document.forms.s2.movez.value;
 518
 519         if (movez == 0) {
 520             movez = 1;
 521         }
 522         */
 523         var img = new Image();
 524
 525         img.onload = function() {
 526             //イメージがロードするのを待つ必要があるのでonload
 527             //context.scale(movez*0.1,movez*0.1);
 528             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 529             //context.translate(540/2,605/2);
 530             context.drawImage(img, movex, movey);
 531             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 532             document.getElementById("currentmdsx").innerHTML = movex;
 533             document.getElementById("currentmdsy").innerHTML = movey;
 534             console.log("x=" + movex);
 535             console.log("y=" + movey);
 536         }
 537
 538         //見る画像
 539         img.src = "./flower.jpg";
 540
 541         //--ふちの設定--現在見えてない
 542         context.strokeStyle = "#000000";
 543         //線の色
 544         context.strokeRect(5, 5, 505, 610);
 545         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 546     }
 547     drawScreen();
 548 }
 549
 550 function shiftplace() {
 551     mode = 4;
 552     movex = parseInt(movex) + parseInt(10);
 553     stagecontrol('stage', movex, movey, movez, movea);
 554     emcondition('request');
 555     canvasmds();
 556 }
 557
 558 function replace() {
 559     mode = 4;
 560     movex = parseInt(movex) - parseInt(10);
 561     stagecontrol('stage', movex, movey, movez, movea);
 562     emcondition('request');
 563     canvasmds();
 564
 565 }
 566
 567 function canvasroot() {
 568     var theCanvas = document.getElementById("canvasroot");
 569     //canvasとして利用するhtmlのタグの場所を指定
 570     var context = theCanvas.getContext("2d");
 571     //2Dcontextの取得
 572
 573     function drawScreen() {
 574         //実際に画面の描写を行っている部分
 575         context.fillStyle = "fffffaa";
 576         //描画画面の塗りつぶし、今回は黒
 577         context.fillRect(0, 0, 200, 200);
 578         //画面上に形を作る
 579        /* if (mode == 0) {
 580             //if(document.forms.movestage.movex.value!=moveformx){
 581             moveformx = document.forms.movestage.movex.value;
 582             movex=parseInt(moveformx);
 583             //}
 584             //if(document.forms.movestage.movey.value!=moveformy){
 585             moveformy = document.forms.movestage.movey.value;
 586             movey=parseInt(moveformy);
 587
 588             moveformz = document.forms.moveza.movez.value;
 589             movez=parseInt(moveformz);
 590
 591
 592             stagecontrol('stage',movex,movey,movez,movea);
 593             emcondition('request');
 594             //}
 595                //画面上に入力した数値から位置を取得
 596         }*/
 597         /*
 598         var movez = document.forms.s2.movez.value;
 599
 600         if (movez == 0) {
 601             movez = 1;
 602         }
 603         */
 604         var img = new Image();
 605
 606         img.onload = function() {
 607             //イメージがロードするのを待つ必要があるのでonload
 608             //context.scale(movez*0.1,movez*0.1);
 609             //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
 610             //context.translate(540/2,605/2);
 611             context.drawImage(img, movex, movey);
 612             //イメージを描写、引数は画像のオブジェクト,左端のx,y
 613             document.getElementById("currentx").innerHTML = movex;
 614             document.getElementById("currenty").innerHTML = movey;
 615             console.log("x=" + movex);
 616             console.log("y=" + movey);
 617         }
 618
 619         //見る画像
 620         img.src = "./ele.jpg";
 621
 622         //--ふちの設定--現在見えてない
 623         context.strokeStyle = "#000000";
 624         //線の色
 625         context.strokeRect(5, 5, 505, 610);
 626         //わくの輪郭を書く、引数は左端のx,y,幅,高さ
 627     }
 628     drawScreen();
 629 }