Circular set of points, that can change it's behaviour dynamically:
Clone or download
vlad.chirkov
2
Latest commit 27642f5 Oct 12, 2017

README.md

Webgl stuff (demo)

Circular set of points, that can change it's behaviour dynamically.

IMAGE ALT TEXT HERE

Whole thing consists of:

Installation

npm install webgl-stuff --save

Usage

ES6 import:

import WebglStuff from 'webgl-stuff';

const wgs = new WebglStuff(document.getElementById('container'));
wgs.transitTo(preset, duration);

RequireJS:

const wgs = require('webgl-stuff')(document.getElementById('container'));

wgs.transitTo(preset, duration);

Usage with async/await:

const wgs = new WebglStuff(document.getElementById('container'));

(async () => {
    await timeout(5000);
    await wgs.transitTo(WebglStuff.presets.progress.bad, 3000);
    await timeout(5000);
    await wgs.transitTo(WebglStuff.presets.progress.normal, 5000);
})();

function timeout(dur) {
    return new Promise((res) => setTimeout(res, dur));
}

Constructor Arguments

/**
 * @class WebglStuff
 * @extends EventEmitter
 * @classdesc Class, that organizes CircularPoints, Floats and LightRing in one system
 */
export default class WebglStuff extends EventEmitter {
    /**
     * @constructor
     * @param {HTMLElement} el - Container element for scene <canvas/>
     * @param {Object} [initial = constants.initial] - params, that won't change through time
     * @param {Object} [preset = constants.neutral1] - params, that can be changed
     */
    constructor(el, initial = constants.initial, preset = constants.neutral1) {
        // ...
    }
    //...
  • el
    Any <div/> with reasonable size should work.
    !As calculation is executed per pixel, big elements can cause lags!
  • initial
    Set of initial, unchangeable props
    • x: 0 - position by x axis
    • y: 0 - position by y axis
    • z: 0 - position by z axis
    • circles: 45 - number of particle circles
    • r: 50 - inner radius of ring set (radius of the smallest particle ring)
    • ringInside: 0.1 - inner radius of highlight circle
    • ringOutside: 1.5 - outer radius of highlight circle
    • space: 1 - distance between circles (biggest particle circle will have radius = r + space * circles)
    • points: 100 - number of points for smallest circle
    • diffusion: 0.5 - reduction of points based on ring index (pointsNumber = points - diffusion * ringIndex)
    • floatsColor: new Color(0x000000) - color of background noise (to avoid dirty blending better use either #000 or #fff).
  • preset
    Set of props, that can mutate through time
    • visible: 10 - how many circles are visible right now
    • opacityStep: 0.125 - how much should opacity change with each frame according to visible prop
    • pointsColor: new Color(1, 1, 1) - color of circular points
    • ringColor: new Color(1, 1, 1) - color of highlight ring
    • opacity: 0.1 - opacity of highlight ring
    • impact: 0.04 - how big is the rattling of rings
    • stabilityStart: 1.05 - how big is the amplitude for inner circle
    • stabilityEnd: 0.95 - how big is the amplitude for outer circle
    • rotation: 0.0005 - rotation speed for circles
    • perlin: 0.00025 - perlin noise seed offset (don't think about it too much, just play around)
    • background: new Color(0.295, 0.295, 0.78) - background color
    • floatsOpacity: 0.6 - opacity of noise background

Methods

transitTo()

// ...
await wgs.transitTo(preset, duration);
// ...
  • preset - full or partial set of changeable props
    // ...
    // transition to "normal" preset
    await wgs.transitTo(WebglStuff.presets.progress.normal, duration);
    // ...
    // ...
    // only change number of visible circles
    await wgs.transitTo({visible: 10}, duration);
    // ...
  • duration - duration of transition in ms.
    // ...
    // transition will take one second
    await wgs.transitTo(preset, 1000);
    // ...

stopTransition()

Interrupt current transition. Will reject promise from transitTo, that is in progress

// ...
// interrupt current transition
wgs.stopTransition();
// ...

endTransition()

Finish current transition. Will resolve promise from transitTo, that is in progress

// ...
// finish current transition
wgs.endTransition();
// ...

Events

Events available:

  • WebglStuff.ON_TRANSITION_START - emits, when all transition parameters are ready, but no transition update was applied
  • WebglStuff.ON_TRANSITION_PROGRESS - emits on evety transition tick
  • WebglStuff.ON_TRANSITION_STOP - emits, when transition was stopped
  • WebglStuff.ON_TRANSITION_END - emits, when transition was ended manually or after transition reached end state
  • WebglStuff.ON_BEFORE_UPDATE - emits, before any updates
  • WebglStuff.ON_UPDATE - emits, when transition params have been updated, but no changes were applied to the objects
  • WebglStuff.ON_AFTER_UPDATE - emits, when changes were applied to the objects

Example:

wgs.on(WebglStuff.ON_UPDATE, () => console.log(Date.now()));