Created
March 15, 2017 12:21
-
-
Save anonymous/51e37d94d945a2f1bf668c40aabb24ab 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
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: [] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment