<video src="pjsk.mp4" id="pjsk" hidden="true" muted="muted" loop="true" style="position:fixed; left:0; top:0;max-width:100%;min-width:100%;min-height: 100%;z-index: -100;"></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js" crossorigin="anonymous"></script>
<script src=lib8.header.js></script>
<script src=lib8.js></script>
<style>
.ace_gutter-layer {
/* original width is 48px */
width: 25px !important;
}
.ace_gutter-layer > * {
/* 48 - 32 = 16 */
margin-left: 0;
}
.ace_gutter-cell {
padding-left: 0 !important;
padding-right: 3px !important;
}
.code{
font-family: "monaco, menlo, ubuntu mono, consolas, source-code-pro" ;
}
</style>
<!!-------- VERTEX SHADER: YOU PROBABLY DON'T WANT TO CHANGE THIS RIGHT NOW -------->
<!!-------- FRAGMENT SHADER: THIS IS WHERE YOU WILL DO YOUR WORK -------->
<!!-------- FRAGMENT SHADER: MOVED TO ./shader.frag!! LOADED IN lib2.js -------->
<font size=7 color=#909090>
An RPG Game
<img id="rtx" style="float:right;" src="./RTXoff.svg" type="image/svg+xml"
alt="Turn Ray Tracing On/OFF" title="Turn Ray Tracing On/OFF" height=60px /img>
<div id="fps" style="font-size:25;float:right;margin-right:18px;"></div>
<TABLE cellspacing=0 cellpadding=0 style="width:50%"><TR>
<td><font color=red size=5><div id=errorMessage></div></font></td>
</TR><TR>
<table cellspacing=0>
<tr>
<td valign=top>
<div id="ace" style="opacity:90%;width:700px;height:700px;"hidden=true></div>
<div id = 'usage' style="opacity:90%;width:400px;height:600px;">
<font color=#000000>
<i style="font-size:28px;">What's new: </i>
<ul style="font-size:24px;">
<li>You can press three sphere-like buttons on the right of the TV to
switch between channels.</li>
<li><b style="color:red">Bonus Point: special control 1: touch screen. </b>When Ray Tracing Channel is selected you can 'touch' the
screen to select the spheres on the screen and drag to move it.
</li>
<li><b style="color:red">Bonus Point: sliders and toggle button. </b>You can <a style="color:red">walk</a> to the witch to show 2 additional controls. One to
button show the stars. The slider will change the opacity of the body.
</li>
<li>Walk to the torus to 'eat' it.</li>
<li><b style="color:red">Bonus Point: special control 2: clickable ground. </b>You can walk by pressing the arrow keys on your keyboard, or click on
the ground where you want to go.
</li>
<li><a href="./demo.webm">Demo Video</a></li>
<li><a href="./fs">Here</a> you can browse the source of this assignment.</li>
</ul>
<p style="font-size:24px;">
</div>
</td><td valign=top style="background-color:azure;opacity: 100%;">
<body bgcolor=white text=black link=black alink=blue vlink=blue>
<center>
<!!--- SUPER SAMPLING THE W/H PARAMS FOR CANVAS ARE RENDER SIZE, IN THE CSS IS ACTUAL(DISPLAY) SIZE.--->
<canvas id='canvas1' style=" background-color:#FFF7F8;opacity: 100%;overflow: hidden !important; width: 600px !important; height:600px !important;" width=1199 height=1199></canvas>
</center>
</body>
<div id="controls">
<input type="number" id="ins" style="display:none;margin-left:0px;font-size:24px;width:35px;height:45px" value="5" max="5" min = "1">
<button id="bns" style="display:none;margin-left:0px;font-size:24px;width:105px;height:45px">Spheres</button>
<input type="number" id="insamp" style="margin-left:2px;font-size:24px;width:60px;height:45px" value="2" max="10" min = "0.1" step="0.2">
<button id="bnsamp" style="margin-left:0px;font-size:24px;width:190px;height:45px">Super Sampling</button>
<button id="bnfs" style="margin-left:2px;font-size:24px;width:175px;height:45px">Fullscreen</button>
<button id="clrsel" style="display:none;margin-left:0px;font-size:24px;width:180px;height:45px">Clear Selection</button>
<button id="reset" style="margin-left:0px;font-size:24px;width:75px;height:45px">Reset</button>
<button id="mov" style="margin-left:0px;font-size:24px;width:180px;height:45px;visiblity:hidden;" hidden=true>Move Lighting</button>
<button id="pause" style="margin-left:0px;font-size:24px;width:75px;height:45px">Pause</button>
<div style='font-size:25px;'>
<!-- <font color=#000000>
<i style="font-size:28px;">What's new: </i>
<p style="font-size:24px;">
</p> -->
<div id="howitworks">
</div>
</div>
</div></td>
</tr></table>
</TR></TABLE>
<!!-------- YOU PROBABLY WANT TO CHANGE ANYTHING BELOW RIGHT NOW -------->
<script src="lib8.ext.js"></script>
<script>
setInterval(() => {
if(window.vs != null && window.fs != null&& canvas1.setShaders === undefined)
gl_start(canvas1, vs, fs);
}, 200);
</script>