p5.raycaster
Version:
a simple p5js library for semi 3d rendering with ray casting
143 lines (116 loc) • 5.05 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: TransparentWall.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: TransparentWall.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import Camera from "./Camera";
/**
* transparent wall is drawn like Sprite
*/
class TransparentWall {
/**
*
* @param {Camera} camera
* @param {number} x x coordinate in map
* @param {number} y y coordinate in map
* @param {number} side
* @param {number} screenX screen strip containing this wall
* @param {number} texC entry to look up for texture
*/
constructor(camera, x, y, side, screenX, texC) {
this.mapX = x;
this.mapY = y;
this.camera = camera;
this.side = side;
this.screenX = [screenX]
this.tex = texC
}
/**
*
* @param {number} x
* @param {number} side
* @param {Array} cameraXCoords the loop up table for cameraX
*/
getRayDir(x, side, cameraXCoords) {
if (!cameraXCoords) cameraXCoords = this.camera.cameraXCoords;
if (side === 1) {
return this.camera.dir.y + this.camera.plane.y * cameraXCoords[x];
} else {
return this.camera.dir.x + this.camera.plane.x * cameraXCoords[x];
}
}
/**
* get perpendicular distance between camera and the wall
* @param {number} x
*/
getPerpDist(x) {
let step = 1;
let rayDir = this.getRayDir(x, this.side);
if (rayDir < 0) { step = -1 }
if (this.side === 1) {
return (this.mapY - this.camera.pos.y + (0.5 * step) + (1 - step) / 2) / rayDir;
} else {
return (this.mapX - this.camera.pos.x + (0.5 * step) + (1 - step) / 2) / rayDir;
}
}
/**
*
* @param {p5.Renderer} canvas
* @param {number} verticalAdjustment
*/
display(canvas, verticalAdjustment) {
const p = canvas._isMainCanvas ? canvas._pInst : canvas;
const texture = this.camera.world.textureMap.get(this.tex);
p.push();
p.drawingContext.globalAlpha = 0.5;
for (let x = this.screenX[0]; x < this.screenX[0] + this.screenX.length; x++) {
let prepDist = this.getPerpDist(x);
let lineHeight = Math.round(canvas.height / prepDist);
let baseline = (0.5 + verticalAdjustment) * canvas.height;
let drawStart = baseline - lineHeight / 2;
let wallX;
if (this.side === 0) {
wallX = this.camera.pos.y + prepDist * this.getRayDir(x, 1);
} else if (this.side === 1) {
wallX = this.camera.pos.x + prepDist * this.getRayDir(x, 0);
}
wallX -= Math.floor(wallX);
if (typeof texture === "string") {
p.stroke(texture);
p.line(x, drawStart, x, drawStart + lineHeight);
} else {
let texX = Math.floor(wallX * texture.width);
p.image(texture, x, drawStart, 1, lineHeight, texX, 0, 1, texture.height);
}
}
p.pop()
}
}
export default TransparentWall;</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Camera.html">Camera</a></li><li><a href="KeyboardControl.html">KeyboardControl</a></li><li><a href="MouseControl.html">MouseControl</a></li><li><a href="PointerLockControl.html">PointerLockControl</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="TransparentWall.html">TransparentWall</a></li><li><a href="Util.html">Util</a></li><li><a href="World.html">World</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createCamera">createCamera</a></li><li><a href="global.html#createSkyBox">createSkyBox</a></li><li><a href="global.html#createSprite">createSprite</a></li><li><a href="global.html#createTextureMap">createTextureMap</a></li><li><a href="global.html#createWorld">createWorld</a></li><li><a href="global.html#initKeyboardControl">initKeyboardControl</a></li><li><a href="global.html#initMouseControl">initMouseControl</a></li><li><a href="global.html#initPointerLockControl">initPointerLockControl</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Feb 01 2024 12:26:09 GMT+0000 (Greenwich Mean Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>