Permalink
Browse files

Put asciitracer.html content in index.html

  • Loading branch information...
1 parent a49f7f1 commit badd70e9ce45d6b799da4da3e1b696a4269bad74 Trevor committed Mar 18, 2012
Showing with 263 additions and 1 deletion.
  1. +263 −1 index.html
View
@@ -1 +1,263 @@
-test
+<!DOCTYPE html>
+<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
+ <head>
+ <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
+ <title>Real time ASCII Raytracer in Javascript</title>
+ <link rel='stylesheet' type='text/css' href='reset.css' />
+ <link rel='stylesheet' type='text/css' href='css/slider.css' />
+ <style type='text/css'>
+ body
+ {
+ font-family: Helvetica, Arial, Sans-serif;
+ font-size: 10pt;
+ font-weight: normal;
+ margin-top: 30px;
+ margin-left: 30px;
+ }
+
+ h2
+ {
+ font-size: 14pt;
+ font-weight: bold;
+ }
+
+ #screen
+ {
+ font-family: Courier New, Monospace;
+ font-size: 6pt;
+ font-weight: normal;
+ position: relative;
+ top: -4px;
+ }
+
+ #width, #height
+ {
+ width: 45px;
+ }
+
+ #width, #height, #fps
+ {
+ border: 1px solid #888;
+ background-color: #ffc;
+ padding: 2px;
+ }
+
+ .slider
+ {
+ width: 600px;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 12px;
+ }
+
+ .tooltip
+ {
+ display: none;
+ background: transparent url(images/black_arrow.png);
+ font-size: 12px;
+ height: 70px;
+ width: 160px;
+ padding: 25px;
+ color: #fff;
+ }
+ </style>
+ </head>
+ <body>
+ <p>&nbsp;</p>
+ <h2>Javascript ASCII Raytracing&nbsp;&nbsp;</h2>
+ <sub>Beautiful in Chrome, slow as molasses in Firefox. Don't ask <i>us</i> why; we were outfoxed.</sub>
+ <p>&nbsp;</p>
+ <p>&nbsp;</p>
+ <table id='layout'>
+ <tr colspan='2'>
+ <td>
+ <label for='width'>Width:</label>
+ <input type='text' name='width' id='width' size='3' value='160'/>&nbsp;&nbsp;
+ <label for='height'>Height:</label>
+ <input type='text' name='height' id='height' size='3' value='80'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+ <button id='start-button' onclick='start()'>Start!</button>
+ <button id='stop-button' onclick='stop()'>Stop!</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+ FPS: <div id='fps' style='display: inline;'></div>
+ </td>
+ </tr>
+ <tr colspan='2' height='20px'>
+ <td>&nbsp;</td>
+ </tr>
+ <tr>
+ <td style='padding: 0px; margin: 0px;'>
+ <div id='camera' style='height: 0px;'></div>
+ <div id='screen'></div>
+ </td>
+ <td style='padding: 0px; margin: 0px; padding-left: 30px;'>
+ Anti-alising<div style='height: 5px'></div>
+ <div id='slider-aa' class='slider' title='Drag slider to extreme left to disable, and extreme right to enable, full screen antialiasing.'>
+ <div class='handle'></div>
+ </div>
+ <p>&nbsp;</p>
+ Motion blur<div style='height: 5px'></div>
+ <div id='slider-motion-blur' class='slider' title='Control the amount of scene motion blur. The lowest setting switches motion blur off entirely.'>
+ <div class='handle'></div>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </body>
+ <script src='js/jquery-1.6.2.min.js' type='text/javascript'></script>
+ <script src='js/jquery.tools.min.js' type='text/javascript'></script>
+ <script src='js/slider.js' type='text/javascript'></script>
+ <script src='asciitracer.js' type='text/javascript' charset='utf-8'></script>
+ <script type='text/javascript'>
+ var interval=null;
+
+ var scene = {
+ background: 0.6,
+
+ shapes: [
+ { // checkerboard plane
+ id: 0,
+ type: 0, // plane
+ offset: 0,
+ surface: 1, // checkerboard
+ normal: [0, 1, 0]
+ },
+
+ { // big sphere
+ id: 1,
+ type: 1, // sphere
+ radius: 1,
+ surface: 0, // shiny
+ centre: [0, 1.0, 0],
+ },
+
+ { // sphere
+ id: 2,
+ type: 1,
+ radius: 0.5,
+ surface: 0, // shiny
+ centre: [-1, 0.5, 1.5],
+ }
+ ],
+
+ camera:
+ {
+ position: [3, 0.2, 4],
+ lookAt: [-1, 0.5, 0],
+ },
+
+ lights: [
+ {
+ position: [0.0, 7.0, 0.0],
+ luma: 1.0,
+ }
+ ]
+ };
+
+ var g_LastTime = new Date();
+
+ function set_button_state(id, state)
+ {
+ var target = $('#' + id);
+
+ if(state)
+ target.removeAttr('disabled');
+ else
+ target.attr('disabled', 'disabled');
+ }
+
+ function set_render_state(state)
+ {
+ set_button_state('start-button', !state);
+ set_button_state('stop-button', state);
+ }
+
+ function stop()
+ {
+ if(interval)
+ {
+ clearInterval(interval);
+ set_render_state(false);
+ }
+ }
+
+ function start()
+ {
+ stop();
+
+ var w = document.getElementById('width').value;
+ var h = document.getElementById('height').value;
+ var fpsDiv = $('#fps');
+
+ AsciiTracer.init(w, h);
+
+ fpsDiv.html('&nbsp;0.00&nbsp;');
+
+ var camera_velocities = [
+ [0, 0, -1, 35],
+ [-1, 0, 0, 30],
+ [0, 0, 1, 35],
+ [1, 0, 0, 30],
+ [0.3, 0.3, 0, 25],
+ ];
+
+ var vel_idx = 0;
+ var frame = 0;
+
+ interval = setInterval(function()
+ {
+ if(typeof AsciiTracer === 'undefined')
+ return;
+
+ // Update FPS
+ var time = new Date();
+ var delta_t = (time - g_LastTime) / 1000.0;
+ var fps = 1000.0 / (time - g_LastTime);
+
+ g_LastTime = time;
+
+ fpsDiv.html('&nbsp;' + fps.toFixed(2) + '&nbsp;');
+
+ scene.camera.position = AsciiTracer.vectorAdd(scene.camera.position, AsciiTracer.vectorScale(camera_velocities[vel_idx], 0.2));
+ AsciiTracer.traceTo(w, h, scene);
+
+ frame++;
+
+ if (frame == camera_velocities[vel_idx][3])
+ {
+ vel_idx = (vel_idx + 1) % camera_velocities.length;
+ frame = 0;
+ }
+ }, 1);
+
+ set_render_state(true);
+ }
+
+ $(document).ready(function()
+ {
+ set_render_state(false);
+
+ $("[title]").tooltip();
+
+ var w = document.getElementById('width').value;
+ var h = document.getElementById('height').value;
+
+ AsciiTracer.init(w, h);
+
+ new Slider('slider-aa',
+ {
+ steps: 2,
+ snapping: true,
+ animation_callback: function(value)
+ {
+ AsciiTracer.setAntiAlias(value);
+ }
+ });
+
+ new Slider('slider-motion-blur',
+ {
+ animation_callback: function(value)
+ {
+ AsciiTracer.setMotionBlur(value);
+ }
+ });
+ });
+ </script>
+</html>

0 comments on commit badd70e

Please sign in to comment.