index.html

<!DOCTYPE html>
<html>
<head>
    <title>Neverball curve tool</title>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

h1.title { font-size: 1em; }

table#wrapper {
    width: 100%;
    height: 100%;
}

.wrapper {
    vertical-align:top;
    width: 50%;
    padding: 2px;
    margin: 2px;
}

#container {
    width: 98%;
    height: 98%;
    padding: 2px;
    margin: 2px;
}

#otherstuff {
    border: 1px solid black;
    background-color: #e0e0e0;
    padding: 1em;
}

.button {
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 2px outset lightgrey;
    background-color:lightgrey;
    color: black;
    text-decoration: none;
}

#mapc_map,
#mapc_params {
    font-family: monospace;
    white-space: pre;
}

#helptxt {
    display:none;
    position:absolute;
    padding: 1em;
    border: 1px solid black;
    top: 0;
    left: 0;
    width: 100%;
    background:rgba(255, 255, 255, 0.9);
    white-space: pre;
}

.flright {
    float: right;
}

.tex_preview_color {
    border: 1px solid black;
    font-family: monospace;
    padding: 0 0.2em;
    margin-right: 0.5em;
}

</style>
</head>
<body>
<table id="wrapper">
<tr>
<td class="wrapper">
<h1 class="title">Neverball online curve tool</h1>
<div id="otherstuff">
 <a href="#" class="flright button" onclick="display_help(1);return false;">?</a>
 <div id="curve_inputs"></div>
 <a href="#" onclick="curve.random(); regen_scene();return false;">randomize</a> |
 <a href="#" onclick="show_curve_map();return false;">get&nbsp;.map</a> |
 <a href="#" onclick="change_camera(0);return false;">reset&nbsp;cam</a>
 <hr>
 <div id="mapc_params"></div>
 <div id="mapc_map"></div>
</div>
</td>
<td class="wrapper"><canvas id="container"></canvas></td>
</table>
<div id="helptxt">
This is a javascript version of the curve-tool for <a href="http://neverball.org">Neverball</a>.

* Drag with mouse left button to rotate the preview.
* Drag with mouse right button to pan.
* Drag with mouse middle button to zoom.
<div class="center">
<a href="#" class="button" onclick="display_help(0);return false;">OK</a>
</div>
</div>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="utils.js"></script>

<script src="curve.js"></script>


<script>

var curve_vars = [
    { 'name': 'segments', 'varname': 'n', 'desc': 'Number of segments' },
    { 'name': 'angle', 'varname': 'a0', 'desc': 'Starting angle', 'joinline':1, 'separator': '-' },
    { 'varname': 'a1', 'desc': 'Ending angle' },
    { 'varname': 'thickness', 'desc': '' },
    { 'name': 'start radius', 'varname': 'r0', 'desc': 'Start inner radius', 'joinline':1, 'separator': '-'  },
    { 'varname': 'r1', 'desc': 'Start outer radius' },
    { 'name': 'end radius', 'varname': 'r2', 'desc': 'End inner radius', 'joinline':1, 'separator': '-'  },
    { 'varname': 'r3', 'desc': 'End outer radius' },
    { 'name': 'slope', 'varname': 'usesteps', 'desc': '', 'type':'checkbox', 'joinline':1, 'separator': ' ' },
    { 'varname': 'totalstep', 'desc': 'Number to slope up (positive) or down (negative)' },
    { 'varname': 'innerdrop', 'desc': 'Adjustment to the inner ring' },
    { 'varname': 'outerdrop', 'desc': 'Adjustment to the outer ring' },
    { 'varname': 'hill', 'desc': 'Adjustment to the middle of the curve' },
    { 'varname': 'ct', 'desc': '', 'type':'checkbox' },
];


var views, scene, renderer;
var control;
var clock;

var curve;

var meshes = new Array();
var light;

var windowWidth, windowHeight;
var allow_animation = 0;

var view = {
    background: new THREE.Color(0x80b2b2),
    eye: [ 0, 0, 800 ],
    up: [ 0, 1, 0 ],
    center: [ 0, 0, 0 ],
    fov: 60
};

var texture_colors = [
    'ff0000',
    '00ff00',
    '0000ff',
    'ffffff',
    '000000',
];

var textures = [
    {'name':'top', 'def':'turf-green-dark', 'mesh':new THREE.MeshBasicMaterial( { color: parseInt(texture_colors[0], 16), wireframe: true, side:THREE.DoubleSide } )},
    {'name':'in', 'def':'turf-grey', 'desc':'inner edge', 'mesh':new THREE.MeshBasicMaterial( { color: parseInt(texture_colors[1], 16), wireframe: true, side:THREE.DoubleSide } )},
    {'name':'out', 'def':'turf-grey', 'desc':'outer edge', 'mesh':new THREE.MeshBasicMaterial( { color: parseInt(texture_colors[2], 16), wireframe: true, side:THREE.DoubleSide } )},
    {'name':'bottom', 'def':'turf-grey', 'mesh':new THREE.MeshBasicMaterial( { color: parseInt(texture_colors[3], 16), wireframe: true, side:THREE.DoubleSide } )},
    {'name':'blank', 'def':'invisible', 'desc':'joins', 'mesh':new THREE.MeshBasicMaterial( { color: parseInt(texture_colors[4], 16), wireframe: true, side:THREE.DoubleSide } )}
];

var select_textures = [
    'caution',
    'glass',
    'invisible',
    'red-pattern',
    'turf-green',
    'turf-green-dark',
    'turf-grey',
    'white',
];

curve = new curve();
read_cookies();
output_curve_inputs();
init();
//animate();
render();

function display_help(i)
{
    if (i) {
	$('helptxt').style.display='block';
    } else {
	$('helptxt').style.display='none';
    }
}

function set_curve_var(v) {
    var e = $('curve_var_input_' + v);
    if (e.type == 'text') {
	curve.setvalue(v, (isNaN(parseFloat(e.value)) ? 0 : e.value));
    } else if (e.type == 'checkbox') {
	curve.setvalue(v, e.checked ? 1 : 0);
    } else {
	alert("Unhandled set_curve_var elem type: " + e.type);
    }
    regen_scene();
}

function display_texture_select(idx, show)
{
    var n = textures[idx].name;
    if (show) {
	var d = textures[idx].def;
	$('tex_select_span_'+n).innerHTML = get_tex_select(n, d) + '<a href="#" class="button" onclick="display_texture_select('+idx+');return false;">-</a>';
	$('tex_input_'+n).style.display='none';
	$('tex_select_a_'+n).style.display='none';
    } else {
	$('tex_select_span_'+n).innerHTML = '';
	$('tex_input_'+n).style.display='inline';
	$('tex_select_a_'+n).style.display='inline';
    }
}

function set_texture(name, e, inp)
{
    for (var i = 0; i < textures.length; i++) {
	if (name == textures[i].name) {
	    var v = inp ? e.value : e.options[e.selectedIndex].value
	    textures[i].def = v;
	    $('tex_input_' + name).value = v;
	    display_texture_select(i, 0);
	    var cookie = [];
	    for (var j = 0; j < textures.length; j++) {
		cookie.push(textures[j].def);
	    }
	    setcookie('curvejs-tex', cookie.join(','), 365);
	    return;
	}
    }
}

function get_tex_select(name, def)
{
    var s = '<select style="width:10em;" id="texture_select_'+name+'" onchange="set_texture(\''+name+'\', this)">';
    var texs = select_textures.slice();
    for (var i = 0; i < textures.length; i++) {
	texs.push(textures[i].def);
    }
    texs = texs.unique();
    texs.sort();
    for (var i = 0; i < texs.length; i++) {
	s += '<option value="'+texs[i]+'"';
	s += '  onclick="set_texture(\''+name+'\', this.parentNode)"';
	if (def == texs[i]) s += ' selected';
	s += '>' + texs[i] + '</option>';
    }
    s += '</select>';
    return s;
}

function output_curve_inputs() {
    var str = '<table>';
    var joinline = 0;
    for (var i = 0; i < curve_vars.length; i++) {
	var c = curve_vars[i];
	var nam = c.name ? c.name : c.varname;
	if (!joinline) {
	    str += '<tr>';
	    str += '<td>' + nam + '</td>';
	    str += '<td>';
	}
	if (c.type == 'checkbox') {
	    str += '<input type="checkbox" onchange="set_curve_var(\''+c.varname+'\');" id="curve_var_input_'+c.varname+'"';
	    if (curve.getvalue(c.varname)) str += ' checked';
	    str += 'title="'+c.desc+'">';
	} else {
	    str += '<input type="text" onchange="set_curve_var(\''+c.varname+'\');" id="curve_var_input_'+c.varname+'" value="' + curve.getvalue(c.varname) + '" size="3" title="'+c.desc+'">';
	}
	joinline = c.joinline;
	if (c.separator) str += c.separator;
	if (!joinline) {
	    str += '</td>';
	    str += '</tr>';
	}
    }
    for (var i = 0; i < textures.length; i++) {
	var n = textures[i].name;
	var d = textures[i].def;
	var desc = textures[i].desc ? textures[i].desc : n;
	str += '<tr title="Texture for the '+desc+' of the curve">';
	str += '<td>' + n + '</td>';
	str += '<td>';
	str += '<span class="tex_preview_color" style="background-color:#'+texture_colors[i]+'" title="Color for this texture in the 3D preview">&nbsp;</span>';
	str += '<input type="text" id="tex_input_'+n+'" value="'+d+'" size="10" onchange="set_texture(\''+n+'\', this, 1)">';
	str += '<a class="button" href="#" id="tex_select_a_'+n+'" onclick="display_texture_select('+i+', 1);return false;">+</a>';
	str += '<span id="tex_select_span_'+n+'"></span>';
	str += '</td>';
	str += '</tr>';
    }
    str += '</table>';
    $('curve_inputs').innerHTML += str;

    update_curve_inputs();
}

function update_curve_inputs() {
    for (var i = 0; i < curve_vars.length; i++) {
	var c = curve_vars[i];
	if (c.type == 'checkbox') {
	    $('curve_var_input_'+c.varname).checked = (curve.getvalue(c.varname) ? 1 : 0);
	} else {
	    $('curve_var_input_'+c.varname).value = curve.getvalue(c.varname);
	}
    }

    $('mapc_params').innerHTML = 'curve.exe '+curve.getparams();
}


function curve_render(c)
{
    for (var i = 0; i < c.data.length; i++) {
	var lump = c.data[i];
	for (var j = 0; j < lump.length; j++) {
	    var d = lump[j]; // sides of the lump
	    var geom = new THREE.Geometry();

	    geom.vertices.push( new THREE.Vector3( d.x0, d.y0, d.z0 ) );
	    geom.vertices.push( new THREE.Vector3( d.x1, d.y1, d.z1 ) );
	    geom.vertices.push( new THREE.Vector3( d.x2, d.y2, d.z2 ) );

	    geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
	    geom.faces.push( new THREE.Face3( 1, 2, 0 ) );

	    var mesh = new THREE.Mesh( geom, textures[d.tex].mesh );

	    meshes.push(mesh);

	    scene.add( mesh );
	}
    }
}

function change_camera(i)
{
    switch (i % 3) {
    default:
    case 0:
	camera.position.x = view.eye[0];
	camera.position.y = view.eye[1];
	camera.position.z = view.eye[2];
	break;
    case 1:
	camera.position.x = 800;
	camera.position.y = 0;
	camera.position.z = 0;
	break;
    case 2:
	camera.position.x = 0;
	camera.position.y = 800;
	camera.position.z = 0;
	break;
    }
    control.target.x = view.center[0];
    control.target.y = view.center[1];
    control.target.z = view.center[2];
    camera.lookAt( scene.position );
    render();
}

function show_curve_map()
{
    for (var i = 0; i < textures.length; i++) {
	curve.textures[i] = 'mtrl/' + textures[i].def;
    }
    $('mapc_map').innerHTML='<textarea cols="50" rows="20">' + curve.getmap() + '</textarea>';
}

function dele() {
    while (meshes.length) {
	scene.remove( meshes.pop() );
    }
    curve.clear();
}

function read_cookies()
{
    var cookie = getcookie('curvejs-tex').split(",");
    if (cookie.length == textures.length)
	for (var i = 0; i < cookie.length; i++) {
	    textures[i].def = cookie[i];
	}
}

function create_grid(gridsize)
{
    var num = 20;
    if (!gridsize) gridsize = 32;

    var mat = new THREE.LineDashedMaterial({ linewidth: 1, color: 0x708888, dashSize: 1, gapSize: 2 });

    for (var i = -(Math.round(num/2)); i <= Math.round(num/2); i++) {
	var geom = new THREE.Geometry();
	geom.vertices.push(new THREE.Vector3(-(gridsize*num)/2, i*gridsize, 0));
	geom.vertices.push(new THREE.Vector3((gridsize*num)/2, i*gridsize, 0));
	geom.computeLineDistances();
	var axisline = new THREE.Line(geom, mat, THREE.LinePieces);
	meshes.push(axisline);
	scene.add(axisline);

	var geom = new THREE.Geometry();
	geom.vertices.push(new THREE.Vector3(i*gridsize, -(gridsize*num/2), 0));
	geom.vertices.push(new THREE.Vector3(i*gridsize, (gridsize*num/2), 0));
	geom.computeLineDistances();
	var axisline = new THREE.Line(geom, mat, THREE.LinePieces);
	meshes.push(axisline);
	scene.add(axisline);

    }
}

/* from THREE.js Detector */
function webgl_detect()
{
    try {
	var canvas = document.createElement( 'canvas' );
	return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
    } catch( e ) { return false; }
}

function init() {

    container = $( 'container' );

    container.width = container.offsetWidth = container.parentNode.offsetWidth;
    container.height = container.offsetHeight = container.parentNode.offsetHeight;

    camera = new THREE.PerspectiveCamera( view.fov, container.offsetWidth / container.offsetHeight, 1, 10000 );
    camera.position.x = view.eye[ 0 ];
    camera.position.y = view.eye[ 1 ];
    camera.position.z = view.eye[ 2 ];
    camera.up.x = view.up[ 0 ];
    camera.up.y = view.up[ 1 ];
    camera.up.z = view.up[ 2 ];
    view.camera = camera;

    scene = new THREE.Scene();

    camera.lookAt( scene.position );

/*
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 );
    scene.add( light );
*/
/*
    radius = 200;
    geometry  = new THREE.IcosahedronGeometry( radius, 1 );
    var materials = [
        new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
        new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )

    ];

    group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
    group1.position.x = 0;
    group1.rotation.x = 0;
    scene.add( group1 );
*/


    curve.generate();
    curve_render(curve);
    create_grid();

    var rendparams = { antialias: false, canvas: container };

    renderer = webgl_detect() ? new THREE.WebGLRenderer(rendparams): new THREE.CanvasRenderer(rendparams);

    renderer.setSize( container.offsetWidth, container.offsetHeight );

    control = new THREE.OrbitControls(camera, renderer.domElement);

    renderer.domElement.onmousedown = mouse_rotation_enable;
    renderer.domElement.onmouseup = mouse_rotation_disable;

    clock = new THREE.Clock();

}

function mouse_rotation_enable(e)
{
    allow_animation = 1;
    animate();
}
function mouse_rotation_disable(e)
{
    allow_animation = 0;
}

function regen_scene()
{
    dele();
    create_grid();
    curve.generate();
    curve_render(curve);
    update_curve_inputs();
    render();
}

function updateSize() {
    var container = $('container');
    if ( windowWidth != container.parentNode.offsetWidth || windowHeight != container.parentNode.offsetHeight ) {
	container.width = container.offsetWidth = container.parentNode.offsetWidth;
	container.height = container.offsetHeight = container.parentNode.offsetHeight;
        windowWidth  = container.offsetWidth;
        windowHeight = container.offsetHeight;
        renderer.setSize ( windowWidth, windowHeight );
    }
}


function animate() {
    var dt = clock.getDelta();
    control.update(dt);
    render();
    if (allow_animation) requestAnimationFrame( animate );
}


function render() {
    updateSize();

    camera = view.camera;

    renderer.setClearColor( view.background, 1 );

    camera.aspect = windowWidth / windowHeight;
    camera.updateProjectionMatrix();

    renderer.render( scene, camera );
}

</script>


</body>
</html>