« »

This JavaScript code example is awesome, it's riding a roller coaster, or chasing a TIE fighter to the Death Star. This is a pretty complex JavaScript engine, supporting arbitrary camera and object transformations, and simple triangle clipping. The animation uses catmull-rom splines.

A very nice simulating JavaScript code to practice more.

More 3D JavaScript games to play:
- The 3DAT Maker

Label: roller coaster, TIE fighter, Death Star, simulating JavaScript code, 3D Roller Coaster

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
JavaScript
HTML
Print

Copy All x2

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="rollercoaster.js"></script>

Copy All x2

<div>
      Modes:
      <input type="button" value="That's no moon..." onclick="DRAW_LINE=false;DRAW_TRIS=false;DRAW_TIE=true;DRAW_GROUND=false;DRAW_STARFIELD=true;DRAW_BACK_WALL=true;">
      <input type="button" value="Whee!" onclick="DRAW_LINE=true;DRAW_TRIS=true;DRAW_TIE=false;DRAW_GROUND=true;DRAW_STARFIELD=false;DRAW_BACK_WALL=false;">
      <a href="#" onclick="document.getElementById('debugCrap').style.display='block';document.getElementById('debugCrap2').style.display='inline';">Show advanced controls</a><br/>
      <input type="button" value="New track" onclick="go()"/>
    </div>
    <div id="debugCrap" style="display: none;">
      <input type="button" onclick="if (timer) {clearInterval(timer); timer = null;this.value='Start'} else {timer = setInterval(function() {update(false);}, 20);this.value='Stop'}" value="Stop"/>
      <input type="button" onclick="update(true);" value="Step"/>

      <input type="button" onclick="if(document.getElementById('status')) document.getElementById('status').innerHTML='[CLEAR]\n';" value="Clear debug text"/>
      <input type="button" onclick="document.getElementById('debugCrap').style.display='none';document.getElementById('debugCrap2').style.display='none';" value="Hide this debug junk"><br/>
      <input type="button" onclick="alpha=!alpha" value="Toggle transparency"/>
      <input type="button" onclick="DRAW_LINE=!DRAW_LINE" value="Toggle line"/>
      <input type="button" onclick="DRAW_TRIS=!DRAW_TRIS" value="Toggle triangles"/>
      <input type="button" onclick="DRAW_TIE=!DRAW_TIE" value="Toggle TIE fighter"/>
      <input type="button" onclick="DRAW_GROUND=!DRAW_GROUND" value="Toggle ground"/>
      <input type="button" onclick="DRAW_STARFIELD=!DRAW_STARFIELD" value="Toggle stars"/>
      <input type="button" onclick="DRAW_BACK_WALL=!DRAW_BACK_WALL" value="Toggle death star"/>

      <br/>
      <span id="fps"></span>
      <br/>
      Interpolated points (fewer is faster): <input id="smooth" type="text" value="5" size="2"/><input type="button" value="update" onclick="interpPoints = 1+Math.min(50, Math.max(0, parseInt(document.getElementById('smooth').value))); if (isNaN(interpPoints)) interpPoints = 1; document.getElementById('smooth').value = interpPoints-1"/><br/>

      TIE distance: <input id="dist" type="text" value="15" size="2"/><input type="button" value="update" onclick="TIE_DIST = Math.min(100, Math.max(3, parseInt(document.getElementById('dist').value))); if (isNaN(TIE_DIST)) TIE_DIST = 3; document.getElementById('dist').value = TIE_DIST"/><br/>

      Scale (affects field of view; interacts with width and height): <input id="scaleval" type="text" value="250" size="2"/><input type="button" value="update" onclick="SCALE = Math.min(5000, Math.max(1, parseInt(document.getElementById('scaleval').value))); if (isNaN(SCALE)) SCALE = 250; document.getElementById('scaleval').value = SCALE"/><br/>

      Width: <input id="widthval" type="text" value="800" size="2"/><input type="button" value="update" onclick="WIDTH = Math.min(2000, Math.max(10, parseInt(document.getElementById('widthval').value))); if (isNaN(WIDTH)) WIDTH = 250; document.getElementById('widthval').value = WIDTH;canvas.setAttribute('width', WIDTH);"/> 
      Height: <input id="heightval" type="text" value="600" size="2"/><input type="button" value="update" onclick="HEIGHT = Math.min(2000, Math.max(10, parseInt(document.getElementById('heightval').value))); if (isNaN(HEIGHT)) HEIGHT = 250; document.getElementById('heightval').value = HEIGHT;canvas.setAttribute('height', HEIGHT);"/><br/>
      <input type="button" value="Reset car" onclick="time=-1"/><br/>
    </div>
    <canvas id="theCanvas" width="800" height="600" style="border: 1px solid blue;"></canvas>
    <spn id="debugCrap2" style="display: none;">
      <textarea id="status" rows="30" cols="40"></textarea>
    </span>

      <p>
	Explanation<br>
      <ul>
	<li>See also my <a href="3d.html">z-buffering 3d engine</a>.</li>
	<li>The track is a randomly generate set of points going into the distance</li>
	<li>Catmull-Rom splines are used for interpolation</li>

	<li>Catmull-Rom splines use 4 points to interpolate between 2.  This keeps the track smooth, but it means that we need an extra point before the track starts and one after the end.  That's why you don't go all the way to the last triangle before restarting at the beginning</li>
	<li>I'm not actually Z-buffering here.  With reasonable confidence, I know the order ahead of time (ground is far away, the death star is far away, and the spline is (almost) z-sorted by construction) so I just paint back to front.  This means some things would be more complex to implement</li>
	<li>The engine isn't particularly general-purpose.  Ideally, it would accept a tree of objects, each with their own transformation matricies.  Unfortunately, due to the lack of z-buffering, every type of object has its own requirements for proper painting (for example, the TIE fighter is painted in one of three different ways depending on how you're looking at it).  I may eventually generalize it a bit more and use wireframe drawing....</li>
	<li>The line fades as it gets close to you.  The fade of a segment is determined by the distance to part of that segment rather than the time it'll take to reach that segment.  This means that around sharp turns, it's possible for part of the line that you won't actually reach for a while will be faded.  Since the same logic is used to clip the spline, semgents could potentially disappear too early.</li>
	<li>I'm fairly sure there is still at least one bug - I've noticed occasional flickering of the ground, and occasional oddly-warped triangles.  If I happen to figure out when exactly the issues occur, I might try to fix it</li>
	<li>The diagonal line on the ground arises from anitaliasing.</li>

	<li>Painting the ground is <i>incredibly</i> expensive.  I'm not entirely sure why - maybe I'm still asking canvas to paint a lot of offscreen garbage when I clip the triangles or something.</li>
	<li>Canvas apparently uses 16-bit coordinates.  This causes ugliness if pixel positions get too big.  <b>It may also cause your browser (or, on *nix, your X server) to gobble HUGE amounts of RAM sometimes.</b>  Don't set the scale to be too big.</li>
      </ul>
    </p>

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

Card.rip CTRCoin.com ChainTutor.com war.money system.money ChatTotal.com choose.exchange choose.works XMQV.com eChainBank.com CoinHolo.com ApexBTC.com this.bid ABP3.com ZWVQ.com YeuNu.com pornID.net CreditCard.rip CryptoKD.com index.services

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

18/05/2013
Christopher Thomas [more]
5,784
0
0
0
0.07 KBytes

3D Roller Coaster Space Flight in JavaScript

0/5 0 votes / 5,784 previews / 0 comment 18/05/2013 This JavaScript code example is awesome, it's riding a roller coaster, or ch...3D Roller Coaster Space Flight in JavaScript - 3D Roller Coaster Space Flight in JavaScript

Let's be first member to do this