permutable v0.2.22

Permutable

Tools for programming graphics

Usage

The recommended way is using ECMAScript modules (esm):

<script type='module'>
  import { mix, run } from 'https://unpkg.com/permutable@{{VERSION}}?module'
</script>

Examples

• Basic
• Async
• BPM
• Custom size
• Mixer inline
• Mixer load
• Mixer 4K
• Mixer compositor
• Timer

API

run

Run a single program

run(program)

mix

Mix multiple programs

mix([
  program1,
  program2
])

program

A program is defined as a plain JavaScript object

{
  name: string,
  params: object,
  setup: function
}

Example:

{
  name: 'circle',
  params: {
    stroke: {
      type: 'toggle',
      value: true
    }
  },
  setup: function (canvas) {
    const context = canvas.getContext('2d')

    return function render ({ stroke }) {
      if (stroke) {
        context.strokeRect(0, 0, 100, 100)
      } else {
        context.fillRect(0, 0, 100, 100)
      }
    }
  }
}

name (string)

A name for the program

params (object)

Parameters for the program. These are the types available:

number

{
  type: 'number',
  value: 5,
  min: 0,
  max: 10,
  step: 1
}

timer

{
  type: 'timer'
}

toggle

{
  type: 'toggle',
  value: false
}

trigger

{
  type: 'trigger'
}

bpm

{
  type: 'bpm'
  value: 120,
  step: 1
}

setup (function)

A setup function will run once when the program is loaded. In it, the canvas element is being provided as a parameter. A render function is expected to be returned from the setup function. It will be called anytime the params changes.

Example with 2d context:

function setup (canvas) {
  const context = canvas.getContext('2d')

  return function render (values) {
    context.strokeRect(0, 0, 100, 100)
  }
}

Example using regl:

function setup (canvas) {
  const regl = createREGL({ canvas })

  return function render (values) {
    regl.poll()
    regl.clear({
      color: [1, 0, 0, 1]
    })
  }
}