-
Notifications
You must be signed in to change notification settings - Fork 0
/
3D.html
executable file
·110 lines (98 loc) · 3.83 KB
/
3D.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.9" />
<script src="./3D5.opt.js"></script>
<script async src="./polyfill5.min.js"></script>
<script defer src="./prefixfree.min.js"></script>
<style>
button {
position: fixed;
z-index: 3;
font-size: 1.3em;
opacity: .5;
}
</style>
</head>
<body>
<canvas></canvas>
<button onclick="eval(prompt('script'))" position: fixed; z-index: 2; font-size: 1.3em; opacity: .8">Debug</button><br /><br />
<button onclick="condition()">Loop: Code</button><br /><br />
<button onclick="play=!play">Loop: Toggle</button><br /><br />
<button onclick="!(stop=!stop)&&frame()">Frame: Toggle</button><br />
<script defer>
var can, pen, map,
cube, middlew = function rotate() {map.rotate(.01, .02, .03)}, play = false,
stop = false, tp = 10, BY = 13,
rem = "map.rotate(.01, .02, .03)",
loaded = `c, -50,-50,50, 50,-50,50, 50,50,50, -50,50,50,
-50,-50,-50, 50,-50,-50, 50,50,-50, -50,50,-50
|c, 50,-50,50, 150,-50,50, 150,50,50, 50,50,50,
50,-50,-50, 150,-50,-50, 150,50,-50, 50,50,-50
`;
function condition() {
middlew = new Function(rem = prompt("LoopCode", rem) || rem);
} //condition
function drawDbg() {
printxt("* Frame: " + (stop ? "STOPPED" : "Running."));
printxt("* Loop: " + (!play ? "Stopped" : "Running") + " ---\t" + middlew);
printxt("* Camera: " + map.camera.map(precision).join(", "));
printxt("* Plane: " + map.size.map(precision).join(", "));
printxt("* Surface: " + map.surface.map(precision).join(", "));
printxt("* Points: " + map.children.length);
printxt("* Orientation (rad): " + map.orientation.map(precision).join(", "));
printxt("* CubeTrans: " + cube.trans.map(precision).join(", "));
printxt("* CubeMatrix: " + cube.matrix.join("\t\t"));
for (let i in cube.children) {
printxt(`** Vertex[${i}]: orig. ---\t\t${[cube.children[i].x, cube.children[i].y, cube.children[i].z].map(precision).join(", ")}\t\t\t\t\tproj. ---\t\t${cube.children[i].coord2d.map(precision).join(", ")}\t\t\t\tfake ---\t\t${cube.children[i].coords.map(precision).join(", ")}`);
}
tp = BY;
} //drawDbg
function precision(num, idx, arr, PRE = 100) {
return num.toFixed(1); //Math.round(num * PRE) / PRE;
} //precision
function printxt(text) {
pen.strokeText(text, pen.canvas.width / 2, tp, pen.canvas.width);
tp += BY;
} //printxt
window.onerror = alert;
window.onload = function load() {
can = document.getElementsByTagName("canvas")[0];
pen = can.getContext("2d");
map = D3Map.parse(loaded, 500, pen);
map.camera[2] -= 500;
cube = map.children[0] || new (D3Map.Cube)([
new D3Map.Vertex(-50, -50, 50, map),
new D3Map.Vertex(50, -50, 50, map),
new D3Map.Vertex(50, 50, 50, map),
new D3Map.Vertex(-50, 50, 50, map),
new D3Map.Vertex(-50, -50, -50, map),
new D3Map.Vertex(50, -50, -50, map),
new D3Map.Vertex(50, 50, -50, map),
new D3Map.Vertex(-50, 50, -50, map)
]);
can.width = window.innerWidth;
can.height = window.innerHeight;
can.style.position = "fixed";
can.style.left = can.style.top = 0;
can.style.backgroundColor = "grey";
pen.fillStyle = "rgba(100, 100, 100, .5)";
pen.strokeStyle = "rgba(50, 50, 50, .8)";
pen.textAlign = "center";
pen.textBaseline = "top";
frame();
};
function frame() {
pen.clearRect(0, 0, can.width, can.height);
play && middlew();
pen.translate(can.width / 2, can.height / 2);
map.children.forEach(cube => cube.render(map, pen, 3));
//cube.render(map, pen, 3);
pen.translate(-can.width / 2, -can.height / 2);
drawDbg();
return !stop && requestAnimationFrame(frame);
} //frame
</script>
</body>
</html>