This gist is a setup information for https://zeropaper.github.io/visual-fiha

visual-fiha-setup.yml

signals:
  colorA:
    type: hsla
    defaultValue: '180,50%,50%,1'
    input: null
    hue: 180
    saturation: 50
    lightness: 50
    alpha: 100
  beatA:
    type: beat
    defaultValue: 1
    input: 120
mappings:
  beatOpacity:
    targets:
      - layers.no-signal.opacity
    transformFunction: |-
      function (value) {
        return value > 90 ? 100 : 15;
      }
    source: signals.beatA.result
  nk2.r1:
    targets:
      - layers.no-signal.active
    transformFunction: |-
      function (value, currentValue) {
        if (!value) return currentValue;
              return !currentValue;
      }
    source: 'midi:nk2.r1'
  nk2.knob1:
    targets:
      - layers.canvas.canvasLayers.lines.knobA
    transformFunction: |-
      function (value) {
        return value;
      }
    source: 'midi:nk2.knob1'
  nk2.knob2:
    targets:
      - layers.canvas.canvasLayers.lines.knobB
    transformFunction: |-
      function (value) {
        return value;
      }
    source: 'midi:nk2.knob2'
  nk2.knob3:
    targets:
      - layers.canvas.canvasLayers.lines.knobC
    transformFunction: |-
      function (value) {
        return value;
      }
    source: 'midi:nk2.knob3'
  beatNum20Str:
    targets:
      - layers.vf.styleProperties.--beat.value
      - layers.ar.styleProperties.--beat.value
    transformFunction: |-
      function (value) {
        return (value % 1000).toString();
      }
    source: signals.beatA.result
  beatKnob:
    targets:
      - signals.beatA.input
    transformFunction: |-
      function (value) {
        return value + 63;
      }
    source: 'midi:nk2.knob8'
layers:
  ar:
    type: SVG
    active: true
    opacity: 100
    zIndex: 0
    svgStyles:
      '#algorave': |-
        transform: translateY(var(--translate-y));
          fill:none;
          stroke:var(--stroke-color);
          stroke-width:var(--stroke-width);
          stroke-dasharray: calc(var(--path-length) * (1 / 80));
          stroke-dashoffset: calc(var(--path-length) * (1 / 2000) * var(--beat));
    src: ./assets/algorave/algorave-stroke.svg
    styleProperties:
      - name: '--stroke-color'
        value: white
        default: white
      - name: '--stroke-width'
        value: '22'
        default: '22'
      - name: '--beat'
        value: '58.59999999997672'
        default: '0'
      - name: '--translate-y'
        value: '-20vh'
        default: '-20vh'
  vf:
    type: SVG
    active: false
    opacity: 100
    zIndex: 0
    svgStyles:
      '#fiha': |-
        transform: translateY(var(--translate-y));
          filter:url(#glow);
          fill:var(--fill-color);
          stroke:var(--stroke-color);
          stroke-width:var(--stroke-width);
          stroke-linecap:round;
          stroke-linejoin:round;
          stroke-dasharray: calc(var(--path-length) * (1 / 10));
          stroke-dashoffset: calc(var(--path-length) * (1 / 500) * 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: '22'
        default: 5px
      - name: '--frametime'
        value: '0'
        default: '0'
      - name: '--beat'
        value: '58.59999999997672'
        default: '0'
      - name: '--translate-y'
        value: 20vh
        default: 20vh
  canvas:
    type: canvas
    active: false
    opacity: 100
    zIndex: 100
    clear: 1
    canvasLayers:
      - props:
          active:
            type: boolean
            required: true
            default: true
            allowNull: false
          text:
            type: string
            required: true
            default: Hello World!
            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 str = layer.text || '';
            // var letters = str.length <= l ? repeat('', Math.round((l - str.length) / 2))
            //               .concat(str.split('')) : str.split('');
            var f = 0;
            var k = Math.round(layer.knobA * 0.05);
            var p = Math.max(1, k);
            var d = Math.pow(2, p);

            // textAlign('center');
            // textBaseline('middle');

            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+'%)');

              // circle(...args, timeDomain(f) * 0.1);
              polygone(...args, timeDomain(f) * layer.knobC * 0.05);
              // font('20px monospace');
              // font('20px monospace');
              // txt(letters[f], ...args);
              f++;
            });
          }
        text: Hello World!
        toggleA: false
        knobA: 127
        knobB: 63
        knobC: 127