Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 264 lines (226 sloc) 11.316 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.