We Keep Coding

Issues Creating a 3D Renderer in JavaScript

I am trying to make my own 3D renderer in JavaScript using raycasting, but despite checking over the math and the code countless times, it still does not seem to be working. I've tried everything I possibly could to get this thing to work and it won't, so I'm hoping someone else can figure it out.
My code runs an Update method every frame, increasing the yaw (Camera.Rot.Yaw) by 0.1 radians every iteration, but it ends up looking weird and unrealistic, and I can't figure out why. Sorry if it's confusing and long, I can't really think of a way to make a minimal reproducible example of this.
This is the Update method:
Update(Canvas, Ctx, Map, Camera) {
var id = Ctx.getImageData(0, 0, Canvas.width, Canvas.height);
var Pixels = id.data;
//Distance of projection plane from camera
//It should be behind I think
var PlaneDist = 64;
//Divides the second slopes by this so each ray goes a shorter
//distance each iteration, effectively increasing quality
var Quality = 160;
//The midpoint of the projection plane for each coordinate
var MidX =
Camera.Pos.X +
PlaneDist * Math.cos(Camera.Rot.Pitch) * Math.cos(Camera.Rot.Yaw);
var MidY = Camera.Pos.Y + PlaneDist * Math.sin(Camera.Rot.Pitch);
var MidZ =
Camera.Pos.Z +
PlaneDist * Math.cos(Camera.Rot.Pitch) * Math.sin(Camera.Rot.Yaw);
//Slopes to get to other points on the projection plane
var SlopeX =
Math.sin(Camera.Rot.Yaw) +
(Canvas.height / Canvas.width) *
Math.cos(Camera.Rot.Yaw) *
Math.sin(Camera.Rot.Pitch);
var SlopeY = -Math.cos(Camera.Rot.Pitch);
var SlopeZ =
Math.cos(Camera.Rot.Yaw) +
(Canvas.height / Canvas.width) *
Math.sin(Camera.Rot.Yaw) *
Math.sin(Camera.Rot.Pitch);
//Loops for every point on the projection plane
for (let i = 0; i < Canvas.height; i++) {
for (let j = 0; j < Canvas.width; j++) {
let NewX = Camera.Pos.X;
let NewY = Camera.Pos.Y;
let NewZ = Camera.Pos.Z;
//Slopes for the actual ray to follow, just the distance between
//the plane point and the camera divided by quality
let SlopeX2 = (Camera.Pos.X-(MidX - SlopeX * (j - Canvas.width / 2)))/ Quality;
let SlopeY2 = (Camera.Pos.Y-(MidY - SlopeY * (i - Canvas.height / 2))) / Quality;
let SlopeZ2 = (Camera.Pos.Z-(MidZ - SlopeZ * (j - Canvas.width / 2)))/ Quality;
//Ray's current map position, divides the map into a 16x32x16
//list of blocks (map initialization shown elsewhere)
let MapPos =
Map.MData[0][Math.floor(NewX / 16) + 2][Math.floor(NewY / 16)][
Math.floor(NewZ / 16)
];
//Iterates until ray either hits a block with max opacity, or
//hits the boundary of the map
while (
MapPos[3] !== 255 &&
NewX + SlopeX2 < 256 &&
NewY + SlopeY2 < 512 &&
NewZ + SlopeZ2 < 256 &&
NewX + SlopeX2 >= 0 &&
NewY + SlopeY2 >= 0 &&
NewZ + SlopeZ2 >= 0
) {
//Advances ray's current position according to slopes
NewX += SlopeX2;
NewY += SlopeY2;
NewZ += SlopeZ2;
MapPos =
Map.MData[0][Math.floor(NewX / 16) + 2][Math.floor(NewY / 16)][
Math.floor(NewZ / 16)
];
}
//Sets pixel on screen to the color of the block the ray hit
//or just white (opacity 0) if it hit the boundary
Pixels[(i * id.width + j) * 4] = MapPos[0];
Pixels[(i * id.width + j) * 4 + 1] = MapPos[1];
Pixels[(i * id.width + j) * 4 + 2] = MapPos[2];
Pixels[(i * id.width + j) * 4 + 3] = MapPos[3];
}
}
//Displays the final image
Ctx.putImageData(id, 0, 0);
}
The map initialization (CreateChunk) looks like this:
constructor() {
this.MData = [];
}
CreateChunk(X, Y) {
let Chunk = [X, Y];
for (let x = 0; x < 16; x++) {
let Plane = [];
for (let y = 0; y < 32; y++) {
let Row = [];
for (let z = 0; z < 16; z++) {
//Colors are just to help tell which pixels are at what coordinates
if (y < 8) Row.push([x * 15, y * 7, z * 15, 255]);
else Row.push([0, 0, 0, 0]);
}
Plane.push(Row);
}
Chunk.push(Plane);
}
this.MData.push(Chunk);
}
I'm hoping it's just some coding mistake I've made, but despite my countless checks it may be the trigonometry that's wrong.

Implementing smooth coloring of Mandelbrot set

Recreating the way I color my Mandelbrot set I'm having a hard time implementing it in JavaScript. I currently use the common "escape time" algorithm:
for(px = 0; px < a; px+=scale){
for(py = 0; py < b; py+=scale){
x0 = panX + px/zm;
y0 = panY + py/zm;
var x = 0;
var y = 0;
var i = 0;
var xtemp;
var xSquare = x*x;
var ySquare = y*y;
while (x*x + y*y <= 4 && i < maxI) {
xtemp = x*x - y*y + x0
y = 2*x*y + y0
x = xtemp
i += 1;
}
//coloring
var shade = pallete.colourAt(i);
c.fillStyle = "#"+shade;
c.fillRect(px,py,scale, scale);
}
}
Here's the full code. I want to implement the part above to this pseudo code found at Wikipedia.
For each pixel (Px, Py) on the screen, do: { x0 = scaled x coordinate
of pixel (scaled to lie in the Mandelbrot X scale (-2.5, 1)) y0 =
scaled y coordinate of pixel (scaled to lie in the Mandelbrot Y scale
(-1, 1)) x = 0.0 y = 0.0 iteration = 0 max_iteration = 1000 // Here
N=2^8 is chosen as a reasonable bailout radius. while ( xx + yy <=
(1 << 16) AND iteration < max_iteration ) { xtemp = xx - yy + x0 y =
2*xy + y0 x = xtemp iteration = iteration + 1 } // Used to avoid
floating point issues with points inside the set. if ( iteration <
max_iteration ) { // sqrt of inner term removed using log
simplification rules. log_zn = log( xx + y*y ) / 2 nu = log( log_zn /
log(2) ) / log(2) // Rearranging the potential function. // Dividing
log_zn by log(2) instead of log(N = 1<<8) // because we want the
entire palette to range from the // center to radius 2, NOT our
bailout radius. iteration = iteration + 1 - nu } color1 =
palette[floor(iteration)] color2 = palette[floor(iteration) + 1] //
iteration % 1 = fractional part of iteration. color =
linear_interpolate(color1, color2, iteration % 1) plot(Px, Py, color)
}
To this:
for(px = 0; px < a; px+=scale){
for(py = 0; py < b; py+=scale){
//zoom factors
x0 = panX + px/zm;
y0 = panY + py/zm;
var x = 0;
var y = 0;
var i = 0;
var xtemp;
var xSquare = x*x;
var ySquare = y*y;
while (x*x + y*y <= 4 && i < maxI) {
/*ticks++
xtemp = x*x - y*y + x0
y = 2*x*y + y0
x = xtemp
i = i + 1*/
y = x*y;
y += y;
y += y0;
x = xSquare - ySquare + x0;
xSquare = Math.pow(x,2);
ySquare = Math.pow(y,2);
i += 1;
}
if ( i < maxI ) {
log_zn = Math.log( x*x + y*y ) / 2
nu = Math.log( log_zn / Math.log(2) ) / Math.log(2)
i += 1 - nu
}
color1 = palette.colourAt(Math.floor(i))
color2 = palette.colourAt(Math.floor(i) + 1)
/*****************
I dont know how to implement this.....
color = linear_interpolate(color1, color2, iteration % 1)
*****************/
c.fillStyle = color
c.fillRect(px,py,scale, scale);
}
}
But I don't know how to implement this part of pseudo-code:
color1 = palette[floor(iteration)]
color2 = palette[floor(iteration) + 1]
// iteration % 1 = fractional part of iteration.
color = linear_interpolate(color1, color2, iteration % 1)
plot(Px, Py, color)
Can someone help me understand and give a way to implement this?

The linear_interpolate function is supposed to calculate a color between two colors, based on the linear function y = mx + b.
To apply the linear function to colors, y is the output color, m is the difference between the two colors, b is the start color and x is a value between 0 and 1.
When x is 0, this function outputs the start color. When x is 1, this function outputs the end color.
To do this calculation we need the color in the form of three numbers. If you need to use hex strings, you'll have to split them and parse each two characters as a 16 bit number. I'm going to use a palette that is already in number form, because it is easier.
Here's my three color palette. I'm not recommending that you use these colors, it's just for demonstration:
let palette = [{r:255,g:0,b:0},{r:0,g:255,b:0},{r:0,g:0,b:0}]
This first function takes in iteration, which is probably not a whole number and may be larger than 1. It takes the floor of iteration, turning it into a whole number which an array index must be. Then it takes the remainder of iteration divided by 1 to get a number between 0 and 1.
function interpolation(iteration) {
let color1 = palette[Math.floor(iteration)];
let color2 = palette[Math.floor(iteration) + 1];
return linear_interpolate(color1, color2, iteration % 1);
}
Now we need to create the linear interpolation function, which must apply the linear function to each color channel and use floor to turn them into a whole number. I have it returning a css color in rgb(), but you could convert it into hex instead.
function linear_interpolate(color1, color2, ratio) {
let r = Math.floor((color2.r - color1.r) * ratio + color1.r);
let g = Math.floor((color2.g - color1.g) * ratio + color1.g);
let b = Math.floor((color2.b - color1.b) * ratio + color1.b);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
Here is the code shading rectangles: https://jsfiddle.net/q7kLszud/

Spring physics equilibrium always moving to left

I have the following mesh which is generated by random points and creating triangles using Delaunay triangulation. Then I apply spring force per triangle on each of its vertices. But for some reason the equilibrium is always shifted to the left.
Here is a video of the behaviour:
https://youtu.be/gb5aj05zkIc
Why this is happening?
Here is the code for the physics:
for ( let i=0; i < mesh.geometry.faces.length; i++) {
let face = mesh.geometry.faces[i];
let a = mesh.geometry.vertices[face.a];
let b = mesh.geometry.vertices[face.b];
let c = mesh.geometry.vertices[face.c];
let p1 = Vertcies[face.a];
let p2 = Vertcies[face.b];
let p3 = Vertcies[face.c];
update_force_points(p1, p2, a, b);
update_force_points(p1, p3, a, c);
update_force_points(p2, p3, b, c);
}
function update_force_points(p1, p2, p1p, p2p) {
// get all the verticies
var dx = (p1.x - p2.x);
var dy = (p1.y - p2.y);
var len = Math.sqrt(dx*dx + dy*dy);
let fx = (ks * (len - r) * (dx/len)) + ((kd * p2.vx - p1.vx));
let fy = (ks * (len - r) * (dy/len)) + ((kd * p2.vy - p1.vy));
if ( ! p1.fixed ) {
p1.fx = (ks * (len - r) * (dx/len)) + ((kd * p2.vx - p1.vx));
p1.fy = (ks * (len - r) * (dy/len)) + ((kd * p2.vy - p1.vy));
}
if ( ! p2.fixed ) {
p2.fx = -1 * p1.fx;
p2.fy = -1 * p1.fy;
}
p1.vx += p1.fx / mass;
p1.vy += p1.fy / mass;
p2.vx += p2.fx / mass;
p2.vy += p2.fy / mass;
p1.x += p1.vx;
p1.y += p1.vy;
p2.x += p2.vx;
p2.y += p2.vy;
p1p.x = p1.x;
p1p.y = p1.y;
p2p.x = p2.x;
p2p.y = p2.y;
p2p.z = 0.0;
p1p.z = 0.0;
}

At the moment you're doing velocity calculations and assigning new positions at the same time, so the balance will change depending on the order that you cycle through points in. I would guess that points at the bottom left are either at the beginning of the vertex list, or at the end.
try doing all the p#.vx calculations linearly, then do a second pass where you just do p#.x += p#.vx
that way you calculate all necessary velocities based on a snapshot of where points were the previous frame, then you update their positions after all points have new velocities.
So do:
for(var i = 0; i < #; i++){
updateforces(bla,bla,bla) //don't assign position in here, just add forces to the velocity
}
for(var i =0; i < #; i++){
updateposition(bla,bla,bla)
}

Nokia Here Maps calculating the centroid of a polygon (e.g triangle) generates wrong results

As the topic says i have a polygon and want to calculate the center of mass (centroid). I take the geo-coordinates, transform them into pixel cooridinates use the formula found on http://en.wikipedia.org/wiki/Centroid and transform the the calculated pixels back into geo-coordinates.
The result seems just wrong (i can't post pictures). The relevant code snippet is:
this.drawPolygonCenter = function (mapService, coords) {
var sumY = 0;
var sumX = 0;
var partialSum = 0;
var sum = 0;
var cm = mapService.getCurrentMapReference();
var points = [];
coords.forEach(function (c, idx) {
points.push(cm.geoToPixel(c));
console.log("x: " + points[idx].x + " y: " + points[idx].y);
});
var n = points.length;
for (var i = 0; i < n - 1; i++) {
partialSum = points[i].x * points[i + 1].y - points[i + 1].x * points[i].y;
sum += partialSum;
sumX += (points[i].x + points[i + 1].x) * partialSum;
sumY += (points[i].y + points[i + 1].y) * partialSum;
}
var area = 0.5 * sum;
var div = 6 * area;
var x1 = sumX / div;
var y1 = sumY / div;
console.log("Centroid: x= " + x1 + " y= " + y1); // debug
var pinLocation = cm.pixelToGeo(Math.ceil(x1), Math.ceil(y1));
var pin = this.createCenterPin(pinLocation);
cm.objects.add(new nokia.maps.map.StandardMarker(pinLocation)); // debug

I reckon your calculation has a rounding error is due switching between pixels and lat/longs - there is no need to do this - you can work with lat/longs directly.
You can add a getCentroid() method to the Polygon class as shown:
nokia.maps.map.Polygon.prototype.getCentroid = function (arg) {
var signedArea = 0,
len = this.path.getLength(),
centroidLongitude = 0,
centroidLatitude = 0;
for (i=0; i < len; i++){
var a = this.path.get(i),
b = this.path.get( i + 1 < len ? i + 1 : 0);
signedArea +=
((a.longitude * b.latitude) - (b.longitude * a.latitude));
centroidLongitude += (a.longitude + b.longitude) *
((a.longitude * b.latitude) - (b.longitude * a.latitude));
centroidLatitude += (a.latitude + b.latitude) *
((a.longitude * b.latitude) - (b.longitude * a.latitude));
}
signedArea = signedArea /2;
centroidLongitude = centroidLongitude/ (6 * signedArea);
centroidLatitude = centroidLatitude/ (6 * signedArea);
return new nokia.maps.geo.Coordinate(centroidLatitude, centroidLongitude);
};
You can call polygon.getCentroid() (e.g. to add a marker) as follows:
map.objects.add(new nokia.maps.map.Marker(polygon.getCentroid()));
Note, you may still get some edge effects of your Polygon crosses the 180th meridian.(use the isIDL()method to check) . In this case you may need to add 360 to each latitude prior to making the calculations, and substract it from the final result.

Bitwise operations - what the heck is going on?

I've got the following JavaScript script for generating a 2D maze:
/*
* 3 June 2003, [[:en:User:Cyp]]:
* Maze, generated by my algorithm
* 24 October 2006, [[:en:User:quin]]:
* Source edited for clarity
* 25 January 2009, [[:en:User:DebateG]]:
* Source edited again for clarity and reusability
* 1 June 2009, [[:en:User:Nandhp]]:
* Source edited to produce SVG file when run from the command-line
* 7 January, 2011 [[:en:User:SharkD]]:
* Source converted to JavaScript
*
* This program was originally written by [[:en:User:Cyp]], who
* attached it to the image description page for an image generated by
* it on en.wikipedia. The image was licensed under CC-BY-SA-3.0/GFDL.
*/
/* Recreate a math function that exists in Java but not JavaScript. */
Math.nextInt = function (number) {
return Math.floor(Math.random() * number)
}
/* Recreate a system function that exists in Java but not JavaScript.
* Uncomment either WScript.Echo() or alert() depending on whether you are
* running the script from the Windows command-line or a Web page.
*/
function println(string)
{
// if inside Windows Scripting Host
WScript.Echo(string)
// if inside a Web page
// alert(string)
}
/* Define the bit masks */
var Constants =
{
WALL_ABOVE : 1,
WALL_BELOW : 2,
WALL_LEFT : 4,
WALL_RIGHT : 8,
QUEUED : 16,
IN_MAZE : 32
}
/* Construct a Maze with specified width, height, and cell_width */
function Maze(width, height, cell_width) {
if (width)
this.width = width;
else
this.width = 20;
if (height)
this.height = height;
else
this.height = 20;
if (cell_width)
this.cell_width = cell_width;
else
this.cell_width = 10;
this.maze = []
/* The maze generation algorithm. */
this.createMaze = function() {
var width = this.width
var height = this.height
var maze = this.maze
var x, y, n, d;
var dx = [ 0, 0, -1, 1 ];
var dy = [ -1, 1, 0, 0 ];
var todo = new Array(height * width);
var todonum = 0;
/* We want to create a maze on a grid. */
/* We start with a grid full of walls. */
for (x = 0; x < width; ++x) {
maze[x] = []
for (y = 0; y < height; ++y) {
if (x == 0 || x == width - 1 || y == 0 || y == height - 1) {
maze[x][y] = Constants.IN_MAZE;
}
else {
maze[x][y] = 63;
}
}
}
/* Select any square of the grid, to start with. */
x = 1 + Math.nextInt(width - 2);
y = 1 + Math.nextInt(height - 2);
/* Mark this square as connected to the maze. */
maze[x][y] &= ~48;
/* Remember the surrounding squares, as we will */
for (d = 0; d < 4; ++d) {
if ((maze[x + dx[d]][y + dy[d]] & Constants.QUEUED) != 0) {
/* want to connect them to the maze. */
todo[todonum++] = ((x + dx[d]) << Constants.QUEUED) | (y + dy[d]);
maze[x + dx[d]][y + dy[d]] &= ~Constants.QUEUED;
}
}
/* We won't be finished until all is connected. */
while (todonum > 0) {
/* We select one of the squares next to the maze. */
n = Math.nextInt(todonum);
x = todo[n] >> 16; /* the top 2 bytes of the data */
y = todo[n] & 65535; /* the bottom 2 bytes of the data */
/* We will connect it, so remove it from the queue. */
todo[n] = todo[--todonum];
/* Select a direction, which leads to the maze. */
do {
d = Math.nextInt(4);
}
while ((maze[x + dx[d]][y + dy[d]] & Constants.IN_MAZE) != 0);
/* Connect this square to the maze. */
maze[x][y] &= ~((1 << d) | Constants.IN_MAZE);
maze[x + dx[d]][y + dy[d]] &= ~(1 << (d ^ 1));
/* Remember the surrounding squares, which aren't */
for (d = 0; d < 4; ++d) {
if ((maze[x + dx[d]][y + dy[d]] & Constants.QUEUED) != 0) {
/* connected to the maze, and aren't yet queued to be. */
todo[todonum++] = ((x + dx[d]) << Constants.QUEUED) | (y + dy[d]);
maze[x + dx[d]][y + dy[d]] &= ~Constants.QUEUED;
}
}
/* Repeat until finished. */
}
/* Add an entrance and exit. */
maze[1][1] &= ~Constants.WALL_ABOVE;
maze[width - 2][height - 2] &= ~Constants.WALL_BELOW;
}
/* Called to write the maze to an SVG file. */
this.printSVG = function () {
println("<svg width=\"" + (width * cell_width) + "\" height=\"" + (height*cell_width) + "\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n"
+ " <g stroke=\"black\" stroke-width=\"1\" stroke-linecap=\"round\">\n" + this.drawMaze() + " </g>\n</svg>\n");
}
/* Main maze-drawing loop. */
this.drawMaze = function () {
var x, y;
var width = this.width;
var height = this.height;
var cell_width = this.cell_width
var outstring = ""
for (x = 1; x < width - 1; ++x) {
for (y = 1; y < height - 1; ++y) {
if ((this.maze[x][y] & Constants.WALL_ABOVE) != 0)
outstring += this.drawLine(x * cell_width, y * cell_width, (x + 1) * cell_width, y * cell_width);
if ((this.maze[x][y] & Constants.WALL_BELOW) != 0)
outstring += this.drawLine(x * cell_width, (y + 1) * cell_width, (x + 1) * cell_width, (y + 1) * cell_width);
if ((this.maze[x][y] & Constants.WALL_LEFT) != 0)
outstring += this.drawLine(x * cell_width, y * cell_width, x * cell_width, (y + 1) * cell_width);
if ((this.maze[x][y] & Constants.WALL_RIGHT) != 0)
outstring += this.drawLine((x + 1) * cell_width, y * cell_width, (x + 1) * cell_width, (y + 1) * cell_width);
}
}
return outstring
}
/* Draw a line, either in the SVG file or on the screen. */
this.drawLine = function (x1, y1, x2, y2) {
return " <line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n";
}
}
/* Initialization method that will be called when the program is
* run from the command-line. Maze will be written as SVG file. */
function main(args) {
var m = new Maze();
m.createMaze();
m.printSVG();
}
/* execute the program */
main()
I would like to extend the script such that it creates a six axis 3D maze. However, in order to do so I have to understand the bitwise operations and what they are being used for. Could someone please explain to me why the original author chose to use bitwise operations, and what it is exactly they are doing in the script?
Thanks!
[edit - conclusion]
Since the problem is now solved, FYI here's the 3D version of the script:
/*
* 3 June 2003, [[:en:User:Cyp]]:
* Maze, generated by my algorithm
* 24 October 2006, [[:en:User:quin]]:
* Source edited for clarity
* 25 January 2009, [[:en:User:DebateG]]:
* Source edited again for clarity and reusability
* 1 June 2009, [[:en:User:Nandhp]]:
* Source edited to produce SVG file when run from the command-line
* 7 January, 2011 [[:en:User:SharkD]]:
* Source converted to JavaScript and third axis added
*
* This program was originally written by [[:en:User:Cyp]], who
* attached it to the image description page for an image generated by
* it on en.wikipedia. The image was licensed under CC-BY-SA-3.0/GFDL.
*/
/* Recreate a math function that exists in Java but not JavaScript. */
Math.nextInt = function (number) {
return Math.floor(Math.random() * number)
}
/* Recreate a system function that exists in Java but not JavaScript.
* Uncomment either WScript.Echo() or alert() depending on whether you are
* running the script from the Windows command-line or a Web page.
*/
function println(string)
{
// if inside Windows Scripting Host
WScript.Echo(string)
// if inside a Web page
// alert(string)
}
/* Define the bit masks */
var WALL_ABOVE = 1;
var WALL_BELOW = 2;
var WALL_LEFT = 4;
var WALL_RIGHT = 8;
var WALL_FRONT = 16;
var WALL_BACK = 32;
var QUEUED = 64;
var IN_MAZE = 128;
/* Construct a Maze with specified lenx, leny, and cell_width */
function Maze(lenx, leny, lenz, cell_width) {
if (lenx)
this.lenx = lenx;
else
this.lenx = 20;
if (leny)
this.leny = leny;
else
this.leny = 20;
if (lenz)
this.lenz = lenz;
else
this.lenz = 8;
if (cell_width)
this.cell_width = cell_width;
else
this.cell_width = 10;
this.maze = []
/* The maze generation algorithm. */
this.createMaze = function() {
var lenx = this.lenx
var leny = this.leny
var lenz = this.lenz
var maze = this.maze
var x, y, z, n, d;
var dx = [ 0, 0, -1, 1, 0, 0 ];
var dy = [ -1, 1, 0, 0, 0, 0 ];
var dz = [ 0, 0, 0, 0, -1, 1 ];
var todo = new Array(leny * lenx * lenz);
var todonum = 0;
/* We want to create a maze on a grid. */
/* We start with a grid full of walls. */
/* Except for the outer walls which are left open? */
for (x = 0; x < lenx; ++x) {
maze[x] = []
for (y = 0; y < leny; ++y) {
maze[x][y] = []
for (z = 0; z < lenz; ++z)
{
if (x == 0 || x == lenx - 1 || y == 0 || y == leny - 1 || z == 0 || z == lenz - 1) {
maze[x][y][z] = IN_MAZE;
}
else {
maze[x][y][z] = WALL_ABOVE + WALL_BELOW + WALL_LEFT + WALL_RIGHT + WALL_FRONT + WALL_BACK + QUEUED + IN_MAZE; // DUNNO!!!! 255
}
}
}
}
/* Select random square of the grid, to start with. */
x = 1 + Math.nextInt(lenx - 2);
y = 1 + Math.nextInt(leny - 2);
z = 1 + Math.nextInt(lenz - 2);
/* Mark this square as connected to the maze. */
maze[x][y][z] &= ~(QUEUED + IN_MAZE);
/* Remember the surrounding squares, as we will... */
for (d = 0; d < 6; ++d) {
if ((maze[x + dx[d]][y + dy[d]][z + dz[d]] & QUEUED) != 0) {
/* ...want to connect them to the maze. */
todo[todonum++] = [x + dx[d], y + dy[d], z + dz[d]];
maze[x + dx[d]][y + dy[d]][z + dz[d]] &= ~QUEUED;
}
}
/* We won't be finished until all is connected. */
while (todonum > 0) {
/* We select one of the squares next to the maze. */
n = Math.nextInt(todonum);
x = todo[n][0];
y = todo[n][1];
z = todo[n][2];
/* We will connect it, so remove it from the queue. */
todo[n] = todo[--todonum];
/* Select a random direction, which leads to the maze. */
do {
d = Math.nextInt(6);
}
while ((maze[x + dx[d]][y + dy[d]][z + dz[d]] & IN_MAZE) != 0);
/* Connect this square to the maze. */
maze[x][y][z] &= ~((1 << d) | IN_MAZE);
maze[x + dx[d]][y + dy[d]][z + dz[d]] &= ~(1 << (d ^ 1));
/* Remember the surrounding squares, which aren't... */
for (d = 0; d < 6; ++d) {
if ((maze[x + dx[d]][y + dy[d]][z + dz[d]] & QUEUED) != 0) {
/* ...connected to the maze, and aren't yet queued to be. */
todo[todonum++] = [x + dx[d], y + dy[d], z + dz[d]];
maze[x + dx[d]][y + dy[d]][z + dz[d]] &= ~QUEUED;
}
}
/* Repeat until finished. */
}
/* Add an entrance and exit. */
maze[1][1][1] &= ~WALL_ABOVE;
maze[lenx - 2][leny - 2][lenz - 2] &= ~WALL_BELOW;
}
/* Called to write the maze to an SVG file. */
this.printSVG = function () {
println("<svg lenx=\"" + (lenx * cell_width) + "\" leny=\"" + (leny * lenz * cell_width) + "\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n"
+ " <g stroke=\"black\" stroke-lenx=\"1\" stroke-linecap=\"round\">\n" + this.drawMaze() + " </g>\n</svg>\n");
}
/* Main maze-drawing loop. */
this.drawMaze = function () {
var x, y, z;
var lenx = this.lenx;
var leny = this.leny;
var lenz = this.lenz;
var cell_width = this.cell_width
var outstring = ""
for (x = 1; x < lenx - 1; ++x) {
for (y = 1; y < leny - 1; ++y) {
for (z = 1; z < lenz - 1; ++z) {
var z_pos = z * leny * cell_width;
if ((this.maze[x][y][z] & WALL_ABOVE) != 0)
outstring += this.drawLine
(
x * cell_width,
y * cell_width + z_pos,
(x + 1) * cell_width,
y * cell_width + z_pos
);
if ((this.maze[x][y][z] & WALL_BELOW) != 0)
outstring += this.drawLine
(
x * cell_width,
(y + 1) * cell_width + z_pos,
(x + 1) * cell_width,
(y + 1) * cell_width + z_pos
);
if ((this.maze[x][y][z] & WALL_LEFT) != 0)
outstring += this.drawLine
(
x * cell_width,
y * cell_width + z_pos,
x * cell_width,
(y + 1) * cell_width + z_pos
);
if ((this.maze[x][y][z] & WALL_RIGHT) != 0)
outstring += this.drawLine
(
(x + 1) * cell_width,
y * cell_width + z_pos,
(x + 1) * cell_width,
(y + 1) * cell_width + z_pos
);
if ((this.maze[x][y][z] & WALL_FRONT) != 0)
outstring += this.drawLine
(
x * cell_width + cell_width/3,
(y + 1) * cell_width - cell_width/3 + z_pos,
(x + 1) * cell_width - cell_width/3,
y * cell_width + cell_width/3 + z_pos
);
if ((this.maze[x][y][z] & WALL_BACK) != 0)
outstring += this.drawLine
(
x * cell_width + cell_width/3,
y * cell_width + cell_width/3 + z_pos,
(x + 1) * cell_width - cell_width/3,
(y + 1) * cell_width - cell_width/3 + z_pos
);
}
}
}
return outstring
}
/* Draw a line, either in the SVG file or on the screen. */
this.drawLine = function (x1, y1, x2, y2) {
return " <line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n";
}
}
/* Initialization method that will be called when the program is
* run from the command-line. Maze will be written as SVG file. */
function main(args) {
var m = new Maze();
m.createMaze();
m.printSVG();
}
/* execute the program */
main()

The most common reason to use bitwise operations is because they are fast and allow for compact storage of information in integers.
That said, this script appears to be using them as flags on each square in the grid.
Take a look at the following code:
/* Define the bit masks */
var Constants =
{
WALL_ABOVE : 1,
WALL_BELOW : 2,
WALL_LEFT : 4,
WALL_RIGHT : 8,
QUEUED : 16,
IN_MAZE : 32
}
Each of these constants occupies one bit in an integer. To check if the flag is set, all you need to do is determine if its bit location is set to 1 (typically by ANDing with that number and comparing to 0). To set a flag, you simply set that bit value (typically by ORing with the number). This is what the bitwise operators are doing.