LMcAlpine · LMcAlpine · Sep 9, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023
diff --git a/canvasutils.js b/canvasutils.js
@@ -13,6 +13,9 @@ const HALFHEIGHT = this.canvasHeight / 2;
 const FOV = 90;
 const HALFFOV = FOV / 2;
 
+let traverseBSP;
+let traverseCount = 0;
+
 const SCREENDISTANCE = HALFWIDTH / Math.tan(degreesToRadians(HALFFOV));
 
 function calculateScale2D(maxX, minX, maxY, minY) {
@@ -122,22 +125,26 @@ function getRandomInt(min, max, seed) {
 }
 
 function angleToX(angle) {
+  let SCREENDISTANCE = gameEngine.canvas.canvasWidth / 2.0 + 1.0;
   let x = 0;
   if (angle > 90) {
     angle = new Angle(angle - 90);
 
     x =
-      HALFWIDTH -
-      Math.trunc(Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE);
+      SCREENDISTANCE - Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE;
   } else {
     angle = Angle.subtract(90, angle);
-    x = Math.trunc(Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE);
-    x += HALFWIDTH;
+    x = Math.tan(degreesToRadians(angle.angle)) * SCREENDISTANCE;
+    x += SCREENDISTANCE;
   }
-  return x;
+  return Math.floor(x);
 }
 
 function getXToAngle(x) {
   let angleRad = Math.atan((HALFWIDTH - x) / SCREENDISTANCE);
   return angleRad * (180 / Math.PI); // Convert radians to degrees
 }
+
+function areCloseEnough(a, b, epsilon = 1e-6) {
+  return Math.abs(a - b) < epsilon;
+}
diff --git a/engine/main.js b/engine/main.js
@@ -17,6 +17,10 @@ document
     const levelParser = new LevelParser(lumpData);
     const levels = levelParser.parse("E1M1");
 
+    gameEngine.lumpData = lumpData;
+    // const flats = new Flats();
+    // gameEngine.flat = flats;
+
     const palette = new ReadPalette(lumpData);
 
     gameEngine.palette = palette;

diff --git a/index.html b/index.html
@@ -8,24 +8,29 @@
   </head>
 
   <body>
-    <canvas
-      id="myCanvas"
-      width="800"
-      height="600"
-      style="background: black"
-      tabindex="0"
-      autofocus
-    ></canvas>
-    <input type="file" accept=".wad" id="fileInput" />
-
+    <div class="window">
+      <canvas
+        id="myCanvas"
+        width="640"
+        height="400"
+        style="background: black"
+        tabindex="0"
+        autofocus
+      ></canvas>
+      <div class="uploadBox">
+        <input type="file" accept=".wad" id="fileInput" />
+      </div>
+    </div>
+
+    <link rel="stylesheet" href="style.css" />
     <script src="player.js"></script>
     <script src="canvasutils.js"></script>
 
     <script src="./world/bsptraversal.js"></script>
     <script src="./world/levelmanager.js"></script>
     <script src="./world/subsector.js"></script>
 
-
+    <script src="./wad/flats.js"></script>
     <script src="./wad/textures.js"></script>
     <script src="./wad/readpalette.js"></script>
     <script src="./wad/patchnames.js"></script>

diff --git a/player.js b/player.js
@@ -15,11 +15,15 @@ class Player {
     this.x = location.xPosition;
     this.y = location.yPosition;
 
+    // this.x = 1391.0860290527344;
+    // this.y = -2502.269790649414;
+
     this.minX = minX;
     this.minY = minY;
     this.scaleX = scaleX;
     this.scaleY = scaleY;
     this.direction = location.direction;
+    // this.direction = 0.26;
 
     this.fov = fov;
 
@@ -89,9 +93,9 @@ class Player {
    * Method to update the state of the player for each frame.
    */
   update() {
-    console.log("x: " + this.x);
-    console.log("y ;" + this.y);
-    console.log("angle: " + this.direction);
+    // console.log("x: " + this.x);
+    // console.log("y ;" + this.y);
+    // console.log("angle: " + this.direction);
     const multiplier = 550;
     const magRotation = 0.1875 * multiplier;
 
@@ -138,15 +142,15 @@ class Player {
       this.direction -= magRotation * gameEngine.clockTick;
     }
 
-    // this.height = gameEngine.levelManager.getPlayerSubsectorHeight() + 41;
-    let floorHeight = gameEngine.levelManager.getPlayerSubsectorHeight();
-    if (this.height < floorHeight + 41) {
-      this.height += 0.4 * (floorHeight + 41 - this.height);
-      this.zVel = 0;
-    } else {
-      this.zVel -= 0.9;
-      this.height += Math.max(-15.0, this.zVel);
-    }
+    this.height = gameEngine.levelManager.getPlayerSubsectorHeight() + 41;
+    //   let floorHeight = gameEngine.levelManager.getPlayerSubsectorHeight();
+    //   if (this.height < floorHeight + 41) {
+    //     this.height += 0.4 * (floorHeight + 41 - this.height);
+    //     this.zVel = 0;
+    //   } else {
+    //     this.zVel -= 0.9;
+    //     this.height += Math.max(-15.0, this.zVel);
+    //   }
   }
 
   /**

diff --git a/render/canvas.js b/render/canvas.js
@@ -116,6 +116,73 @@ class Canvas {
   //   }
   // }
 
+  drawFlatToScreen(offscreenCtx, texture, x, y1, y2, lightLevel, worldZ) {
+    if (y1 < y2) {
+      if (texture === "F_SKY1") {
+        // let textureColumn = gameEngine.player.direction + getXToAngle(x);
+        // let skyAlt = 50;
+        // let skyInverseScale = HALFWIDTH / this.canvasWidth;
+        // this.drawWallCol(
+        //   offscreenCtx,
+        //   { width: 64, height: 64 },
+        //   textureColumn,
+        //   x,
+        //   y1,
+        //   y2,
+        //   skyAlt,
+        //   skyInverseScale,
+        //   1
+        // );
+      } else {
+        // Assuming 64x64 texture, fetching entire texture's data.
+        //let flatTex = offscreenCtx.getImageData(0, 0, 64, 64);
+
+        // Call the drawFlatColumn method to process the column data.
+        this.drawFlatColumn(offscreenCtx, x, y1, y2, lightLevel, worldZ);
+      }
+    }
+  }
+
+  drawFlatColumn(offscreenCtx, x, y1, y2, lightLevel, worldZ) {
+    let playerDirectionX = Math.cos(
+      degreesToRadians(gameEngine.player.direction)
+    );
+    let playerDirectionY = Math.sin(
+      degreesToRadians(gameEngine.player.direction)
+    );
+
+    const columnData = offscreenCtx.getImageData(x, y1, 1, y2 - y1);
+    const entireTextureData = offscreenCtx.getImageData(0, 0, 64, 64).data;
+
+    for (let i = y1; i <= y2; i++) {
+      let z = (HALFWIDTH * worldZ) / (HALFHEIGHT - i);
+
+      let px = playerDirectionX * z + gameEngine.player.x;
+      let py = playerDirectionY * z + gameEngine.player.y;
+
+      let leftX = -playerDirectionY * z + px;
+      let leftY = playerDirectionX * z + py;
+      let rightX = playerDirectionY * z + px;
+      let rightY = -playerDirectionX * z + py;
+
+      let dx = (rightX - leftX) / this.canvasWidth;
+      let dy = (rightY - leftY) / this.canvasWidth;
+
+      let tx = Math.trunc(leftX + dx * x) & 63;
+      let ty = Math.trunc(leftY + dy * x) & 63;
+
+      const texPos = (ty * 64 + tx) * 4;
+
+      columnData.data[(i - y1) * 4] = entireTextureData[texPos] * lightLevel;
+      columnData.data[(i - y1) * 4 + 1] =
+        entireTextureData[texPos + 1] * lightLevel;
+      columnData.data[(i - y1) * 4 + 2] =
+        entireTextureData[texPos + 2] * lightLevel;
+      columnData.data[(i - y1) * 4 + 3] = 255; // Assuming full alpha
+    }
+    this.ctx.putImageData(columnData, x, y1);
+  }
+
   drawWallCol(
     offscreenCtx,
     texture,
@@ -142,7 +209,8 @@ class Canvas {
 
       let textureY = textureAlt + (y1 - HALFHEIGHT) * invScale;
 
-      for (let i = 0; i < columnData.data.length; i += 4) {
+      const length = columnData.data.length;
+      for (let i = 0; i < length; i += 4) {
         const texY = Math.trunc(textureY) % textureHeight;
         const texPos = (texY * textureWidth + textureColumn) * 4;
 
@@ -154,6 +222,7 @@ class Canvas {
         textureY += invScale;
       }
 
+      // this.ctx.imageSmoothingEnabled = false;
       this.ctx.putImageData(columnData, x, y1);
     }
   }