This gist is a setup information for https://zeropaper.github.io/visual-fiha/controller.html#setup/521797d1a7f6cd2d31994241b2712a9e

visual-fiha-setup.yml

signals:
  colorA:
    type: hsla
    defaultValue: 1
    input: null
    hue: 180
    saturation: 50
    lightness: 50
    alpha: 100
  beatA:
    type: beat
    defaultValue: 1
    input: 125
    frametime: 94284.58
mappings:
  beat:
    targets:
      - layers.vf.styleProperties.--beat.value
    transformFunction: 'function (val) { return val.toString(); }'
    source: signals.beatA.result
  beat2:
    targets:
      - layers.ar.styleProperties.--stroke-width.value
    transformFunction: 'function (val) { return (5.5 + ((val % 4) * 5.5)).toString(); }'
    source: signals.beatA.beatNum
layers:
  canvas:
    type: canvas
    active: true
    opacity: 50
    zIndex: 0
    clear: 5
    canvasLayers:
      - props:
          active:
            type: boolean
            required: true
            default: true
            allowNull: false
          toggleA:
            type: boolean
            required: true
            default: false
            allowNull: false
          knobA:
            type: number
            required: true
            default: 127
            allowNull: false
          knobB:
            type: number
            required: true
            default: 127
            allowNull: false
          knobC:
            type: number
            required: true
            default: 127
            allowNull: false
        zIndex: 50
        name: lines
        active: true
        drawFunction: |-
          function () {
            var l = bufferLength();
            var f = 0;
            var k = Math.round(layer.knobA * 0.05);
            var p = Math.max(1, k);
            var d = Math.pow(2, p);
            grid(l, l / d, function(...args) {
              fillStyle('black');
              fillStyle('hsl('+(timeDomain(f) * 3)+', '+layer.knobB+'%, '+layer.knobB+'%)');
              strokeStyle('hsl('+(timeDomain(f) * 3)+', '+layer.knobB+'%, '+layer.knobB+'%)');
              polygone(...args, timeDomain(f) * layer.knobC * 0.05);
              f++;
            });
          }
        toggleA: false
        knobA: 127
        knobB: 127
        knobC: 127
  ar:
    type: SVG
    active: true
    opacity: 100
    zIndex: 5
    svgStyles:
      '#algorave': |-
        fill:none;
          transform: translateY(-20vh);
          stroke:var(--stroke-color);
          stroke-width:var(--stroke-width);
    src: ./assets/algorave/algorave-stroke.svg
    styleProperties:
      - name: '--stroke-color'
        value: white
        default: white
      - name: '--stroke-width'
        value: '5.5'
        default: '22'
  vf:
    type: SVG
    active: true
    opacity: 100
    zIndex: 10
    svgStyles:
      '#zeropaper': |-
        filter:url(#glow);
          transform: translateY(20vh);
          fill:var(--fill-color);
          stroke:var(--stroke-color);
          stroke-width:var(--stroke-width);
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-dasharray: var(--path-length);
          stroke-dashoffset: calc(var(--path-length) * var(--beat));
    src: ./assets/visual-fiha.svg
    styleProperties:
      - name: '--fill-color'
        value: none
        default: none
      - name: '--stroke-color'
        value: white
        default: white
      - name: '--stroke-width'
        value: 5px
        default: 5px
      - name: '--frametime'
        value: '0'
        default: '0'
      - name: '--beat'
        value: '66.90624999999878'
        default: '0'