p5.raycaster

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Class: Camera</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <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">Class: Camera</h1> <section> <header> <h2><span class="attribs"><span class="type-signature"></span></span>Camera<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></h2> <div class="class-description">class for camera</div> </header> <article> <div class="container-overview"> <h2>Constructor</h2> <h4 class="name" id="Camera"><span class="type-signature"></span>new Camera<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>Default</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="default"> </td> <td class="description last">{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="default"> </td> <td class="description last">{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="default"> </td> <td class="description last"></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="default"> null </td> <td class="description last">world that the camera is in</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="default"> null </td> <td class="description last">the canvas this camera to draw on, can be the main p5 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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line7">line 7</a> </li></ul></dd> </dl> </div> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="attachToWorld"><span class="type-signature"></span>attachToWorld<span class="signature">(world)</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>world</code></td> <td class="type"> <span class="param-type"><a href="World.html">World</a></span> </td> <td class="description last">the world to attach the camera</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line128">line 128</a> </li></ul></dd> </dl> <h4 class="name" id="closeDoor"><span class="type-signature"></span>closeDoor<span class="signature">()</span><span class="type-signature"></span></h4> <div class="description"> close the door the camera facing </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line253">line 253</a> </li></ul></dd> </dl> <h4 class="name" id="move"><span class="type-signature"></span>move<span class="signature">(movement)</span><span class="type-signature"></span></h4> <div class="description"> move the camera in the world </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>movement</code></td> <td class="type"> <span class="param-type">Vector</span> </td> <td class="description last">{x,y} or a p5.Vector object</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line189">line 189</a> </li></ul></dd> </dl> <h4 class="name" id="moveDoor"><span class="type-signature"></span>moveDoor<span class="signature">()</span><span class="type-signature"></span></h4> <div class="description"> move the door the camera facing </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line271">line 271</a> </li></ul></dd> </dl> <h4 class="name" id="openDoor"><span class="type-signature"></span>openDoor<span class="signature">()</span><span class="type-signature"></span></h4> <div class="description"> open the door (or push wall) the camera facing </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line235">line 235</a> </li></ul></dd> </dl> <h4 class="name" id="removeFromWorld"><span class="type-signature"></span>removeFromWorld<span class="signature">()</span><span class="type-signature"></span></h4> <div class="description"> remove the camera to the attached world </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line136">line 136</a> </li></ul></dd> </dl> <h4 class="name" id="renderFloorAndCeiling"><span class="type-signature"></span>renderFloorAndCeiling<span class="signature">(floor<span class="signature-attributes">opt</span>, ceiling<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>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>floor</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last">render ray casting floor ?</td> </tr> <tr> <td class="name"><code>ceiling</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last">render ray casting ceiling?</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="default"> this.canvas </td> <td class="description last">a p5.Renderer (for main canvas) or p5.Graphics</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line540">line 540</a> </li></ul></dd> </dl> <h4 class="name" id="renderFrame"><span class="type-signature"></span>renderFrame<span class="signature">(canvas)</span><span class="type-signature"></span></h4> <div class="description"> render sky box and ray casting content </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>canvas</code></td> <td class="type"> <span class="param-type">p5.Renderer</span> </td> <td class="description last">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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line954">line 954</a> </li></ul></dd> </dl> <h4 class="name" id="renderMiniMap"><span class="type-signature"></span>renderMiniMap<span class="signature">(size, canvasX, canvasY, renderWidth, renderHeight, canvas<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> minimap will always center around current camera position </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>size</code></td> <td class="type"> <span class="param-type">Vector</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">how many block around camera to be drawn {x:on left and right, y: on top and button}</td> </tr> <tr> <td class="name"><code>canvasX</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">where to draw the minimap on canvas</td> </tr> <tr> <td class="name"><code>canvasY</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">where to draw the minimap on canvas</td> </tr> <tr> <td class="name"><code>renderWidth</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">size of the minimap on canvas</td> </tr> <tr> <td class="name"><code>renderHeight</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">size of the minimap on canvas</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="default"> this.canvas </td> <td class="description last">a p5.Renderer (for main canvas) or p5.Graphics</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line295">line 295</a> </li></ul></dd> </dl> <h4 class="name" id="renderRayCasting"><span class="type-signature"></span>renderRayCasting<span class="signature">(noSprites<span class="signature-attributes">opt</span>, canvas<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> render the ray casting content </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>noSprites</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> false </td> <td class="description last">if true, do not render sprites</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="default"> this.canvas </td> <td class="description last">a p5.Renderer (for main canvas) or p5.Graphics</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line595">line 595</a> </li></ul></dd> </dl> <h4 class="name" id="renderSkyBox"><span class="type-signature"></span>renderSkyBox<span class="signature">(sky<span class="signature-attributes">opt</span>, ground<span class="signature-attributes">opt</span>, canvas<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> render sky box </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">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last">if true, render sky</td> </tr> <tr> <td class="name"><code>ground</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last">if true, render ground</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="default"> this.canvas </td> <td class="description last">a p5.Renderer (for main canvas) or p5.Graphics</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line450">line 450</a> </li></ul></dd> </dl> <h4 class="name" id="rotate"><span class="type-signature"></span>rotate<span class="signature">(angle)</span><span class="type-signature"></span></h4> <div class="description"> rotate the camera by an angle </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>angle</code></td> <td class="type"> <span class="param-type">number</span> </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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line206">line 206</a> </li></ul></dd> </dl> <h4 class="name" id="setMiniMapRenderOptions"><span class="type-signature"></span>setMiniMapRenderOptions<span class="signature">(options)</span><span class="type-signature"></span></h4> <div class="description"> set the option on how the minimap should be rendered this function will not copy the options object for all the options see the miniMapOption section on readme.md </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>options</code></td> <td class="type"> <span class="param-type">object</span> </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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line157">line 157</a> </li></ul></dd> </dl> <h4 class="name" id="teleportTo"><span class="type-signature"></span>teleportTo<span class="signature">(point, dir, world<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> teleport the camera to somewhere </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>point</code></td> <td class="type"> <span class="param-type">Vector</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last">{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="default"> </td> <td class="description last">{x,y} or a p5.Vector object, optional</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="default"> null </td> <td class="description last">optional</td> </tr> </tbody> </table> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line168">line 168</a> </li></ul></dd> </dl> <h4 class="name" id="tilt"><span class="type-signature"></span>tilt<span class="signature">(angle)</span><span class="type-signature"></span></h4> <div class="description"> tile the camera </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>angle</code></td> <td class="type"> <span class="param-type">number</span> </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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line216">line 216</a> </li></ul></dd> </dl> <h4 class="name" id="updateTiltingRange"><span class="type-signature"></span>updateTiltingRange<span class="signature">(min, max)</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>min</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last"></td> </tr> <tr> <td class="name"><code>max</code></td> <td class="type"> <span class="param-type">number</span> </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="Camera.js.html">Camera.js</a>, <a href="Camera.js.html#line227">line 227</a> </li></ul></dd> </dl> </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>