<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/common/js/p5.js"></script>
</head>
<body>
<div id="result"></div>
<script>
let angle = 0;
let myCamera;
let TradeWindsFont;

let isPanLeft = false,
    isPanRight = false,
    isTiltUp = false,
    isTiltDown = false,
    isGo = false,
    isBack = false,
    isLeft = false,
    isRight = false,
    isUp = false,
    isDown = false,
    isLookAt = false,
    isSetPosition = false;
let carX = -50;
let tilt_pos = 0;
let pan_pos = 0;

function preload(){
    //TradeWindsFont = loadFont('/common/font/TradeWinds-Regular.ttf');
    TradeWindsFont = loadFont('/common/font/NotoSansJP-Regular.otf');
}

function setup() {
    let canvas = createCanvas(700, 300, WEBGL);
    canvas.parent(result);  //canvasを指定した要素の子要素にする
    angleMode(DEGREES);
    //debugMode();
    noStroke();
    myCamera = createCamera();
    //myCamera.ortho();
    myCamera.setPosition(0, -20, 300 - carX);

    textFont(TradeWindsFont);

    const panLeftButton = setButton('←', {
        x: 110,
        y: 360
    });
    panLeftButton.mousePressed(() => {
        isPanLeft = true;
    });
    panLeftButton.mouseReleased(() => {
        isPanLeft = false;
    });

    const panRightButton = setButton('→', {
        x: 310,
        y: 360
    });
    panRightButton.mousePressed(() => {
        isPanRight = true;
    });
    panRightButton.mouseReleased(() => {
        isPanRight = false;
    });

    const tiltUpButton = setButton('↑', {
        x: 210,
        y: 310
    });
    tiltUpButton.mousePressed(() => {
        isTiltUp = true;
    });
    tiltUpButton.mouseReleased(() => {
        isTiltUp = false;
    });

    const tiltDownButton = setButton('↓', {
        x: 210,
        y: 410
    });
    tiltDownButton.mousePressed(() => {
        isTiltDown = true;
    });
    tiltDownButton.mouseReleased(() => {
        isTiltDown = false;
    });

    const lookAtButton = setButton('Default', {
        x: 210,
        y: 360
    });
    lookAtButton.mousePressed(() => {
        isLookAt = true;
    });
    lookAtButton.mouseReleased(() => {
        isLookAt = false;
    });

    const goButton = setButton('Go', {
        x: 10,
        y: 310
    });
    goButton.mousePressed(() => {
        isGo = true;
    });
    goButton.mouseReleased(() => {
        isGo = false;
    });

    const backButton = setButton('Back', {
        x: 10,
        y: 410
    });
    backButton.mousePressed(() => {
        isBack = true;
    });
    backButton.mouseReleased(() => {
        isBack = false;
    });

    const leftButton = setButton('Left', {
        x: 110,
        y: 510
    });
    leftButton.mousePressed(() => {
        isLeft = true;
    });
    leftButton.mouseReleased(() => {
        isLeft = false;
    });

    const rightButton = setButton('Right', {
        x: 310,
        y: 510
    });
    rightButton.mousePressed(() => {
        isRight = true;
    });
    rightButton.mouseReleased(() => {
        isRight = false;
    });

    const upButton = setButton('Up', {
        x: 210,
        y: 460
    });
    upButton.mousePressed(() => {
        isUp = true;
    });
    upButton.mouseReleased(() => {
        isUp = false;
    });

    const downButton = setButton('Down', {
        x: 210,
        y: 560
    });
    downButton.mousePressed(() => {
        isDown = true;
    });
    downButton.mouseReleased(() => {
        isDown = false;
    });

    const setPositionButton = setButton('Default', {
        x: 210,
        y: 510
    });
    setPositionButton.mousePressed(() => {
        isSetPosition = true;
    });
    setPositionButton.mouseReleased(() => {
        isSetPosition = false;
    });


}

function setButton(label, pos) {
    const button = createButton(label);
    button.size(80, 30);
    button.position(pos.x, pos.y);
    return button;
}

function draw() {
    background(0);
    //normalMaterial();
    orbitControl();

    //環境光 グレー
    ambientLight(60);
    ambientMaterial(60);
    //方向性ライト 白
    const v = createVector(-1, 1, -1);
    directionalLight(255, 255,255, v);
    pointLight(255, 255, 255, 100, -100, 100);
    //shininess(20);
    //specularMaterial(255);
    lightFalloff(0.6, 0.01, 0);
    //lights();

    //myCamera.camera(0, -100, 250, 0, -10, 0, 0, 1, 0);

    //myCamera.pan(1);
    //myCamera.tilt(1);

    // myCamera.lookAt(0,-90,0);
    //myCamera.setPosition(0, -200, 500);
//    myCamera.setPosition(0, -20, 300 - carX);
    // myCamera.lookAt(35, 50, carX);

    //myCamera.move(50,0,0);

    if (mouseIsPressed === false){
        isPanLeft = false;
        isPanRight = false;
        isTiltUp = false;
        isTiltDown = false;
        isGo = false;
        isBack = false;
        isLeft = false;
        isRight = false;
        isUp = false;
        isDown = false;
    }

    if (isPanLeft) {
        pan_pos+=1;
        myCamera.pan(1);
    }
    if (isPanRight) {
        pan_pos-=1;
        myCamera.pan(-1);
    }
    if (isTiltUp) {
        tilt_pos-=1;
        myCamera.tilt(-1);
    }
    if (isTiltDown) {
        tilt_pos+=1;
        myCamera.tilt(1);
    }
    if (isGo) {
        myCamera.move(0,0,-4);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isBack) {
        myCamera.move(0,0,4);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isLeft) {
        myCamera.move(-4,0,0);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isRight) {
        myCamera.move(4,0,0);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isUp) {
        myCamera.move(0,-4,0);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isDown) {
        myCamera.move(0,4,0);
        myCamera.setPosition(myCamera.eyeX, myCamera.eyeY, myCamera.eyeZ);
    }
    if (isLookAt) {
        myCamera.tilt(-tilt_pos);
        tilt_pos = 0;
        myCamera.pan(-pan_pos);
        pan_pos = 0;
    }
    if (isSetPosition) {
        myCamera.setPosition(0, -20, 300 - carX);
    }

    // 平面
    // push();
    // fill('white');
    // rotateX(90);
    // plane(500, 500);
    // pop();

    //球1
    // push();
    // fill(0,0,255);
    // translate(-130,-80,0);
    // rotateX(angle+0.125);
    // rotateY(angle+0.5);
    // box();
    // pop();

    // //球2
    // push();
    // fill(255,0,0);
    // translate(130,-50,100);
    // rotateX(-angle*2);
    // rotateY(-angle*2);
    // box();
    // pop();

    fill(255);
    //text
    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-6000,0, -500);
    //rotateZ(180);
    text("創世記\n" +
    "\n" +
    "はじめに神は天と地を創造された。\n" +
    "地は形なく、むなしく、やみが淵のおもてにあり、\n" +
    "神の霊が水のおもてをおおっていた。\n" +
    "神は「光あれ」と言われた。すると光があった。\n" +
    "神はその光を見て、良しとされた。\n" +
    "神はその光とやみとを分けられた。\n" +
    "神は光を昼と名づけ、やみを夜と名づけられた。\n" +
    "夕となり、また朝となった。第一日である。\n" +
    "\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-5000,0, -500);
    //rotateZ(180);
    text("神はまた言われた、\n" +
    "「水の間におおぞらがあって、水と水とを分けよ」。\n" +
    "そのようになった。神はおおぞらを造って、\n" +
    "おおぞらの下の水とおおぞらの上の水とを分けられた。\n" +
    "神はそのおおぞらを天と名づけられた。\n" +
    "夕となり、また朝となった。第二日である。\n" +
    "\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-4000,0, -500);
    //rotateZ(180);
    text("神はまた言われた、\n" +
    "「天の下の水は一つ所に集まり、かわいた地が現れよ」。\n" +
    "そのようになった。\n" +
    "神はそのかわいた地を陸と名づけ、\n" +
    "水の集まった所を海と名づけられた。\n" +
    "神は見て、良しとされた。\n" +
    "神はまた言われた、「地は青草と、種をもつ草と、種類に」\n" +
    "したがって種のある実を結ぶ果樹とを地の上にはえさせよ」。\n" +
    "そのようになった。\n" +
    "地は青草と、種類にしたがって種をもつ草と、種類にした\n" +
    "がって種のある実を結ぶ木とをはえさせた。\n" +
    "神は見て、良しとされた。\n" +
    "夕となり、また朝となった。第三日である。\n" +
    "\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-3000,0, -500);
    //rotateZ(180);
    text("神はまた言われた、「天のおおぞらに光があって\n" +
    "昼と夜とを分け、しるしのため、季節のため、日のため、\n" +
    "年のためになり、天のおおぞらにあって地を照らす光となれ」。\n" +
    "そのようになった。\n" +
    "神は二つの大きな光を造り、大きい光に昼をつかさどらせ、\n" +
    "小さい光に夜をつかさどらせ、また星を造られた。\n" +
    "神はこれらを天のおおぞらに置いて地を照らさせ、\n" +
    "昼と夜とをつかさどらせ、光とやみとを分けさせられた。\n" +
    "神は見て、良しとされた。\n" +
    "夕となり、また朝となった。第四日である。\n" +
    "\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-2000,0, -500);
    //rotateZ(180);
    text("神はまた言われた。\n" +
    "「水は生き物の群れで満ち、\n" +
    "鳥は地の上、天のおおぞらを飛べ」。\n" +
    "神は海の大いなる獣と、水に群がるすべての動く生き物とを、\n" +
    "種類によって創造し、また翼のあるすべての鳥を\n" +
    "種類にしたがって創造された。\n" +
    "神は見て、良しとされた。\n" +
    "神はこれらを祝福して言われた、「生めよ、ふえよ、\n" +
    "海の水に満ちよ、また鳥は地にふえよ」。\n" +
    "夕となり、また朝となった。第五日である。\n" +
    "\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(-1000,0, -500);
    //rotateZ(180);
    text("神はまた言われた、「地は生き物を種類にしたがっていだせ。\n" +
    "家畜と、這うものと、地の獣とを種類にしたがっていだせ」。\n" +
    "そのようになった。\n" +
    "神は地の獣を種類にしたがい、家畜を種類にしたがい、\n" +
    "また地に這うすべての物を種類にしたがって造られた。\n" +
    "神は見て、良しとされた。\n" +
    "神はまた言われた。「われわれのかたちに、われわれにかたどって」\n" +
    "人を造り、これに海の魚と、空の鳥と、家畜と、地のすべての獣と\n" +
    "地のすべての這うものとを治めさせよう」。\n" +
    "神は自分のかたちに人を創造された。すなわち、神のかたちに創造し、\n" +
    "男と女とに創造された。\n" +
    "神は彼らを祝福して言われた、「生めよ、ふえよ、地に満ちよ、地を従わせよ。\n" +
    "また海の魚と、空の鳥と、地に動くすべての生き物とを治めよ」。\n" +
    "神はまた言われた、「わたしは全地のおもてにある種をもつ\n" +
    "すべての草と、種のある実を結ぶすべての木とをあなたがたに与える。\n" +
    "これはあなたがたの食物となるであろう。\n" +
    "また地のすべての獣、空のすべての鳥、地を這うすべてのもの、\n" +
    "すなわち命あるものには、食物としてすべての青草を与える」。\n" +
    "そのようになった。\n" +
    "神が造ったすべての物をみられたところ、それは、はなはだ良かった。\n" +
    "夕となり、また朝となった。第六日である。\n", 0, -70);
    pop();

    push();
    textSize(20);
    textAlign(CENTER);
    //textLeading(100);
    translate(0,0, -500);
    //rotateZ(180);
    text("こうして天と地と、その万象とが完成した。\n" +
    "神は第七日にその作業を終えられた。\n" +
    "すなわち、そのすべての作業を終って第七日に休まれた。\n" +
    "神はその第七日を祝福して、これを聖別された。\n" +
    "神がこの日に、そのすべての創造のわざを終わって\n" +
    "休まれたからである。\n" +
    "\n", 0, -70);
    pop();
    angle +=1;

    // carX += 1;
    // if (carX > 400) {
    //     carX = -50;
    // }
}
</script>
<?php
    require($_SERVER['DOCUMENT_ROOT'] . "/common/template/template_code.php");
    $code = file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/プログラム/3D創世記8/index.php");
    $template_code = new template_code();
    $template_code->text = $code;
    $text = $template_code->get_html();
    print <<<EOF
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    $text
    EOF;
?>
</body>
</html>