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

visual-fiha-setup.json

{
  "layers": [
    {
      "name": "canvas",
      "type": "canvas",
      "canvasLayers": [
        {
          "props": {
            "active": {
              "type": "boolean",
              "required": true,
              "default": true,
              "allowNull": false
            },
            "opacity": {
              "type": "number",
              "required": true,
              "default": 100,
              "allowNull": false
            },
            "blending": {
              "type": "string",
              "required": true,
              "default": "source-over",
              "allowNull": false,
              "values": [
                "source-over",
                "source-in",
                "source-out",
                "source-atop",
                "destination-over",
                "destination-in",
                "destination-out",
                "destination-atop",
                "lighter",
                "copy",
                "xor"
              ]
            },
            "colorA": {
              "type": "string",
              "required": true,
              "default": "#bbb",
              "allowNull": false
            }
          },
          "duration": 1000,
          "fps": 16,
          "weight": 0,
          "name": "background",
          "active": false,
          "opacity": 0,
          "blending": "source-over",
          "drawFunction": "function (ctx) {\n      ctx.fillStyle = this.colorA;\n      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n    }",
          "colorA": "hsla(125,100%,0%,1)"
        },
        {
          "props": {
            "active": {
              "type": "boolean",
              "required": true,
              "default": true,
              "allowNull": false
            },
            "opacity": {
              "type": "number",
              "required": true,
              "default": 100,
              "allowNull": false
            },
            "blending": {
              "type": "string",
              "required": true,
              "default": "source-over",
              "allowNull": false,
              "values": [
                "source-over",
                "source-in",
                "source-out",
                "source-atop",
                "destination-over",
                "destination-in",
                "destination-out",
                "destination-atop",
                "lighter",
                "copy",
                "xor"
              ]
            },
            "reverse": {
              "type": "boolean",
              "required": true,
              "default": false,
              "allowNull": false
            },
            "src": {
              "type": "string",
              "required": true,
              "default": "./assets/kd/fire.mp4",
              "allowNull": false
            }
          },
          "duration": 1000,
          "fps": 16,
          "weight": 10,
          "name": "vidA",
          "active": false,
          "opacity": 100,
          "blending": "source-over",
          "drawFunction": "function (ctx) {\n      // var reverse = this.reverse;\n      // var frametime = (this.frametime || 0) * 0.001;\n      var url = this.src;\n      // var cache = this.cache;\n      window.VF.canvas.loaders.video(url, function(err, video) {\n        if (!video) return;\n\n        // var is = Math.min(video.videoWidth, video.videoHeight);\n        // var cs = Math.min(ctx.canvas.width, ctx.canvas.height);\n        // var s = Math.min(is, cs);\n        // var x = (ctx.canvas.width - s) * 0.5;\n        // var y = (ctx.canvas.height - s) * 0.5;\n\n\n        // var ct = frametime % video.duration;\n        // ct = reverse ? video.duration - ct : ct;\n        // video.currentTime = ct;\n        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, ctx.canvas.width, ctx.canvas.height);\n      });\n    }",
          "reverse": false,
          "src": "./assets/kd/fire.mp4"
        },
        {
          "props": {
            "active": {
              "type": "boolean",
              "required": true,
              "default": true,
              "allowNull": false
            },
            "opacity": {
              "type": "number",
              "required": true,
              "default": 100,
              "allowNull": false
            },
            "blending": {
              "type": "string",
              "required": true,
              "default": "source-over",
              "allowNull": false,
              "values": [
                "source-over",
                "source-in",
                "source-out",
                "source-atop",
                "destination-over",
                "destination-in",
                "destination-out",
                "destination-atop",
                "lighter",
                "copy",
                "xor"
              ]
            },
            "src": {
              "type": "string",
              "required": true,
              "default": "./assets/panorma-karl-marx-allee.jpg",
              "allowNull": false
            },
            "shift": {
              "type": "number",
              "required": true,
              "default": 0,
              "allowNull": false
            }
          },
          "duration": 1000,
          "fps": 16,
          "weight": 20,
          "name": "panorama",
          "active": false,
          "opacity": 100,
          "blending": "source-over",
          "drawFunction": "function (ctx) {\n      var url = this.src;\n      var shift = this.shift;\n      var frametime = this.screenState.frametime || 0;\n      window.VF.canvas.loaders.img(url, function(err, img) {\n        if (!img) return;\n        var iw = img.width;\n        var ih = img.height;\n        var cw = ctx.canvas.width;\n        var ch = ctx.canvas.height;\n        var fh = ch / ih;\n        var fw = cw / iw;\n        var sx = (frametime % (iw - (cw * fh)) + shift);\n        var dw = cw / fw;\n        var dh = ch / fh;\n\n        ctx.drawImage(img, sx, 0, iw, ih, 0, 0, dw, dh);\n      });\n    }",
          "src": "./assets/panorma-karl-marx-allee.jpg",
          "shift": 0
        },
        {
          "props": {
            "active": {
              "type": "boolean",
              "required": true,
              "default": true,
              "allowNull": false
            },
            "opacity": {
              "type": "number",
              "required": true,
              "default": 100,
              "allowNull": false
            },
            "blending": {
              "type": "string",
              "required": true,
              "default": "source-over",
              "allowNull": false,
              "values": [
                "source-over",
                "source-in",
                "source-out",
                "source-atop",
                "destination-over",
                "destination-in",
                "destination-out",
                "destination-atop",
                "lighter",
                "copy",
                "xor"
              ]
            }
          },
          "weight": 30,
          "name": "audio",
          "active": false,
          "opacity": 100,
          "blending": "xor",
          "drawFunction": "function roundFrequencies(ctx) {\n  var audio = this.screenState.audio || {};\n  var bufferLength = audio.bufferLength;\n  var freqArray = audio.frequency;\n  var timeDomainArray = audio.timeDomain;\n\n  if (!bufferLength || !freqArray || !timeDomainArray) return;\n\n  var x = ctx.canvas.width * 0.5;\n  var y = ctx.canvas.height * 0.5;\n  var r = Math.min(x, y) - 20;\n  // var first;\n  var rad = Math.PI * 2;\n\n  var i = 0, a, td, lx, ly;\n  var original = {\n    lineWidth: ctx.lineWidth,\n    lineCap: ctx.lineCap,\n    lineJoin: ctx.lineJoin,\n    strokeStyle: ctx.strokeStyle,\n  };\n\n  ctx.lineJoin = 'round';\n  ctx.lineCap = 'round';\n\n  ctx.strokeStyle = 'red';\n  var col;\n  for (var lw = y*2; lw >= y*0.2; lw-=y*0.2) {\n    col = col === 'white' ? 'black' : 'white';\n    ctx.strokeStyle = col;\n    ctx.lineWidth = lw;\n\n    // ctx.beginPath();\n    // for (i = 0; i < bufferLength; i++) {\n    //   a = ((rad / bufferLength) * i) - Math.PI;\n    //   f = (r / 100) * (freqArray[i] / 2);\n    //   lx = Math.round(x + Math.cos(a) * f);\n    //   ly = Math.round(y + Math.sin(a) * f);\n    //   ctx.lineTo(lx, ly);\n    // }\n    // ctx.stroke();\n\n    ctx.beginPath();\n    for (i = 0; i < bufferLength; i++) {\n      a = ((rad / bufferLength) * i) - Math.PI;\n      td = (r / 100) * (timeDomainArray[i] / 2);\n      lx = Math.round(x + Math.cos(a) * td);\n      ly = Math.round(y + Math.sin(a) * td);\n      ctx.lineTo(lx, ly);\n    }\n    ctx.stroke();\n  }\n\n  ctx.lineWidth = original.lineWidth;\n  ctx.lineCap = original.lineCap;\n  ctx.lineJoin = original.lineJoin;\n  ctx.strokeStyle = original.strokeStyle;\n}"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "color:a",
      "type": "hslaSignal",
      "defaultValue": "180,50%,50%,1",
      "input": "180,50%,50%,1",
      "transformations": []
    },
    {
      "name": "beat:a",
      "type": "beatSignal",
      "defaultValue": 1,
      "input": 125,
      "transformations": []
    },
    {
      "name": "padX*3.6",
      "type": "default",
      "defaultValue": 1,
      "input": 1,
      "transformations": [
        {
          "name": "math.multiply",
          "arguments": [
            3.6
          ]
        }
      ]
    },
    {
      "name": "beat:a*3.6",
      "type": "default",
      "defaultValue": 1,
      "input": 1,
      "transformations": [
        {
          "name": "math.multiply",
          "arguments": [
            3.6
          ]
        }
      ]
    }
  ],
  "mappings": [
    {
      "source": "frametime",
      "target": "signals.beat:a.frametime",
      "transform": "function (v) {\n  return v * 0.5;\n}"
    },
    {
      "source": "midiAccess.inputs.nk2.slider1",
      "target": "signals.color:a.lightness",
      "transform": "function (v) {\n  return (v /127) * 100;\n}"
    },
    {
      "source": "signals.beat:a.result",
      "target": "signals.color:a.hue",
      "transform": ""
    },
    {
      "source": "frametime",
      "target": "layers.canvas.canvasLayers.background.opacity",
      "transform": "function (v) {\n  return v % 100;\n}"
    },
    {
      "source": "midiAccess.inputs.nk2.r1",
      "target": "layers.canvas.canvasLayers.background.active",
      "transform": "function (v) {\n  return !!v;\n}"
    },
    {
      "source": "signals.color:a.result",
      "target": "layers.canvas.canvasLayers.background.colorA",
      "transform": ""
    }
  ]
}