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: 125
    frametime: 535703.8800000001
mappings: {}
layers:
  canvas:
    type: canvas
    active: true
    opacity: 50
    zIndex: 0
    clear: 5
    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: 127
        knobC: 127
  vf:
    type: SVG
    active: true
    opacity: 100
    zIndex: 0
    src: ./assets/visual-fiha.svg
    styleProperties:
      - name: '--fill-color'
        value: none
        default: black
      - name: '--stroke-color'
        value: white
        default: white
      - name: '--stroke-width'
        value: 5px
        default: 5px
      - name: '--frametime'
        value: '0'
        default: '0'
      - name: '--beat'
        value: '0'
        default: '0.5'