Webvs
Options
All
  • Public
  • Public/Protected
  • All
Menu

Webvs

npm version

A Winamp AVS like visualization library for the web.

Demo

Try out some examples, or test your own presets on the Webvs test page

Documentation

You can find TypeDoc generated documentation for Webvs on the website. The documentation for the Main class is a good place to start.

Installation

npm

For use with package bundlers, Webvs is available on npm as webvs. Install using

npm install webvs

and import in your code and initialize as follows

import Webvs from 'webvs';
const webvs = new Webvs.Main(....)

CDN

You can also embed webvs.js directly from unpkg CDN.

<script src="https://unpkg.com/webvs/dist/webvs.js"></script>

or for a minified version

<script src="https://unpkg.com/webvs/dist/webvs.min.js"></script>

This script exposes a Webvs global which you can use to initialize like so new Webvs.Main(...).

Usage

A typical usage involves creating an Analyser from your music source (e.g. Webvs.WebAudioAnalyser to use an audio tag or song url as a source) and initializing an instance of Webvs.Main with it. The main object serves as the primary interface or controlling the visualization. e.g.

const analyser = new Webvs.WebAudioAnalyser();
const webvs = new Webvs.Main({
    canvas: document.getElementById("canvas"),
    analyser: analyser,
    showStat: true
});
webvs.loadPreset({
  "clearFrame": true,
  "components": [
      {
          "type": "SuperScope",
          "source": "WAVEFORM",
          "code": {
              "perPoint": "x=i*2-1;y=v;"
          },
          "colors": ["#ffffff"]
      }
  ]
});
webvs.start();
analyser.load("music.ogg");
analyser.play();

Development

To develop Webvs clone the repo and install packages

npm install

For typical workflow, start a dev server with

npm run dev

and point browser to http://localhost:8080/examples/ to view webvs test page.

Contributing

Fork and submit pull requests against master branch. Look for issues with help wanted label for things that we need help with. For suggestions/bug fixes use Github/Issues. Chat with us at visbot/AVS gitter channel.

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

ArgLength

ArgLength: number | object

Color

Color: [number, number, number]

Color type. R, G, B

Expression

Expression: BinaryExpr | UnaryExpr | FuncCall | PrimaryExpr

FloatArray

FloatArray: number[] | Float32Array | Float64Array

Statement

Statement: Expression | Assignment

TypedArray

TypedArray: Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array

Variables

RESOURCE_PACK_URL

RESOURCE_PACK_URL: string

Const ShiftChannelsKeys

ShiftChannelsKeys: string[] = Object.keys(ChannelShiftMode).filter((s) => isNaN(parseInt(s, 10)))

WEBVS_VERSION

WEBVS_VERSION: string

Const glslPreComputeFuncs

glslPreComputeFuncs: string[] = ["getosc", "gettime"]

Const jsMathFuncs

jsMathFuncs: string[] = ["min", "max", "sin", "cos", "abs", "tan", "asin", "acos","atan", "log", "pow", "sqrt", "floor", "ceil",]

Functions

checkFunc

checkRequiredOptions

  • checkRequiredOptions(options: any, requiredOptions: string[]): void

  • Checks if an object contains the required properties. Throws an error for missing options

    Parameters

    • options: any

      the options to be checked

    • requiredOptions: string[]

      set of required options

    Returns void

circleGeometry

  • Returns a cached Buffer with points on a circle

    Parameters

    • rctx: RenderingContext

      RenderingContext undef which the buffer will be created and cached

    • Default value pointCount: number = 100

      number of points in the geometry

    Returns Buffer

clamp

  • clamp(num: number, min: number, max: number): number

  • Clamp number between range

    Parameters

    • num: number

      number to clamp

    • min: number

      min value of the range

    • max: number

      max value of the range

    Returns number

compileExpr

  • compileExpr(codeSrc: object, jsFuncs?: string[], glslFuncs?: string[], nonUniforms?: string[]): ICompileResult

  • Parameters

    • codeSrc: object
      • [name: string]: string | string[]
    • Default value jsFuncs: string[] = []
    • Default value glslFuncs: string[] = []
    • Default value nonUniforms: string[] = []

    Returns ICompileResult

flatString

  • flatString(value: string | string[], sep?: string): string

  • flattens array of strings to single string

    Parameters

    • value: string | string[]

      string or list of strings to be flattened

    • Default value sep: string = ""

      seprator to flatten the strings with

    Returns string

generateGlsl

generateJs

getProperty

  • getProperty(obj: any, name: string | string[]): any

  • Returns the value of property given its (dot separated) path in an object

    Parameters

    • obj: any

      object with the property

    • name: string | string[]

      name of the property

    Returns any

glslFilter

  • glslFilter(bFilter: boolean, compat: boolean): string

glslFloatRepr

  • glslFloatRepr(val: any): string

  • Returns a floating point value representation of a number embeddable in glsl shader code

    Parameters

    • val: any

      value to be converted

    Returns string

glslPolarToRect

glslRectToPolar

isColor

  • isColor(color: string | Color): boolean

  • Checks whether the argument is a Color or not

    Parameters

    • color: string | Color

      color to be checked

    Returns boolean

isStaticExprList

  • isStaticExprList(exprs: Ast.Expression[]): boolean

isTypedArray

  • isTypedArray(array: any): boolean

  • Parameters

    • array: any

    Returns boolean

logShaderError

  • logShaderError(src: string, error: string): void

  • Parses shader error message and displays readable information

    Parameters

    • src: string

      source of the shader

    • error: string

      error message

    Returns void

noop

  • noop(): void

parseCode

parseColor

  • Parse css color string #RRGGBB or rgb(r, g, b)

    Parameters

    • color: string | Color

      the color value to be parsed

    Returns Color

parseColorNorm

  • Parse css color string and return normalizes Color value

    Parameters

    • color: string | Color

      the color value to be parsed

    Returns Color

processAst

  • processAst(codeAst: ICodeAst, jsFuncs: string[], glslFuncs: string[], extraNonUniforms: string[]): ISymbolTables

randString

  • randString(count: number, chars: string): string

  • Returns a random string of given length

    Parameters

    • count: number

      number of characters

    • chars: string

      character set to choose from

    Returns string

setProperty

  • setProperty(obj: any, name: string | string[], value: any): void

  • Sets a property, given its (dot separated) path in an object

    Parameters

    • obj: any

      the object in which the property is to be set

    • name: string | string[]

      name of the property

    • value: any

      value of the property

    Returns void

squareGeometry

  • Returns a cached buffer with points on a square

    Parameters

    • rctx: RenderingContext

      RenderingContext under which the buffer will be created and cached

    • Default value positiveQuad: boolean = false

      if true then square will be in [0-1][0-1] range.

    Returns Buffer

translateConstants

  • translateConstants(value: string): number

Object literals

Const builtinResourcePack

builtinResourcePack: object

fileNames

fileNames: string[] = ["avsres_texer_circle_edgeonly_19x19.bmp","avsres_texer_circle_edgeonly_29x29.bmp","avsres_texer_circle_fade_13x13.bmp","avsres_texer_circle_heavyblur_19x19.bmp","avsres_texer_circle_heavyblur_21x21.bmp","avsres_texer_circle_heavyblur_29x29.bmp","avsres_texer_circle_sharp_09x09.bmp","avsres_texer_circle_sharp_19x19.bmp","avsres_texer_circle_slightblur_13x13.bmp","avsres_texer_circle_slightblur_21x21.bmp","avsres_texer_hexagon-h_blur_123x123.bmp","avsres_texer_square_edgeonly_24x24.bmp","avsres_texer_square_edgeonly_28x28.bmp","avsres_texer_square_edgeonly_30x30.bmp","avsres_texer_square_sharp_20x20.bmp","avsres_texer_square_sharp_32x32.bmp","avsres_texer_square_sharp_48x48.bmp","avsres_texer_square_sharp_60x60.bmp","avsres_texer_square_sharp_64x64.bmp","avsres_texer_square_sharp_72x72.bmp","avsres_texer_square_sharp_96x96.bmp","avsres_texer_square_sharp_250x250.bmp",]

name

name: string = "Builtin"

prefix

prefix: string = RESOURCE_PACK_URL

Const funcArgLengths

funcArgLengths: object

above

above: number = 2

abs

abs: number = 1

acos

acos: number = 1

asin

asin: number = 1

atan

atan: number = 1

atan2

atan2: number = 2

band

band: number = 2

below

below: number = 2

bnot

bnot: number = 1

bor

bor: number = 2

ceil

ceil: number = 1

cos

cos: number = 1

equal

equal: number = 2

floor

floor: number = 1

getosc

getosc: number = 3

gettime

gettime: number = 1

if

if: number = 3

invsqrt

invsqrt: number = 1

log

log: number = 1

max

max: number = 2

min

min: number = 2

pow

pow: number = 2

rand

rand: number = 1

sin

sin: number = 1

sqr

sqr: number = 1

sqrt

sqrt: number = 1

tan

tan: number = 1

select

select: object

min

min: number = 2

Const glslFuncCode

glslFuncCode: object

rand

rand: string = ["uniform vec2 __randStep;","vec2 __randSeed;","float rand(float max) {"," __randSeed += __randStep;"," float val = fract(sin(dot(__randSeed.xy ,vec2(12.9898,78.233))) * 43758.5453);"," return (floor(val*max)+1);","}",].join("\n")