0+x interactive logo.

The Mesh model was generated in blender from original svg logo by Dmytro Kovkun. Change it to get different logos.

Install

npm install -S @zero-plus-x/logo

Usage

import { Logo, Controls } from '@zero-plus-x/logo';

// render logo to a given DOM-element
const logoContainer = document.getElementById('logo-container');
const options = {}; // see `options` section below
const logo = new Logo(logoContainer, options);

// (optional) render controls to tweak how logo should look
const controlsContainer = document.getElementById('controls-container');
const controls = new Controls(controlsContainer, logo);

// destroy logo if it's not needed anymore
logo.destroy();

Logo options

options.vertexShader

• default:

  attribute float a_Size;
  attribute float a_Alpha;
  varying float v_Alpha;
  void main() {
    v_Alpha = a_Alpha;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = a_Size;
    gl_Position = projectionMatrix * mvPosition;
  }

options.fragmentShader

• default:

  uniform sampler2D u_Texture;
  varying float v_Alpha;
  void main() {
    vec4 color = vec4(1.0, 1.0, 1.0, v_Alpha) * texture2D(u_Texture, vec2(1.0, 1.0) - gl_PointCoord);
    gl_FragColor = color;
  }

options.cameraHeight

• default: 50

options.radius

• default: 10

options.minParticleSize

• default: 1

options.maxParticleSize

• default: 6

options.minParticleAlpha

• default: 0.2

options.maxParticleAlpha

• default: 1

options.minFrame

• default: 10

options.maxFrame

• default: 30

options.minBrownSpeed

• default: 0.03

options.maxBrownSpeed

• default: 0.08

options.minBrownRadius

• default: 0

options.maxBrownRadius

• default: 1

options.initRadius

• default: 1000

options.freeAmount

• default: 50

options.minFreeSize

• default: 1

options.maxFreeSize

• default: 8

options.minFreeAlpha

• default: 0.1

options.maxFreeAlpha

• default: 0.9

options.minFreeSpeed

• default: 0.001

options.maxFreeSpeed

• default: 0.005

options.minFreeFrame

• default: 180

options.maxFreeFrame

• default: 300

Development

Install dependencies:

npm install

Start dev-server (at http://localhost:3333):

npm start

Production build:

npm run build

Build a standalone page with this module:

npm run buildGlobal

Run linters (ESLint + Stylelint):

npm test