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.

1npm i @alienkitty/space.js

Math classes:

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

Panel components:

1import { Panel, PanelItem } from '@alienkitty/space.js';
2
3const panel = new Panel();
4panel.add(new PanelItem({ type: 'color' }));
5panel.animateIn();
6document.body.appendChild(panel.element);
7
8function animate() {
9    requestAnimationFrame(animate);
10
11    panel.update();
12}
13
14requestAnimationFrame(animate);

HUD (heads-up display) components:

1import { UI } from '@alienkitty/space.js';
2
3const ui = new UI({
4    fps: true
5    // header
6    // menu
7    // info
8    // details
9    // instructions
10    // detailsButton
11    // muteButton
12    // audioButton
13});
14ui.animateIn();
15document.body.appendChild(ui.element);
16
17function animate() {
18    requestAnimationFrame(animate);
19
20    ui.update();
21}
22
23requestAnimationFrame(animate);

Graph components:

1import { Graph } from '@alienkitty/space.js';
2
3const graph = new Graph({
4    value: Array.from({ length: 10 }, () => Math.random()),
5    precision: 2,
6    lookupPrecision: 100
7});
8graph.animateIn();
9document.body.appendChild(graph.element);
10
11function animate() {
12    requestAnimationFrame(animate);
13
14    graph.update();
15}
16
17requestAnimationFrame(animate);

Tween animation engine:

1import { ticker, tween } from '@alienkitty/space.js';
2
3ticker.start();
4
5const data = {
6    radius: 0
7};
8
9tween(data, { radius: 24, spring: 1.2, damping: 0.4 }, 1000, 'easeOutElastic', null, () => {
10    console.log(data.radius);
11});

Web Audio engine:

1import { BufferLoader, WebAudio } from '@alienkitty/space.js';
2
3const loader = new BufferLoader();
4await loader.loadAllAsync(['assets/sounds/gong.mp3']);
5WebAudio.init({ sampleRate: 48000 });
6WebAudio.load(loader.files);
7
8const gong = WebAudio.get('gong');
9gong.gain.set(0.5);
10
11document.addEventListener('pointerdown', () => {
12    gong.play();
13});

Audio stream support:

1import { WebAudio } from '@alienkitty/space.js';
2
3WebAudio.init({ sampleRate: 48000 });
4
5// Shoutcast streams append a semicolon (;) to the URL
6WebAudio.load({ protonradio: 'https://shoutcast.protonradio.com/;' });
7
8const protonradio = WebAudio.get('protonradio');
9protonradio.gain.set(1);
10
11document.addEventListener('pointerdown', () => {
12    protonradio.play();
13});

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

1npm i three @alienkitty/space.js

1import { EnvironmentTextureLoader } from '@alienkitty/space.js/three';
2
3// ...
4const loader = new EnvironmentTextureLoader(renderer);
5loader.load('assets/textures/env/jewelry_black_contrast.jpg', texture => {
6    scene.environment = texture;
7    scene.environmentIntensity = 1.2;
8});
9
10// ...
11const loader = new EnvironmentTextureLoader(renderer);
12scene.environment = await loader.loadAsync('assets/textures/env/jewelry_black_contrast.jpg');
13scene.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:

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

ESLint

1npm i -D eslint eslint-plugin-html
2npx eslint src
3npx eslint examples/about/src
4npx eslint examples/three/*.html
5npx eslint examples/*.html

Resources

• The Wiki
• Tween
• Changelog

See also

• Alien.js
• Three.js
• OGL