-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (66 loc) · 4.03 KB
/
index.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
<!-- Graphics Example Code. index.html - The web page document containing the canvas (drawing surface), that launches your javascript files. //-->
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <link rel="icon" href="assets/fav.ico">
<script> window.tiny_graphics = {}; // Store all our JavaScipt code inside of classes here.
window.classes = {}
</script>
<script src="tiny-graphics.js" ></script> <!-- Javascript "include" files. Any code in them gets executed as part of the page loading. //-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"> </script> <!-- Tensorflow for the model training -->
<script src= "dependencies.js" ></script>
<script src= "shapes.js" ></script>
<script src= "physics.js" ></script>
<script src= "materials.js" ></script>
<script src= "spikey_agent.js" ></script>
<script src= "agent_physics.js" ></script>
<script src= "octree.js" ></script>
<script src="learning/utils.js"></script>
<!--<script src="learning/replay-buffer.js"></script>-->
<!--<script src="learning/noise.js"></script>-->
<!--<script src="learning/actor_critic.js"></script>-->
<!--<script src="learning/ddpg.js"></script>-->
<!--<script src="learning/agent.js"></script>-->
<script src= "webgl-obj-loader.js" ></script>
<script src= "adversary.js" ></script>
<script src= "main-scene.js" ></script>
<script src="training-scene.js" ></script>
<style>
* { font-family: monospace }
body { background: DarkGray }
div { background: white }
canvas { width: 1080px; height: 600px; margin-bottom:-3px }
.canvas-widget { width: 1080px; background: DimGray }
table { border-collapse: collapse; display:block; overflow-x: auto; }
table.control-box { width: 1080px; border:0; margin:0; max-height:380px; transition:.5s; overflow-y:scroll; background:DimGray }
table.control-box:hover { max-height:500px }
table.control-box td { overflow:hidden; border:0; background:DimGray; border-radius:30px }
table.control-box td .control-div { background: #EEEEEE; height:338px; padding: 5px 5px 5px 30px; box-shadow: 25px 0px 60px -15px inset }
table.control-box td * { background:transparent }
table.control-box .control-div td { border-radius:unset }
table.control-box .control-title { padding:7px 40px; color:white; background:DarkSlateGray; box-shadow: 25px 0px 70px -15px inset black }
.live_string { display:inline-block; background: unset }
table, th, td { border: 2px solid black; vertical-align: top; white-space: nowrap }
button { background: #4C9F50; color: white; padding: 6px; border-radius:9px;
box-shadow: 4px 6px 16px 0px rgba(0,0,0,0.3); transition: background .3s, transform .3s }
button:hover, button:focus { transform: scale(1.3); color:gold }
.link { text-decoration:underline; cursor: pointer }
.show { transform: scaleY(1); height:200px; overflow:auto }
.hide { transform: scaleY(0); height:0px; overflow:hidden }
</style>
</head><body> <!-- Begin typing the next of your web page here. //-->
<div id="main-canvas" class="canvas-widget"></div>
<audio src="./assets/underwater.mp4" id="background" ></audio>
<!-- <div id="alternate-canvas" class="canvas-widget"></div> -->
<script>
// ********************* THE ENTRY POINT OF YOUR WHOLE PROGRAM STARTS HERE *********************
// Use this code to embed a widget into any web page. The widget inclues a 3D WebGL area
// (an HTML canvas) and various panels of controls.
"use strict"
// First, list the names of scenes we will add to our canvas. These will register themselves
// with this widget's Canvas_Manager so that their code can be called upon every time a
// draw / keyboard / mouse event happens on the web page.
const scenes = [ "Assignment_Two_Skeleton"];
// Use the Canvas_Widget class to display the WebGL demo. Pass in
// the name of the HTML element we are to replace with the widget.
new Canvas_Widget( "main-canvas", scenes );
// new Canvas_Widget( "alternate-canvas", scenes );
</script>
</body></html>