Space.js

This library is part of two sibling libraries, Space.js for UI, Panel components, Tween, Web Audio, loaders, utilities, and Alien.js for 3D utilities, materials, shaders and physics.

Usage

Space.js is divided into two entry points depending on your use case.

The main entry point without any dependencies is for the UI components, loaders and utilities.

npm i @alienkitty/space.js

Math classes:

import{Color,Vector2}from'@alienkitty/space.js';

Panel components:

import{Panel,PanelItem}from'@alienkitty/space.js';constpanel=newPanel();constitem=newPanelItem({// name: 'FPS'// type: 'spacer'// type: 'divider'// type: 'link'// type: 'thumbnail'// type: 'graph'// type: 'meter'// type: 'list'// type: 'slider'// type: 'toggle'// type: 'content'type: 'color'});panel.add(item);panel.animateIn();document.body.appendChild(panel.element);functionanimate(){requestAnimationFrame(animate);panel.update();}requestAnimationFrame(animate);

HUD (heads-up display) components:

import{UI}from'@alienkitty/space.js';constui=newUI({fps: true// header// footer// menu// info// details// instructions// detailsButton// muteButton// audioButton});ui.animateIn();document.body.appendChild(ui.element);functionanimate(){requestAnimationFrame(animate);ui.update();}requestAnimationFrame(animate);

Graph and meter components:

import{Graph}from'@alienkitty/space.js';constgraph=newGraph({value: Array.from({length: 10},()=>Math.random()),precision: 2,lookupPrecision: 100});graph.animateIn();document.body.appendChild(graph.element);functionanimate(){requestAnimationFrame(animate);graph.update();}requestAnimationFrame(animate);

import{RadialGraph}from'@alienkitty/space.js';constgraph=newRadialGraph({value: Array.from({length: 10},()=>Math.random()),precision: 2,lookupPrecision: 200});graph.animateIn();document.body.appendChild(graph.element);functionanimate(){requestAnimationFrame(animate);graph.update();}requestAnimationFrame(animate);

import{Meter}from'@alienkitty/space.js';constmeter=newMeter({value: Math.random(),precision: 2});meter.animateIn();document.body.appendChild(meter.element);functionanimate(){requestAnimationFrame(animate);meter.update();}requestAnimationFrame(animate);

Tween animation engine:

import{ticker,tween}from'@alienkitty/space.js';ticker.start();constdata={radius: 0};tween(data,{radius: 24,spring: 1.2,damping: 0.4},1000,'easeOutElastic',null,()=>{console.log(data.radius);});

Web Audio engine:

import{BufferLoader,WebAudio}from'@alienkitty/space.js';constloader=newBufferLoader();awaitloader.loadAllAsync(['assets/sounds/gong.mp3']);WebAudio.init({sampleRate: 48000});WebAudio.load(loader.files);constgong=WebAudio.get('gong');gong.gain.set(0.5);document.addEventListener('pointerdown',()=>{gong.play();});

Audio stream support:

import{WebAudio}from'@alienkitty/space.js';WebAudio.init({sampleRate: 48000});WebAudio.load({cyberspace: 'https://icecast.cyberspace.app/dive.ogg'});constcyberspace=WebAudio.get('cyberspace');cyberspace.gain.set(1);document.addEventListener('pointerdown',()=>{cyberspace.play();});

And the @alienkitty/space.js/three entry point for three.js UI components, loaders and utilities.

npm i three @alienkitty/space.js

For example, loader utilities:

import{EnvironmentTextureLoader}from'@alienkitty/space.js/three';// ...constloader=newEnvironmentTextureLoader(renderer);loader.load('assets/textures/env/jewelry_black_contrast.jpg',texture=>{scene.environment=texture;scene.environmentIntensity=1.2;});// ...constloader=newEnvironmentTextureLoader(renderer);scene.environment=awaitloader.loadAsync('assets/textures/env/jewelry_black_contrast.jpg');scene.environmentIntensity=1.2;

Examples

ui

logo (interface)
alienkitty (interface)
alienkitty (canvas)
ui (hud)
components (ui)
audio (ui)
progress (canvas)
progress (svg)
progress indeterminate (svg)
close (svg)
tween (svg)
magnetic (component, svg)
details
info (details)
server status (details)
fps
fps panel
fps graph
fps meter
panel (standalone)
graph (standalone)
radial graph (standalone)
radial graph (audio analyser)
graph markers
meter (standalone)
thumbnail
ufo (2d scene, smooth scroll with skew effect)

3d

materials (panel tracking)
materials instancing (debug)
materials instancing (custom, debug)
materials spherical cube (array of materials)
lights
radial graph (graph and panel tracking)
server status (details, graph and panel tracking)
server status (websocket thread, details, graph and panel tracking)
mars (cubemaps, details info, ambient audio)
cyberspace (geoip, details, points tracking)

audio

gong
stream
rhythm
audio (ui)
analyser (ui, radial graph)

thread

canvas (noise)
server status (websocket thread)

Getting started

Clone this repository and open the examples:

git clone https://github.com/alienkitty/space.js
cd space.js
npx servez

ESLint

npm i -D eslint eslint-plugin-html @eslint/js globals
npx eslint src
npx eslint examples/about/src
npx eslint examples/mars/src
npx eslint examples/cyberspace/src
npx eslint examples/three/*.html
npx eslint examples/*.html

Resources

• The Wiki
• Tween
• Changelog

See also

• Alien.js
• Three.js
• OGL