Slashdot Mirror

Don't forget Wolfenstein 3D (or, if you prefer, the 5k version)...

Go to

http://www.wolf5k.com/

and play the game. Then go to

http://code.icarusindie.com/index.php?section=js&p age=lesson4

The graphics from your wolf5k session will replay until the frames run out. Then the tutorial may or may not work.

You can also simply reload the wolf5k game and your previous game will replay until the frames run out and then you'll actually be able to play the new game session.

IE hasn't supported the XBM format since early version 6.0 (unpatched install of Win2K). A patch for 6.0 removed XBM support. Prior to that, IE was one of the few browsers that could correctly run the code.

Since FF is the only browser I know of that supports XBM, it'd be nice if the developers would fix this problem.

I suppose though, that is where AJAX and DHTML/XHTML comes into play. You aren't going to be able to create complex animations, but basic pleasing looking animation and transistion can be done.

If SVG ever becomes standard, we'll be able to do all the animation we want. Current DHTML libraries aren't bad for this, but scaling is hackish, rotation is nonexistent, and shearing is simply out of the question. Not to mention more complex animations like shaped loops (such as the hollow "splats" you might see in an animation as "sound waves" from a speaker). SVG has all these capabilities, and is designed to allow the DOM to be modified.

Some enterprising individuals have already been using XBM files for this, but XBM is only a black and white raster. :(

Meh. This FPS just uses pure Javascript, works in more browsers, and is actually an FPS - you can shoot and kill things. Oh, and it's only 5KB (one byte short, in fact).

Precisely. Thank you for putting it so eloquently.

It is causing browsers to give us APIs that we have wanted for a long time, and can take the web to the next level, along with other technologies.

I'm curious, what's on the top of your list for new technologies that you wish were ubiquitous? I know the top 2 on my list are:

1) Get Microsoft to properly support DOM Events. (Then I can stop patching their browser for them.)

2) Make SVG a core part of web browsers. This is especially important to me because textual images can be modified in most browsers. To date that has only meant cutesy tricks with XPMs. (Such as Wolf5K) But with SVG, we can take things to a whole new level of interactive and multimedia applications! For example, it would be extremely cool to be able to show a graph or pie chart that changes as you enter data. (You can fake it today by updating the image from the server, but it just isn't as smooth.) Not to mention the ability to finally rotate images. I can't even count how many times I would have loved to have that ability. :-)

see that is laughable - you can't draw a curve and you are calling this the graphics drawing level

More correctly, this is a document drawing level. No one ever expected HTML/CSS to go beyond simply displaying textual data to users. As a result, it still needs some beefing up. But for regular use, the lack of things like curved objects is not a show-stopper. The fact that the document elements are solid objects is actually kind of nice, because you're *not* redrawing the screen every time. You just shift your elements around and the web browser figures the rest out.

Also, as I said before, SVG provides a nice solution to the lack of curved objects and rotation. The advantages to SVG are:

1. The image can be built in memory, then displayed.

2. Modifications can be made by walking the XML DOM Tree.

3. SVG is a good intermediary or long term format for storing drawing data.

Point #3 is rather important. Consider the case of a DHTML SpreadSheet application. If you wanted to create a Pie Chart, you can either have the server generate you an image (slow) or create an SVG on the fly (fast). Since you created the image as an SVG, you can then shunt the raw XML data back to the server for optional translation and long term storage. The server could even take the spreadsheet data and generate you an Excel file to email your coworkers.

It's quite an amazing paradigm shift.

P.S. There is some existing work demonstrating the use of dynamically generated images. The game at the link I've provided creates a new XBM image for every frame. (Info) While I don't recommend using HTML for Wolf3D, this method works perfectly for business applications.

If you need comments to understand your own code, then your code is sloppy and you should fix that problem first. Writting sloppy code is like having bad handwritting. Fix your handwritting. Comments get out of date and are a topic all their own. Someone who writes sloppy code will probably write sloppy worthless comments as well.

You should also code first because you know what a function is supposed to do. When it does exactly what it's supposed to do then comment it. Otherwise your comments will be more along the lines of wishful thinking and lead to more confusion.

You should understand the language well enough that you can keep in your head everything the code is doing and if not, understand the language well enough to be able to read the code to see what it's doing. Comments are not going to help you debug a function. You need to be able to read the code itself to be an effective debugger. Only once it is debugged can you confidently place in comments that say what the function does. Otherwise, it's just wishful thinking.

The most commenting I do before writing a function is a rough outline of the steps the function needs to go through. Only after the function is done and does exactly what it's supposed to do, do I comment it.

I've gone back to code (thousands of lines) I wrote in BASIC 10 years ago and can understand exactly what's going on despite there being no comments. Same with stuff I've written in C/C++. Comments are not essentional if you can read code like a book. Which, a professional programmer should be able to do.

www.wolf5k.com has an obfuscated version of Wolf3D written in Javascript. I went through and deobfuscated the code, figured out exactly what it does and then commented it. I then took the deobfuscated version and translated it to C++. I did the same with the Gavare ioccc ray tracer although the results havn't been posted on-line yet.

Deobfuscated Wolf5K

If you want practice reading "bad" code, deobfuscating programs is great practice.

Ben

Anti-Planet Screenshots. Anti-Planet is a FPS rendered entirely using ray tracing. It requires an SSE compatible processor (PIII and above. AMD only recently implemented SSE in their processors). This has been out long before Doom 3 and runs on systems Doom 3 couldn't possibly run on and the graphics tricks it does are just now being put into raster graphics based games.

That, along with Wolf 5k inspired me to start working with software rendering. I think ray tracing will eventually be the way real time graphics are rendered in order to keep upping the bar for realism.

Real Time Software Rendering

I'm working on tutorials covering software rendering topics. The tutorials start by deobfuscating and fully documenting Wolf5K, cover some basic ray tracing and are now going through raster graphics since the concepts used for raster graphics apply for ray tracing as well. I'll be returning to do more advanced ray tracing stuff later. The tutorials also cover an enhanced version of Wolf5K written in C++ that is true color and has no texture size limitations.

Wolf5K is a Javascript clone of Wolf3D in 5Kbytes. I deobfuscated it and posted a series of tutorials on how it works here. There is also a C++ translation and enhancment series of tutorials here. Full ready to compile source is included for all tutorials.

The task of deobfuscating code is quite tedius but not too daunting. The main thing is getting the whitespace back in so you can see where all the functions begin and end. You then have to understand the language well enough that you can read the code and figure out what's going on without hints from comments or descriptive variables.

For Wolf5K I just started by working on the simple functions first and then by process of elimination worked my way through the code and finished with the raycasting function.

Translating it all to C++ was then quite easy because by then you have a very good grasp of how the code is suppost to work.

Here's a first person shooter in 5k of code
www.wolf5k.com