oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/utils/index.js | oxygen-core</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="Oxygen game engine (Xenon Core for browsers)"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="oxygen-core"><meta property="twitter:description" content="Oxygen game engine (Xenon Core for browsers)"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <img src="./image/search.png"> <input class="search-input"> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/PsichiX/Oxygen"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc">C<a href="class/src/index.js~EventsController.html">EventsController</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-lazyInitialization">lazyInitialization</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#asset-loaders">asset-loaders</a>C<a href="class/src/asset-loaders/AssemblyAsset.js~AssemblyAsset.html">AssemblyAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/AtlasAsset.js~AtlasAsset.html">AtlasAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/BinaryAsset.js~BinaryAsset.html">BinaryAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/FontAsset.js~FontAsset.html">FontAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ImageAsset.js~ImageAsset.html">ImageAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/JSONAsset.js~JSONAsset.html">JSONAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/MusicAsset.js~MusicAsset.html">MusicAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PackAsset.js~PackAsset.html">PackAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ParticleSystemAsset.js~ParticleSystemAsset.html">ParticleSystemAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PostprocessRackEffectAsset.js~PostprocessRackEffectAsset.html">PostprocessRackEffectAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SVGAsset.js~SVGAsset.html">SVGAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SceneAsset.js~SceneAsset.html">SceneAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SetAsset.js~SetAsset.html">SetAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ShaderAsset.js~ShaderAsset.html">ShaderAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SkeletonAsset.js~SkeletonAsset.html">SkeletonAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SoundAsset.js~SoundAsset.html">SoundAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/TextAsset.js~TextAsset.html">TextAsset</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a>C<a href="class/src/components/AtlasSprite.js~AtlasSprite.html">AtlasSprite</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~Camera.html">Camera</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~PostprocessPass.html">PostprocessPass</a></li> <li data-ice="doc">C<a href="class/src/components/Camera2D.js~Camera2D.html">Camera2D</a></li> <li data-ice="doc">C<a href="class/src/components/CameraDirector2D.js~CameraDirector2D.html">CameraDirector2D</a></li> <li data-ice="doc">C<a href="class/src/components/CircleShape.js~CircleShape.html">CircleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Container.js~Container.html">Container</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredPipeline.html">DeferredPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredRenderer.html">DeferredRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/GestureListener.js~GestureListener.html">GestureListener</a></li> <li data-ice="doc">C<a href="class/src/components/InputHandler.js~InputHandler.html">InputHandler</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassPipeline.html">MultipassPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassRenderer.html">MultipassRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/Particles.js~Particles.html">Particles</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsBody.js~PhysicsBody.html">PhysicsBody</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsWorld.js~PhysicsWorld.html">PhysicsWorld</a></li> <li data-ice="doc">C<a href="class/src/components/PolygonShape.js~PolygonShape.html">PolygonShape</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRack.html">PostprocessRack</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackPass.html">PostprocessRackPass</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackRawEffectPass.html">PostprocessRackRawEffectPass</a></li> <li data-ice="doc">C<a href="class/src/components/PrefabInstance.js~PrefabInstance.html">PrefabInstance</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleRenderer.js~RectangleRenderer.html">RectangleRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleShape.js~RectangleShape.html">RectangleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Script.js~Script.html">Script</a></li> <li data-ice="doc">C<a href="class/src/components/Shape.js~Shape.html">Shape</a></li> <li data-ice="doc">C<a href="class/src/components/Skeleton.js~Skeleton.html">Skeleton</a></li> <li data-ice="doc">C<a href="class/src/components/SortedActions.js~SortedActions.html">SortedActions</a></li> <li data-ice="doc">C<a href="class/src/components/Sprite.js~Sprite.html">Sprite</a></li> <li data-ice="doc">C<a href="class/src/components/TextRenderer.js~TextRenderer.html">TextRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/UiLayout.js~UiLayout.html">UiLayout</a></li> <li data-ice="doc">C<a href="class/src/components/UiSprite.js~UiSprite.html">UiSprite</a></li> <li data-ice="doc">C<a href="class/src/components/VerticesRenderer.js~VerticesRenderer.html">VerticesRenderer</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems">systems</a>C<a href="class/src/systems/AssemblySystem.js~AssemblySystem.html">AssemblySystem</a></li> <li data-ice="doc">C<a href="class/src/systems/AudioSystem.js~AudioSystem.html">AudioSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/InputSystem.js~InputSystem.html">InputSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Command.html">Command</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Pipeline.html">Pipeline</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderFullscreenCommand.html">RenderFullscreenCommand</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderSystem.html">RenderSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderTargetWrapper.html">RenderTargetWrapper</a></li> <li data-ice="doc">C<a href="class/src/systems/StorageSystem.js~StorageSystem.html">StorageSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/System.js~System.html">System</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-assetsystem">systems/AssetSystem</a>C<a href="class/src/systems/AssetSystem/Asset.js~Asset.html">Asset</a></li> <li data-ice="doc">C<a href="class/src/systems/AssetSystem/index.js~AssetSystem.html">AssetSystem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-entitysystem">systems/EntitySystem</a>C<a href="class/src/systems/EntitySystem/Component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/Entity.js~Entity.html">Entity</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/index.js~EntitySystem.html">EntitySystem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a>C<a href="class/src/utils/Events.js~Events.html">Events</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-angleDifference">angleDifference</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-bezierCubic">bezierCubic</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertGlobalPointToLocalPoint">convertGlobalPointToLocalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertLocalPointToGlobalPoint">convertLocalPointToGlobalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-findMapKeyOfValue">findMapKeyOfValue</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getMipmapScale">getMipmapScale</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getPOT">getPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isGlobalPointInGlobalBoundingBox">isGlobalPointInGlobalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isLocalPointInLocalBoundingBox">isLocalPointInLocalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isPOT">isPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-propsEnumStringify">propsEnumStringify</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-stringToRGBA">stringToRGBA</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-waitForSeconds">waitForSeconds</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Box2D">Box2D</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/utils/index.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Events from './Events'; import { glMatrix, mat2, mat2d, mat3, mat4, quat, vec2, vec3, vec4 } from './gl-matrix'; import * as box2d from './box2d'; export default { Events, glMatrix, mat2, mat2d, mat3, mat4, quat, vec2, vec3, vec4, box2d, findMapKeyOfValue, waitForSeconds, stringToRGBA, propsEnumStringify, angleDifference, convertGlobalPointToLocalPoint, convertLocalPointToGlobalPoint, isGlobalPointInGlobalBoundingBox, isLocalPointInLocalBoundingBox, bezierCubic, isPOT, getPOT, getMipmapScale }; export { Events, glMatrix, mat2, mat2d, mat3, mat4, quat, vec2, vec3, vec4, box2d, findMapKeyOfValue, waitForSeconds, stringToRGBA, propsEnumStringify, angleDifference, convertGlobalPointToLocalPoint, convertLocalPointToGlobalPoint, isGlobalPointInGlobalBoundingBox, isLocalPointInLocalBoundingBox, bezierCubic, isPOT, getPOT, getMipmapScale }; const regexRGBA = /([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/; const cachedLocalVec = vec2.create(); const cachedInverseMatrix = mat4.create(); /** * Search for key of given map value. * * @param {*} map - map collection object. * @param {*} value - value you're looking for. * * @return {string|null} value key or null if value not found. * * @example * const found = findMapKeyOfValue({ hello: 'world' }, 'world'); */ function findMapKeyOfValue(map, value) { for (const [ k, v ] of map.entries()) { if (v === value) { return k; } } return null; } /** * Produces promise that waits given amount of seconds, then resolves itself. * * @param {number} seconds - Number of seconds to wait. * * @return {Promise} Produced promise. * * @example * waitForSeconds(1.5).then(() => console.log('hello!')); */ function waitForSeconds(seconds) { return new Promise((resolve, reject) => setInterval(resolve, seconds * 1000)); } /** * Converts hexadecimal color string into four element array of color channels values. * * @param {string} value - Hexadecimal color string. * * @return {[number]} Four element array of color channels. * * @example * const color = stringToRGBA('AABBCCFF'); */ function stringToRGBA(value) { const matches = regexRGBA.exec(value); if (!matches) { throw new Error(`Cannot convert string to RGBA: ${value}`); } const result = [ 0, 0, 0, 0 ]; for (let i = 0; i < 4; ++i) { result[i] = parseInt(matches[i + 1], 16) / 255; } return result; } /** * Stringify key-value map into enumeration-like representation. * * @param {*} values - Map collection. * * @return {string} Stringified map collection. * * @example * const enum = propsEnumStringify({ hello: 'world', ohayo: 'gosaimasu' }); */ function propsEnumStringify(values) { if (!values) { return ''; } return Object.keys(values).map(key => { const value = values[key]; if (typeof value === 'string' || typeof value === 'number') { return `${key}:${value}`; } else { return ''; } }).join(',') } /** * Calculate closest turn angle difference. * * @param {number} a - From angle. * @param {number} b - To angle. * * @return {number} Angle difference (negative values possible). * * @example * angleDifference(10, 350) === -20 */ function angleDifference(a, b) { return ((((a - b) % 360) + 540) % 360) - 180; } /** * Converts global vec3 coordinate into local vec2 coordinate. * * @param {vec3} target - Result vec3 value. * @param {vec3} globalVec - Global vec3 value. * @param {mat4} globalTransform - Object mat4 transform. * * @example * const result = vec3.create(); * const pos = vec3.fromValues(1, 1, 0); * const transform = mat4.identity(); * convertGlobalPointToLocalPoint(result, pos, transform); */ function convertGlobalPointToLocalPoint(target, globalVec, globalTransform) { mat4.invert(cachedInverseMatrix, globalTransform); vec3.transformMat4(target, globalVec, cachedInverseMatrix); } /** * Converts local vec3 coordinate into global vec2 coordinate. * * @param {vec3} target - Result vec3 value. * @param {vec3} localVec - Local vec3 value. * @param {mat4} globalTransform - Object mat4 transform. * * @example * const result = vec3.create(); * const pos = vec3.fromValues(1, 1, 0); * const transform = mat4.identity(); * convertLocalPointToGlobalPoint(result, pos, transform); */ function convertLocalPointToGlobalPoint(target, localVec, globalTransform) { vec3.transformMat4(target, localVec, globalTransform); } /** * Tells if given global vec2 coordinate is contained by given bounding box in given global transform space. * * @param {vec2} globalVec - Global vec2 value. * @param {number} w - BBox width. * @param {number} h - BBox height. * @param {number} ox - BBox X offset. * @param {number} oy - BBox Y offset. * @param {mat4} globalTransform - Object mat4 transform. * * @return {boolean} True if point is contained by bounding box. * * @example * const pos = vec2.fromValues(2, 2); * const transform = mat4.identity(); * isGlobalPointInGlobalBoundingBox(pos, 2, 2, 1, 1, transform) === true */ function isGlobalPointInGlobalBoundingBox( globalVec, w, h, ox, oy, globalTransform ) { convertGlobalPointToLocalPoint(cachedLocalVec, globalVec, globalTransform); return isLocalPointInLocalBoundingBox(cachedLocalVec, w, h, ox, oy); } /** * Tells if given local vec2 coordinate is contained by given bounding box. * * @param {vec2} localVec - Local vec2 value. * @param {number} w - BBox width. * @param {number} h - BBox height. * @param {number} ox - BBox X offset. * @param {number} oy - BBox Y offset. * * @return {boolean} True if point is contained by bounding box. */ function isLocalPointInLocalBoundingBox(localVec, w, h, ox, oy) { const x = localVec[0]; const y = localVec[1]; const left = -ox; const right = w - ox; const top = -oy; const bottom = h - oy; return x >= left && x <= right && y >= top && y <= bottom; } /** * Calculate cubic bezier curve value at given time with four curve parameters. * * @param {number} t - Time. * @param {number} a - First curve position. * @param {number} b - First curve controller. * @param {number} c - Second curve controller. * @param {number} d - Second curve controller. * * @return {number} Calculated curve value. */ function bezierCubic(t, a, b, c, d) { t = Math.max(0, Math.min(1, t)); const r = 1 - t; return a * r * r * r + 3 * b * t * r * r + 3 * c * t * t * r + d * t * t * t; } /** * Checks if all arguments are power-of-two. * * @param {number[]} args - Values. * * @return {boolean} True if all arguments are power-of-two. */ function isPOT(...args) { for (const arg of args) { const v = arg | 0; const pot = (v !== 0) && ((v & (~v + 1)) === v); if (!pot) { return false; } } return true; } /** * Calculate nearest power-of-two. * * @param {number} v - Value. * @param {boolean} upper - calculate upper POT value. * * @return {number} Nearest power-of-two value. */ function getPOT(v, upper = false) { let result = 1; while (result < v) { result = result << 1; } return upper ? result : result >> 1; } /** * Calculate mipmap scale at given level. * * @param {number} level - Level value (0 means base level, full scale). * * @return {number} Mipmap scale for given level. */ function getMipmapScale(level) { level = level | 0; return 1 / Math.max(1, Math.pow(2, Math.max(0, level))); } </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc(1.1.0)<img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>