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';

const panel = new Panel();
panel.add(new PanelItem({ type: 'color' }));
panel.animateIn();
document.body.appendChild(panel.element);

function animate() {
    requestAnimationFrame(animate);

    panel.update();
}

requestAnimationFrame(animate);

HUD (heads-up display) components:

import { UI } from '@alienkitty/space.js';

const ui = new UI({
    fps: true
    // header
    // menu
    // info
    // details
    // instructions
    // detailsButton
    // muteButton
    // audioButton
});
ui.animateIn();
document.body.appendChild(ui.element);

function animate() {
    requestAnimationFrame(animate);

    ui.update();
}

requestAnimationFrame(animate);

Graph components:

import { Graph } from '@alienkitty/space.js';

const graph = new Graph({
    value: Array.from({ length: 10 }, () => Math.random()),
    precision: 2,
    lookupPrecision: 100
});
graph.animateIn();
document.body.appendChild(graph.element);

function animate() {
    requestAnimationFrame(animate);

    graph.update();
}

requestAnimationFrame(animate);

Tween animation engine:

import { ticker, tween } from '@alienkitty/space.js';

ticker.start();

const data = {
    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';

const loader = new BufferLoader();
await loader.loadAllAsync(['assets/sounds/gong.mp3']);
WebAudio.init({ sampleRate: 48000 });
WebAudio.load(loader.files);

const gong = 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 });

// Shoutcast streams append a semicolon (;) to the URL
WebAudio.load({ protonradio: 'https://shoutcast.protonradio.com/;' });

const protonradio = WebAudio.get('protonradio');
protonradio.gain.set(1);

document.addEventListener('pointerdown', () => {
    protonradio.play();
});

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

npm i three @alienkitty/space.js

import { EnvironmentTextureLoader } from '@alienkitty/space.js/three';

// ...
const loader = new EnvironmentTextureLoader(renderer);
loader.load('assets/textures/env/jewelry_black_contrast.jpg', texture => {
    scene.environment = texture;
    scene.environmentIntensity = 1.2;
});

// ...
const loader = new EnvironmentTextureLoader(renderer);
scene.environment = await loader.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)
fps
fps panel
fps graph
panel (standalone)
graph (standalone)
radial graph (standalone)
graph markers
thumbnail
ufo (2d scene, smooth scroll with skew effect)

3d

materials
materials instancing (debug)
materials instancing (custom, debug)
lights

audio

gong
stream
rhythm
audio (ui)

thread

canvas (noise)

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
npx eslint src
npx eslint examples/about/src
npx eslint examples/three/*.html
npx eslint examples/*.html

Resources

• The Wiki
• Tween
• Changelog

See also

• Alien.js
• Three.js
• OGL