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.ar.styleProperties.--beat.value
      - layers.vf.styleProperties.--beat.value
    transformFunction: |-
      function (value) {
        return (value % 20).toString();
      }
    source: signals.beatA.beatNum
  beatKnob:
    targets:
      - signals.beatA.input
    transformFunction: |-
      function (value) {
        return value + 63;
      }
    source: 'midi:nk2.knob8'
  beatNum100Str:
    targets:
      - layers.vjs.text
    transformFunction: |-
      function (value, old) {
        console.info(value, old);return (value % 100).toString();
      }
    source: signals.beatA.beatNum
layers:
  canvas:
    type: canvas
    active: true
    opacity: 100
    zIndex: 0
    layerStyles: ''
    clear: 1
    styleProperties: []
    canvasLayers:
      - props:
          active:
            type: boolean
            required: true
            default: true
            allowNull: false
          levelA:
            type: number
            required: true
            default: 30
            allowNull: false
          levelB:
            type: number
            required: true
            default: 120
            allowNull: false
        zIndex: 0
        name: levels
        active: false
        drawFunction: |-
          function () {
            lineWidth(1);
            strokeStyle('#fff');

            beginPath();
            moveTo(0, height - layer.levelA);
            lineTo(width, height - layer.levelA);
            stroke();

            beginPath();
            moveTo(0, height - layer.levelB);
            lineTo(width, height - layer.levelB);
            stroke();

            // -----------------------------------
            var length = bufferLength();
            var barWidth = (width / length) - 1;
            var f = 0;
            var alpha;
            lineWidth(barWidth);

            grid(length, 1, function(x) {
              var td = timeDomain(f) * 1;
              var freq = frequency(f);

              alpha = td > layer.levelA && td < layer.levelB ? 0.7 : 0;
              strokeStyle('rgba(160,122,122,' + alpha + ')');
              beginPath();
              moveTo(x, height);
              lineTo(x, height - td);
              stroke();

              alpha = freq > layer.levelA && freq < layer.levelB ? 0.7 : 0;
              strokeStyle('rgba(122,122,160,' + alpha + ')');
              beginPath();
              moveTo(x, height);
              lineTo(x, height - freq);
              stroke();
              f++;
            });
          }
        levelA: 30
        levelB: 120
      - props:
          active:
            type: boolean
            required: true
            default: true
            allowNull: false
          colorA:
            type: string
            required: true
            default: '#A581FF'
            allowNull: false
          widthA:
            type: number
            required: true
            default: 1
            allowNull: false
          colorB:
            type: string
            required: true
            default: '#66D9EF'
            allowNull: false
          widthB:
            type: number
            required: true
            default: 1
            allowNull: false
        zIndex: 0
        name: audio1
        active: false
        drawFunction: |-
          function () {
            var x = width * 0.5;
            var y = height * 0.5;
            var r = Math.min(x, y) - 20;
            var rad = Math.PI * 2;
            var length = bufferLength();
            var shift1 = Math.PI * 0.5;
            var shift2 = Math.PI * 1.5;

            var i, a, f, td, lx, ly, avg;

            // -----------------------------
            font('20px monospace');
            strokeStyle(layer.colorA);
            lineWidth(layer.widthA);
            beginPath();
            avg = 0;
            for (i = 0; i < length; i++) {
              avg += frequency(i);
              a = ((rad / length) * i) - shift1;
              f = (r / 100) * (frequency(i) / 2);
              lx = Math.round(x + Math.cos(a) * f);
              ly = Math.round(y + Math.sin(a) * f);
              lineTo(lx, ly);
            }
            stroke();

            beginPath();
            avg = avg / length;
            lineTo(0, avg);
            lineTo(width, avg);
            textAlign('left');
            fillStyle(layer.colorA);
            fillText(avg.toFixed(2), 10, avg - 5);
            stroke();

            i = 0;
            beginPath();
            grid(length, 1, function(x, y){
              lineTo(x, y + (frequency(i) * 0.5));
              i++;
            });
            stroke();

            // -----------------------------

            strokeStyle(layer.colorB);
            lineWidth(layer.widthB);
            beginPath();
            avg = 0;
            for (i = 0; i < length; i++) {
              avg += timeDomain(i);
              a = ((rad / length) * i) - shift2;
              td = (r / 100) * (timeDomain(i) / 2);
              lx = Math.round(x + Math.cos(a) * td);
              ly = Math.round(y + Math.sin(a) * td);
              lineTo(lx, ly);
            }
            stroke();

            beginPath();
            avg = avg / length;
            lineTo(0, avg);
            lineTo(width, avg);
            textAlign('right');
            fillStyle(layer.colorB);
            fillText(avg.toFixed(2), width - 10, avg - 5);
            stroke();

            i = 0;
            beginPath();
            grid(length, 1, function(x, y){
              lineTo(x, y + (timeDomain(i) * 0.5));
              i++;
            });
            stroke();
          }
        colorA: '#A581FF'
        widthA: 1
        colorB: '#66D9EF'
        widthB: 1
      - 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
  ar:
    type: SVG
    active: true
    opacity: 100
    zIndex: 0
    layerStyles: ''
    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: '17'
        default: '0'
      - name: '--translate-y'
        value: '-20vh'
        default: '-20vh'
  vf:
    type: SVG
    active: true
    opacity: 100
    zIndex: 0
    layerStyles: ''
    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) * 0.125);stroke-dashoffset:
        calc(var(--path-length) * 0.01 * 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: '22'
      - name: '--frametime'
        value: '0'
        default: '0'
      - name: '--beat'
        value: '17'
        default: '0'
      - name: '--translate-y'
        value: 20vh
        default: 20vh
  vjs:
    type: txt
    active: true
    opacity: 100
    zIndex: 0
    layerStyles: ''
    text: '77'
    styleProperties: []