Skip to content

Instantly share code, notes, and snippets.

/visual-fiha-setup.yml

Created March 15, 2017 12:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/51e37d94d945a2f1bf668c40aabb24ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/51e37d94d945a2f1bf668c40aabb24ab to your computer and use it in GitHub Desktop.
Download ZIP
This gist is a setup information for https://zeropaper.github.io/visual-fiha
Raw
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: []
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment