Demo

npm i -S bokehfy
import bokehfy from 'bokehfy'

or

const bokehfy = require('bokehfy')

Add bokehfy.min.js to your webpage.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bokehfy.min.js"></script>

Download Minified library

import bokehfy from './bokehfy.min.js'

bokehfy()

const field = bokehfy()

Valid parameters: no parameters, a DOM element, a settings object (with or without a DOM element parent included)

• No parameters: it will create a full-size instance with default parameters and prepend it to the window.document.body.

  const field = bokehfy()
  

• Valid DOM element: an instance will be created and prepended to the DOM element with default paramters.

  const container = document.getElementById('container')
  const field = bokehfy(container)
  

• Settings object with key/value pair {parent: Valid DOM Element}.

  const container = document.getElementById('container')
  
  const settings = {
      backgroundColor: '#00FF00', 
      parent: container
  }
  
  const field = bokehfy(settings)
  

• Settings object with no parent key then the DOM body will be assumed.

  const setup = {
      dx: 0,
      dy: 0,
      framerate: 10,
      gradient: ['red', 'pink'],
      density: 200,
      radius: 100,
      halflife: 1000,
      transparent: false,
      backgroundColor: '#AAA'
  }
  
  const field = bokehfy(setup)
  

bokehfy() will return null in the case of an invalid parent element being passed, either alone or in the settings object.

• parent: DOM Element,
• backgroundColor: string,
• transparent: boolean,
• color: string,
• star: string,
• gradient: array of strings,
• radius: number (0.00001 - 1000),
• halflife: number (0.00001 - 10000),
• density: number (0 - 2000),
• framerate: number (0 - 10000),
• dx: number (0 - 10000),
• dy: number (0 - 10000)

Note: Color, star, and gradient will overwrite each other. JS does not guarantee which order an object will be iterated through and it's not possible to guarantee which value will end up being processed last and therefore displayed.

Note: The canvas object that bokeh creates is absolutely positioned. If the element you attach it to does not have relative positioning set, the canvas may not behave as expected.

*bokehfy() makes use of Tiny Color for color validation and conversion. Any valid CSS color format should work.

If you wish to use a smaller custom version of this library without color verification. You can easily remove Tiny Color from the Bokeh API color methods and it should reduce the bundle size by 60%*

field.start()

field.stop()

field.pause()

Cancel requestAnimationFrame until pause() or start() is called again.

field.delete()

Stop animation, remove window listeners, and remove the field instance from its DOM parent.

const currentState = field.getSettings()
//{
//    transparent: false,
//    backgroundColor: {r: 0, g: 0, b: 0, a: 0.5},
//    gradient: [
//        {r: 255, g: 255, b: 255, a: 1},
//        {r: 255, g: 255, b: 255, a: 1},
//        {r: 255, g: 255, b: 255, a: 1}
//    ],
//    radius: 88,
//    halflife: 450,
//    dx: 5,
//    dy: 0.2,
//    density: 100   
//}

Returns an object representing the current field settings. (Individual points will deviate from the inital maximum dx, dy, and radius settings).

NOTE: Colors will be returned as an object with r,g,b,a keys.

field.toggleBackground()

Toggle background transparency. No parameters.

field.transparent(true)

default = false

Set background transparency by passing a boolean value.

field.backgroundColor('purple')
field.backgroundColor('#00FF00')

default = 'rgba(49, 159, 159, 1)'

Set new background color by passing a valid color as a string. Alpha values are supported for background color.

field.color('#ABC')

no default

Creates a solid color point with no gradient. Equivalent to calling gradient with an array with one element. eg field.gradient(['white]) Alpha values not supported (auto generated)

field.gradient(['white'])
field.gradient(['orangered', 'salmon'])
field.gradient(['white', 'red', 'blue'])

default = ['white', 'white', 'white']

Accepts an array of colors in order of colorstop from 0-1 (more than three will be truncated to the first three).

• One color will create a solid color point with no gradient.
• Two colors will create a gradient with the first color at stop 0 and the second at stop 1.
• Three colors will create a gradient with the first color at stop 0, the third at stop 1, and the second at a randomized stop somewhere between 0.4 and 0.6. Alpha values not supported (auto generated)

field.star('blue')

no default

Passing a single color will create a 3 stop gradient using white as the first stop and the passed color as the next two. Alpha values not supported (auto generated)

field.radius(10)

default = 120

Pass valid number. Accepted range is 0.00001 - 1000. Valid numbers outside that range will be coerced to the nearest acceptable value.

field.stepRadius(0.5)

Pass valid number. Current radius will be incremented by passed value.

NOTE: If you increment the radius value directly with field.radius(), it will be randomized as if initially seeding. Use this method for smooth animations.

NOTE: If you seed radius at 0, all values will be equal sized. To have a range of point sizes, seed with a non-zero value before animating with this function.

field.halflife(500)

default = 750

Pass valid number. Accepted range is 0.00001 - 10000. Valid numbers outside that range will be coerced to the nearest acceptable value.

Halflife and radius work hand in hand. To better understand the relationship, you may want to play with the demo

field.density(100)

default = 90

Increase the number of points. Pass valid number. Accepted range is 0 - 2000. Valid numbers outside that range will be coerced to the nearest acceptable value.

Abusing the density is the quickest way to 'hot lap syndrome'

field.framerate(5)

default = 30

Pass valid number. Accepted range is 0 - 10000. Valid numbers outside that range will be coerced to the nearest acceptable value.

field.dx(0)

default = 2

Horizontal point speed. Pass valid number. Accepted range is 0 - 10000. Valid numbers outside that range will be coerced to the nearest acceptable value.

field.stepDx(0.5)

Pass valid number. Current dx will be incremented by passed value. NOTE: If you increment the dx value directly with field.dx(), it will be randomized as if initially seeding. Use this method for smooth animations.

field.dy(10)

default = 2

Vertical point speed. Pass valid number. Accepted range is 0 - 10000. Valid numbers outside that range will be coerced to the nearest acceptable value.

field.stepDy(0.5)

Pass valid number. Current dy will be incremented by passed value. NOTE: If you increment the dy value directly with field.dy(), it will be randomized as if initially seeding. Use this method for smooth animations.

const setup = {
    dx: 0,
    dy: 0,
    framerate: 10,
    gradient: ['red', 'pink'],
    density: 200,
    radius: 100,
    halflife: 1000,
    transparent: false,
    backgroundColor: '#AAA'
}

field.settings(setup)

Allows you to pass an object with multiple settings during runtime. The object takes the same values as the initial setup object (except for parent which will be disregarded) - see instantiation parameters section for valid keys.

NOTE: