p5.raycaster
Version:
a simple p5js library for semi 3d rendering with ray casting
2,386 lines (636 loc) • 32.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Global</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">Global</h1>
<section>
<header>
<h2></h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="createCamera"><span class="type-signature"></span>createCamera<span class="signature">(pos, dir, fov, world<span class="signature-attributes">opt</span>, canvas<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pos</code></td>
<td class="type">
<span class="param-type">Vector</span>
</td>
<td class="attributes">
</td>
<td class="description last">camera position, {x,y} or a p5.Vector object</td>
</tr>
<tr>
<td class="name"><code>dir</code></td>
<td class="type">
<span class="param-type">Vector</span>
</td>
<td class="attributes">
</td>
<td class="description last">camera facing direction, {x,y} or a p5.Vector object, should be normalized</td>
</tr>
<tr>
<td class="name"><code>fov</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last">field of view of the camera</td>
</tr>
<tr>
<td class="name"><code>world</code></td>
<td class="type">
<span class="param-type"><a href="World.html">World</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">the world that the camera attached to</td>
</tr>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">P5.Renderer</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">the canvas that the camera render to, can be the main canvas or a p5.Graphics object</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line95">line 95</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a new camera object
</div>
<h4 class="name" id="createSkyBox"><span class="type-signature"></span>createSkyBox<span class="signature">(sky, ground, front<span class="signature-attributes">opt</span>, middle<span class="signature-attributes">opt</span>, back<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
create a skyBox object
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>sky</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">a string notation of color or a p5.Image object</td>
</tr>
<tr>
<td class="name"><code>ground</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">a string notation of color or a p5.Image object</td>
</tr>
<tr>
<td class="name"><code>front</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">can be a p5.Graphics object</td>
</tr>
<tr>
<td class="name"><code>middle</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">can be a p5.Graphics object</td>
</tr>
<tr>
<td class="name"><code>back</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">a p5.Graphics object</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line34">line 34</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a skyBox object
</div>
<h4 class="name" id="createSprite"><span class="type-signature"></span>createSprite<span class="signature">(spriteSourceImage, position, width, height, angle<span class="signature-attributes">opt</span>, yAdjustment<span class="signature-attributes">opt</span>, animationGap<span class="signature-attributes">opt</span>, p5Inst<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>spriteSourceImage</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>position</code></td>
<td class="type">
<span class="param-type">Vector</span>
</td>
<td class="attributes">
</td>
<td class="description last">{x, y} or a p5.Vector object</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>angle</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">optional</td>
</tr>
<tr>
<td class="name"><code>yAdjustment</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">optional [-0.5, 0.5] -0.5 ~ 0.5, negative number will make the sprite appear lower and positive number will make it appear higher</td>
</tr>
<tr>
<td class="name"><code>animationGap</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">optional number of frame for before change to the next animation</td>
</tr>
<tr>
<td class="name"><code>p5Inst</code></td>
<td class="type">
<span class="param-type">p5</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">optional, needed when using p5 instance mode</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line82">line 82</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a Sprite object
</div>
<h4 class="name" id="createTextureMap"><span class="type-signature"></span>createTextureMap<span class="signature">(blockType, texture)</span><span class="type-signature"></span></h4>
<div class="description">
input should be pairs of number and p5.Image object
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>blockType</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>texture</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="description last">can also be p5.Graphics objects or a css string (single color)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line14">line 14</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
the texture map
</div>
<h4 class="name" id="createWorld"><span class="type-signature"></span>createWorld<span class="signature">(width, height, data<span class="signature-attributes">opt</span>, textureMap<span class="signature-attributes">opt</span>, skyBox<span class="signature-attributes">opt</span>, typeTable<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
create a World object
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last">integer indicating the width of the world (number of block)</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last">integer indicating the height of the world (number of block)</td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">block data for the world, e.g. "0,1,0,0,0,0,1,2,0,0,0,0...", can be an array of integer instead]</td>
</tr>
<tr>
<td class="name"><code>textureMap</code></td>
<td class="type">
<span class="param-type">Map</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">[[0, texture], [1, texture], ...]</td>
</tr>
<tr>
<td class="name"><code>skyBox</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">sky box
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>sky</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">a string notation of color or a p5.Image object</td>
</tr>
<tr>
<td class="name"><code>ground</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">a string notation of color or a p5.Image object</td>
</tr>
<tr>
<td class="name"><code>front</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">can be a p5.Graphics object</td>
</tr>
<tr>
<td class="name"><code>middle</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">can be a p5.Graphics object</td>
</tr>
<tr>
<td class="name"><code>back</code></td>
<td class="type">
<span class="param-type">p5.Image</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">can be a p5.Graphics object</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>typeTable</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">block type table to interpret the data, default to the default table</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>doorSpeed</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">how fast the door open and close, default to 0.01;</td>
</tr>
<tr>
<td class="name"><code>doorAutoClose</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">will the door close by it self, default to false;</td>
</tr>
<tr>
<td class="name"><code>doorClosingTime</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">if doorAutoClose is true, define how long the door will be open</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line65">line 65</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a new World object
</div>
<h4 class="name" id="initKeyboardControl"><span class="type-signature"></span>initKeyboardControl<span class="signature">(keyMap<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>keyMap</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line104">line 104</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a new keyboard control object
</div>
<h4 class="name" id="initMouseControl"><span class="type-signature"></span>initMouseControl<span class="signature">(ele<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>ele</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">element that the controller binds to</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line113">line 113</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a new mouse control object
</div>
<h4 class="name" id="initPointerLockControl"><span class="type-signature"></span>initPointerLockControl<span class="signature">(camera, ele)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>camera</code></td>
<td class="type">
<span class="param-type"><a href="Camera.html">Camera</a></span>
</td>
<td class="description last">the camera to be controlled</td>
</tr>
<tr>
<td class="name"><code>ele</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">element that the controller binds to</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="p5.RayCaster.js.html">p5.RayCaster.js</a>, <a href="p5.RayCaster.js.html#line123">line 123</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
a new pointerlock control object
</div>
</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>