Created
January 8, 2017 18:50
-
-
Save anonymous/f29bfd3dbc2caa30c5bcf9b2ce949806 to your computer and use it in GitHub Desktop.
This gist is a setup information for https://zeropaper.github.io/visual-fiha
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"layers": [ | |
{ | |
"active": true, | |
"mixBlendMode": "normal", | |
"name": "no-signal", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "img", | |
"zIndex": 0, | |
"src": "./assets/no-signal.jpg", | |
"backgroundSize": "cover", | |
"backgroundPosition": "center", | |
"backgroundRepeat": "no-repeat" | |
}, | |
{ | |
"active": false, | |
"mixBlendMode": "normal", | |
"name": "Sky-1-back", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "img", | |
"zIndex": 0, | |
"src": "./assets/sky1/sky1-back-grey.png", | |
"backgroundSize": "cover", | |
"backgroundPosition": "center", | |
"backgroundRepeat": "no-repeat" | |
}, | |
{ | |
"active": false, | |
"mixBlendMode": "normal", | |
"name": "zeropaper", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "SVG", | |
"zIndex": 0, | |
"src": "./assets/zeropaper-fat.svg", | |
"styles": "" | |
}, | |
{ | |
"active": true, | |
"mixBlendMode": "normal", | |
"name": "vf", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "SVG", | |
"zIndex": 0, | |
"src": "./assets/visual-fiha.svg", | |
"styles": "" | |
}, | |
{ | |
"active": false, | |
"mixBlendMode": "normal", | |
"name": "KD", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "SVG", | |
"zIndex": 0, | |
"src": "./assets/kd/kd_logo_final.svg", | |
"styles": "" | |
}, | |
{ | |
"active": true, | |
"mixBlendMode": "normal", | |
"name": "canvas", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "canvas", | |
"zIndex": 0, | |
"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" | |
] | |
} | |
}, | |
"duration": 1000, | |
"fps": 16, | |
"weight": 30, | |
"name": "audio", | |
"active": false, | |
"opacity": 100, | |
"blending": "source-over", | |
"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}" | |
}, | |
{ | |
"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" | |
] | |
}, | |
"borderWidth": { | |
"type": "number", | |
"required": true, | |
"default": 0, | |
"allowNull": false | |
}, | |
"barWidth": { | |
"type": "number", | |
"required": true, | |
"default": 50, | |
"allowNull": false | |
}, | |
"barColor": { | |
"type": "string", | |
"required": true, | |
"default": "rgb(234, 105, 41)", | |
"allowNull": false | |
}, | |
"borderColor": { | |
"type": "string", | |
"required": true, | |
"default": "rgb(236, 183, 156)", | |
"allowNull": false | |
}, | |
"beat": { | |
"type": "number", | |
"required": true, | |
"default": 100, | |
"allowNull": false | |
} | |
}, | |
"duration": 1000, | |
"fps": 16, | |
"weight": 40, | |
"name": "loungeA", | |
"active": false, | |
"opacity": 100, | |
"blending": "source-over", | |
"drawFunction": "function (ctx) {\n var cw = ctx.canvas.width;\n var ch = ctx.canvas.height;\n var bw = Math.max(1, this.barWidth);\n var bbw = this.borderWidth;\n var sh = (bw - (ch % bw)) * 0.5;\n var c = (ch / Math.max(2, bw)) + bw;\n var s = this.frametime % cw;\n var dl = window.VF.canvasTools.drawLine;\n var b, l, r, y;\n\n ctx.fillStyle = this.barColor;\n ctx.strokeStyle = this.borderColor;\n\n\n for (b = 0; b < c; b++) {\n if (b % 2) {\n l = s - cw;\n r = l + cw;\n y = (b * bw) - sh;\n dl(ctx, l, y, r, y, bw, bbw);\n }\n else {\n l = s + cw;\n r = l - cw;\n y = (b * bw) - sh;\n dl(ctx, r, y, l, y, bw, bbw);\n }\n }\n }", | |
"borderWidth": 0, | |
"barWidth": 50, | |
"barColor": "rgb(234, 105, 41)", | |
"borderColor": "rgb(236, 183, 156)", | |
"beat": 100 | |
}, | |
{ | |
"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" | |
] | |
}, | |
"barWidth": { | |
"type": "number", | |
"required": true, | |
"default": 50, | |
"allowNull": false | |
}, | |
"barColor": { | |
"type": "string", | |
"required": true, | |
"default": "#fff", | |
"allowNull": false | |
}, | |
"borderColor": { | |
"type": "string", | |
"required": true, | |
"default": "#fff", | |
"allowNull": false | |
}, | |
"arbitraryA": { | |
"type": "number", | |
"required": true, | |
"default": 10, | |
"allowNull": false | |
}, | |
"arbitraryB": { | |
"type": "number", | |
"required": true, | |
"default": 10, | |
"allowNull": false | |
} | |
}, | |
"duration": 1000, | |
"fps": 16, | |
"weight": 50, | |
"name": "lines", | |
"active": false, | |
"opacity": 100, | |
"blending": "source-over", | |
"drawFunction": "function (ctx) {\n var h;\n var w;\n var vh;\n var vw;\n var cw = ctx.canvas.width;\n var ch = ctx.canvas.height;\n var hcw = cw * 0.5;\n var hch = ch * 0.5;\n var bw = Math.max(1, this.barWidth || 0);\n var bbw = bw * 0.25;\n var dl = window.VF.canvasTools.drawLine;\n // dl(ctx, 100, 100, 200, 100, 50, 2);\n\n // dl(ctx, 100, 200, 200, 350, 50, 2);\n\n var _ca = 100 - this.arbitraryA;\n var _cb = 100 - this.arbitraryB;\n var dbw = bw * 2;\n ctx.barColor = this.barColor;\n // ctx.lineWidth = bw;\n\n vh = (ch / 200) * _ca;\n for (w = (hcw - (Math.floor(hcw / dbw) * dbw)); w <= cw; w += dbw) {\n dl(ctx, w, vh, w, ch - vh, bw, bbw);\n }\n\n vw = (cw / 200) * _cb;\n for (h = (hch - (Math.floor(hcw / dbw) * dbw)); h <= ch; h += dbw) {\n dl(ctx, vw, h, cw - vw, h, bw, bbw, true);\n }\n }", | |
"barWidth": 50, | |
"barColor": "#fff", | |
"borderColor": "#fff", | |
"arbitraryA": 10, | |
"arbitraryB": 10 | |
}, | |
{ | |
"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" | |
] | |
} | |
}, | |
"duration": 1000, | |
"fps": 16, | |
"weight": 60, | |
"name": "frametime", | |
"active": false, | |
"opacity": 100, | |
"blending": "source-over", | |
"drawFunction": "function frametime(ctx) {\n var cx = ctx.canvas.width * 0.5;\n var cy = ctx.canvas.height * 0.5;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.font = (cy * 0.25) + 'px monospace';\n var ft = Math.round(this.screenState.frametime) + 'ms';\n ctx.fillStyle = '#000';\n ctx.strokeStyle = '#fff';\n ctx.fillText(ft, cx, cy);\n ctx.strokeText(ft, cx, cy);\n}" | |
}, | |
{ | |
"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" | |
] | |
} | |
}, | |
"duration": 1000, | |
"fps": 16, | |
"weight": 60, | |
"name": "fps", | |
"active": false, | |
"opacity": 100, | |
"blending": "source-over", | |
"drawFunction": "function fps(ctx) {\n var cx = ctx.canvas.width * 0.5;\n var cy = ctx.canvas.height * 0.5;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.font = (cy * 0.25) + 'px monospace';\n\n var cache = this.cache;\n var screen = this.screenState;\n\n cache.previous = cache.previous || 0;\n var fps = Math.round(1000 / (screen.frametime - cache.previous)) + 'fps';\n ctx.lineWidth = 3;\n ctx.fillStyle = '#000';\n ctx.strokeStyle = '#fff';\n ctx.fillText(fps, cx, cy);\n ctx.strokeText(fps, cx, cy);\n cache.previous = screen.frametime;\n}" | |
} | |
] | |
}, | |
{ | |
"active": false, | |
"mixBlendMode": "normal", | |
"name": "Sky-1-front", | |
"opacity": 100, | |
"rotateX": 0, | |
"rotateY": 0, | |
"rotateZ": 0, | |
"translateX": 0, | |
"translateY": 0, | |
"scaleX": 100, | |
"scaleY": 100, | |
"skewX": 0, | |
"skewY": 0, | |
"type": "img", | |
"zIndex": 0, | |
"src": "./assets/sky1/sky1-front-grey.png", | |
"backgroundSize": "cover", | |
"backgroundPosition": "center", | |
"backgroundRepeat": "no-repeat" | |
} | |
], | |
"signals": [ | |
{ | |
"name": "color:a", | |
"type": "hslaSignal", | |
"defaultValue": "180,50%,50%,1", | |
"input": "180,50%,50%,1", | |
"transformations": [] | |
}, | |
{ | |
"name": "color:b", | |
"type": "hslaSignal", | |
"defaultValue": "190,50%,50%,1", | |
"input": "190,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": "" | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment