<!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>