Skip to content

Commit 0d00c6e

Browse files
RumyraRumyra
committed
adding an auto view
1 parent 7dedf8e commit 0d00c6e

File tree

9 files changed

+157
-10
lines changed

9 files changed

+157
-10
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,6 @@ jspm_packages
3838

3939
# envvars
4040
.env
41+
42+
# library assets
43+
library

‎public/library/.DS_Store‎

2 KB
Binary file not shown.

‎public/scripts/library.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,16 +80,20 @@ var library = {
8080
superChart,
8181
superSun,
8282
spectrum,
83+
superChart,
8384
stripes
8485
],
8586

8687
diagCirc: [
87-
diagonalCircles,
88-
diagCircLine,
8988
dots,
9089
dots2,
90+
diagonalCircles,
91+
diagCircLine,
92+
9193
triangles,
92-
triangles2
94+
triangles2,
95+
diagonalCircles,
96+
diagCircLine
9397
]
9498

9599
}

‎public/scripts/sets.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ var sets = [
33
{name: 'abstract', type: 'video'},
44
{name: 'cartoons1', type: 'video'},
55
{name: 'cartoons2', type: 'video'},
6-
{name: 'jsConf', type: 'dom'},
76
{name: 'centStripes', type: 'dom'},
8-
{name: 'diagCirc', type: 'dom'},
9-
{name: 'setOne', type: 'dom'}
7+
{name: 'diagCirc', type: 'dom'}
108
]

‎public/scripts/setup.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ const blackEl = document.getElementById('black'),
2222

2323
var set = sets[0],
2424
screenNo = 1,
25-
threshold = 0;
25+
threshold = 100;
26+
27+
var screenDomFunc = [diagonalCircles, dots];
2628

2729
const easing = BezierEasing(0.01, 0.8, 0.8, 0.01);
2830
const audioApi = new window.AudioContext;
@@ -84,8 +86,6 @@ document.addEventListener('keyup', (event) => {
8486
}
8587
}, false);
8688

87-
var screenDomFunc = [diagonalCircles, dots];
88-
8989
// getUserMedia success callback -> pipe audio stream into audio API
9090
function gotStream(stream) {
9191
// Create an audio input from the stream.

‎server.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ app.get('/', (req, res) => {
1919
app.get('/screen', (req, res) => {
2020
res.render('screen');
2121
});
22+
app.get('/auto', (req, res) => {
23+
res.render('auto');
24+
});
2225

2326
app.listen(process.env.PORT || 3000);
2427

‎src/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ body {
5656
.video {display:none;}
5757
.video video {width:100%; height:auto;}
5858

59-
svg {
59+
svg, canvas {
6060
width: 100vw;
6161
height: 100vh;
6262
padding: 0px;

‎views/auto.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--char set (lang above)-->
5+
<meta charset="utf-8">
6+
7+
<!--device/browser shizzle-->
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<!--meta content-->
12+
<link rel="shortcut icon" href="favicon.ico" />
13+
14+
<meta name="author" content="Ruth John (@rumyra)">
15+
<meta name="dcterms.rightsHolder" content="Ruth John for Rumyra Ltd, United Kingdom, 2015">
16+
<title>Vizra | Browser based VJing software by Rumyra</title>
17+
18+
<link rel="stylesheet" href="styles/style.css">
19+
20+
</head>
21+
<body>
22+
23+
<div class="container">
24+
25+
<section id="screen">
26+
27+
<div class="screen">
28+
<section class="video">
29+
<video autoplay loop>
30+
<source src="library/cartoons1/thundercats01.mp4" type="video/mp4">
31+
</video>
32+
</section>
33+
<section class="dom">
34+
<svg></svg>
35+
<canvas></canvas>
36+
</section>
37+
</div>
38+
39+
40+
<div class="screen">
41+
<section class="video">
42+
<video autoplay loop>
43+
<source src="library/cartoons1/heman.mp4" type="video/mp4">
44+
</video>
45+
</section>
46+
<section class="dom">
47+
<svg></svg>
48+
<canvas></canvas>
49+
</section>
50+
</div>
51+
52+
<div id="black"></div>
53+
<div id="white"></div>
54+
</section>
55+
</div>
56+
57+
58+
<script src="scripts/bezier.js"></script>
59+
<script src="scripts/d3.min.js"></script>
60+
<script src="scripts/midiCont.js"></script>
61+
<script src="scripts/sets.js"></script>
62+
63+
<script src="scripts/visualFuncs.js"></script>
64+
<script src="scripts/library.js"></script>
65+
<script src="scripts/control.js"></script>
66+
<script src="scripts/setup.js"></script>
67+
68+
<script type="text/javascript">
69+
70+
var setCounter = 0;
71+
var currentSet = sets[setCounter];
72+
function swapSet() {
73+
if (setCounter === (sets.length-1)) {
74+
setCounter = 0;
75+
} else {
76+
setCounter++;
77+
}
78+
currentSet = sets[setCounter];
79+
}
80+
81+
var assetCounter = 0;
82+
function swapAsset() {
83+
84+
if (currentSet.type === 'video') {
85+
86+
changeVidSrc(videoEls[screenNo], 'library/'+currentSet.name+'/'+library.video[currentSet.name][assetCounter]+'.mp4');
87+
88+
console.log(library.video[currentSet.name][assetCounter]);
89+
90+
showVideo(vidScreens[screenNo], domScreens[screenNo]);
91+
92+
93+
} else {
94+
95+
var svg = d3.select(svgEls[screenNo]);
96+
svg.selectAll('*').remove();
97+
showCss(vidScreens[screenNo], domScreens[screenNo]);
98+
screenDomFunc[screenNo] = library.dom[currentSet.name][assetCounter];
99+
// reqAnim();
100+
101+
}
102+
103+
if (assetCounter === 7) {
104+
assetCounter = 0;
105+
} else {
106+
assetCounter++;
107+
}
108+
109+
if (screenNo === 1) {
110+
screenNo = 0;
111+
} else {
112+
screenNo = 1;
113+
}
114+
115+
}
116+
// swapAsset();
117+
118+
// function swapVid() {
119+
// // console.log('called');
120+
// var newInt = getRandomInt(0,37);
121+
// var vidEl = videoElOne;
122+
// var vidSrc = allTheVids.videos[newInt];
123+
// console.log(vidSrc, vidEl);
124+
// if (counter%2 === 0) {
125+
// vidEl = videoElTwo;
126+
// }
127+
// changeVidSrc(vidEl, 'media/'+allTheVids.videos[newInt]+'.mp4');
128+
// counter++;
129+
// }
130+
131+
setInterval(swapAsset, 10000);
132+
setInterval(swapSet, 80000);
133+
134+
135+
</script>
136+
</body>
137+
</html>

‎views/screen.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
</section>
3333
<section class="dom">
3434
<svg></svg>
35+
<canvas></canvas>
3536
</section>
3637
</div>
3738

@@ -44,6 +45,7 @@
4445
</section>
4546
<section class="dom">
4647
<svg></svg>
48+
<canvas></canvas>
4749
</section>
4850
</div>
4951

0 commit comments

Comments
 (0)