Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
175 lines (150 sloc) 7.37 KB
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="./vjotg.webmanifest">
<link rel="stylesheet" href="./style/style.css">
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/edf84e6e/webcomponents-sd-ce.js"></script>
<script src="./components/html-element-plus.js"></script>
<script src="vendor/three.js/three.min.js"></script>
<script src="vendor/three.js/Detector.js"></script>
<script src="./components/visuals/filters.js" defer></script>
<script src="./components/midi-controller.js" defer></script>
<script src="./components/midi-cc.js" defer></script>
<script src="./components/midi-pad.js" defer></script>
<script src="./fx.js" defer></script>
</head>
<body>
<div class="wrapper" id="vjotg">
<header>
<h1>VJ On.The.Go</h1>
</header>
<!-- Where visuals.js does it's rendering -->
<div id="screen">
<vj-otg-visuals>
<!-- load any assets that you want to use -->
<vj-otg-assets>
<video id="minnie" src="./assets/minnie-512.webm" width="512" height="512" autoplay="true" loop="true"></video>
<video id="potus" src="./assets/potus.webm" width="512" height="512" autoplay="true" loop="true"></video>
<!-- video from Beeple https://vimeo.com/channels/beeple/58460459 -->
<img id="shera" src="./assets/shera.jpg" />
<img id="hamster" src="./assets/hamster.jpg" />
</vj-otg-assets>
<!-- One can change attributes dynamically but do not remove/reorder/add or shader should recompile -->
<!-- refer to these assets later by assing them as sources here -->
<vj-otg-source-uniform src="#minnie" name="minnie" index="1"></vj-otg-source-uniform>
<vj-otg-source-uniform src="#potus" name="potus" index="2"></vj-otg-source-uniform>
<vj-otg-source-uniform src="#shera" name="shera" index="3"></vj-otg-source-uniform>
<!-- other uniforms you might want to use later -->
<vj-otg-audio-uniform threshold="80"></vj-otg-audio-uniform>
<vj-otg-time-uniform></vj-otg-time-uniform>
<vj-otg-midi-uniform name="cc1" midi-el="#cc1"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc2" midi-el="#cc2"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc3" midi-el="#cc3"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc4" midi-el="#cc4"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc5" midi-el="#cc5"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc6" midi-el="#cc6"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc7" midi-el="#cc7"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="cc8" midi-el="#cc8"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad1" midi-el="#pad1"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad2" midi-el="#pad2"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad3" midi-el="#pad3"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad4" midi-el="#pad4"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad5" midi-el="#pad5"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad6" midi-el="#pad6"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad7" midi-el="#pad7"></vj-otg-midi-uniform>
<vj-otg-midi-uniform name="pad8" midi-el="#pad8"></vj-otg-midi-uniform>
<!-- these are the groups for each media item, with effects and uniforms for controls -->
<!--
effects you can have:
distort: zoom, rotate
filter: hsl-gradient, splitx, main (anything)
uniforms you can use:
all midis
time, analyser
-->
<vj-otg-group name="channel1">
<!-- beat detection video split -->
<vj-otg-splitx source-name="minnie" size="[beat * 0.05]"></vj-otg-splitx>
<!-- add a gradient -->
<vj-otg-gradient start="150,0.92,0.54" stop="194,0.89,0.56" direction="3"></vj-otg-gradient>
</vj-otg-group>
<vj-otg-group name="channel2">
<!-- zoom -->
<vj-otg-zoom factor="[1.0 + 1.2 * pad5]" position="0.5, 0.5"></vj-otg-zoom>
<vj-otg-main>
float distanceFromCenter = length(centerCoord - newUV);
</vj-otg-main>
<!-- spiral distort -->
<vj-otg-rotate angle="[sqrt(distanceFromCenter) * 1000.0 * (pad6) + pad6 * 500.0 + 0.0]"></vj-otg-rotate>
<!-- rotate -->
<vj-otg-rotate angle="[pad7 * 360.0]"></vj-otg-rotate>
<vj-otg-static-texture source-name="potus"></vj-otg-static-texture>
</vj-otg-group>
<vj-otg-group name="channel3">
<vj-otg-graph1></vj-otg-graph1>
</vj-otg-group>
<vj-otg-group name="channel4">
<!-- symmetry -->
<vj-otg-mirror mode="[int(cc6 * 3.999)]"></vj-otg-mirror>
<!-- wave distort -->
<vj-otg-wave t="[time]" frequency="3.0" amplitude="[beat * 0.05]" speed="0.5"></vj-otg-wave>
<!-- add a checkerboard -->
<vj-otg-main>
float xOn = floor(mod(newUV.x * 8.0 , 2.0));
float yOn = floor(mod(newUV.y * 8.0 , 2.0));
[layer] = vec4(
mix(xOn , 1.0 - xOn, yOn),
cc5,
mix(xOn , 1.0 - xOn, yOn),
1.0
) * texture2D(shera, newUV);
[layer] = mix([layer], channel3, cc1 * channel3.a);
</vj-otg-main>
<vj-otg-static-texture source-name="shera"></vj-otg-static-texture>
</vj-otg-group>
<!-- this is everything and mixes all the previous media groups -->
<vj-otg-main>
<pre><code lang="c">
// float perlinNoise = clamp(snoise(vec3(newUV * 5.0, cc1)), 0.0, 1.0);
float cc1a = cc1 * channel1.a;
float cc2a = cc2 * channel2.a;
float cc3a = cc3 * channel3.a;
float cc4a = cc4 * channel4.a;
float total = cc1a + cc2a + cc3a + cc4a + 0.05;
[layer] = mix(noopVec4, channel1, cc1a / total) *
mix(noopVec4, channel2, cc2a / total) *
mix(noopVec4, channel3, cc3a / total) *
mix(noopVec4, channel4, cc4a / total) *
mix(noopVec4, (0.0 * noopVec4), 0.05 / total);
</code></pre>
</vj-otg-main>
</vj-otg-visuals>
</div>
<!--screen-->
<midi-controller class="midi-controls">
<!-- set values between 0-127 -->
<midi-pad channel-press="144" channel-release="128" note="36" value="127" id="pad1">PAD1</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="37" value="64" id="pad2">PAD2</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="38" value="64" id="pad3">PAD3</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="39" value="64" id="pad4">PAD4</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="40" value="64" id="pad5">PAD5</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="41" value="64" id="pad6">PAD6</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="42" value="64" id="pad7">PAD7</midi-pad>
<midi-pad channel-press="144" channel-release="128" note="43" value="64" id="pad8">PAD8</midi-pad>
<midi-cc id="cc1" channel="176" note="1" value="0">CC1</midi-cc>
<midi-cc id="cc2" channel="176" note="2" value="0">CC2</midi-cc>
<midi-cc id="cc3" channel="176" note="3" value="0">CC3</midi-cc>
<midi-cc id="cc4" channel="176" note="4" value="0">CC4</midi-cc>
<midi-cc id="cc5" channel="176" note="5" value="64">CC5</midi-cc>
<midi-cc id="cc6" channel="176" note="6" value="64">CC6</midi-cc>
<midi-cc id="cc7" channel="176" note="7" value="64">CC7</midi-cc>
<midi-cc id="cc8" channel="176" note="8" value="64">CC8</midi-cc>
</midi-controller>
</div>
<!--wrapper-->
</body>
</html>