Skip to content

Commit a1c47c8

Browse files
author
Andrea Bovo
committed
shepard glitch me
0 parents  commit a1c47c8

File tree

12 files changed

+3821
-0
lines changed

12 files changed

+3821
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
src

‎LICENSE.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
The MIT License (MIT)
3+
4+
Copyright (c) 2017 Andrea Bovo
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in all
14+
copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
SOFTWARE.

‎README.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
<p align="center" style="text-align:center;">
3+
<a href="https://aframe.io/"><img src="https://img.shields.io/badge/vr%20framework-a--frame-lightgrey.svg?style=flat-square"></a>
4+
</p>
5+
6+
# shepard glitch me
7+
8+
> A [WebVR](https://en.wikipedia.org/wiki/WebVR)/[WebGL](https://en.wikipedia.org/wiki/WebGL) experiment. A reactive audio chewing about risk, fall & Shepard's tones.
9+
10+
# demos
11+
12+
[webcam version](https://spleennooname.github.io/shepard-glitch-me/build/index-webcam.html)
13+
14+
[video version](https://spleennooname.github.io/shepard-glitch-me/build/index.html)
15+
16+
17+
### install
18+
19+
clone repo:
20+
21+
```bash
22+
git clone https://github.com/spleennooname/shepard-glitch-me.git
23+
```
24+
25+
then install deps:
26+
27+
```bash
28+
yarn install
29+
```
30+
31+
### build
32+
33+
```sh
34+
yarn run build
35+
```
36+
37+
### live
38+
39+
```bash
40+
yarn run live # Start the local development server.
41+
```
42+
43+
& open in your browser **[http://localhost:8080](http://localhost:8080)**.
44+
45+
## refs
46+
47+
[Equations Motion - soulwire](https://codepen.io/soulwire/pen/kqHxB)
48+
49+
[Shepard Tones](https://en.wikipedia.org/wiki/Shepard_tone)
50+
51+
52+
## thx, credits + respect
53+
54+
- iq for [ShaderToy](https://shadertoy.com)
55+
- [wizgrav](https://github.com/wizgrav) for [ClubberJS](https://github.com/wizgrav/clubber)
56+
- Mozilla for [A-FRAME](https://aframe.io)
57+
- [Neri](https://github.com/jiin) & all [MONOGRID](http://mono-grid.com/) crew

‎build/app.bundle.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index-webcam.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<title>SHEPARD GLITCH ME - a webvr/webgl experiment for DDD - spleen666@gmail.com</title>
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, maximum-scale=1">
10+
<script src="shepardglitchme.bundle.js"></script>
11+
12+
</head>
13+
<body>
14+
<a-scene effects="film, colors"
15+
bloom="strength: 0.05; radius: 0.05; threshold: 0.15"
16+
colors="mode: g"
17+
film="nIntensity: 5.75; speed: 2.0; sIntensity: 0.05">
18+
<!-- ASSETS -->
19+
<a-assets>
20+
<video id="cam" src width="640" height="480" muted crossorigin autoplay loop webkit-playinsline playsinline></video>
21+
<audio id="shepard" src="mp3/descent_shepard.mp3" crossorigin autoplay loop></audio>
22+
</a-assets>
23+
<!-- /ASSETS -->
24+
<a-sky color="#fff"></a-sky>
25+
<!-- WEBCAM -->
26+
<a-video material="src: #cam; shader: webcam-shader;" geometry="primitive: curved-plane; width: 6; height: 4.5;" a-webcam render-shader look-at="#camera" width="6" height="4.5"></a-video>
27+
<!-- WEBCAM -->
28+
<!-- CAMERA + CURSOR -->
29+
<a-entity id="camera" camera="userHeight: 1.75; fov: 73 ; zoom:1" look-controls="enabled: true" wasd-controls="enabled: true" position="0.0 0.0 5.0" rotation="-30.0 0.0 0.0">
30+
<a-entity
31+
id="cursor"
32+
cursor="fuse: true; fuseTimeout: 1000"
33+
position="0.0 0.0 -2.0"
34+
rotation="0.0 0.0 0.0"
35+
fuse-ring
36+
geometry="primitive: ring; radiusInner: 0.075; radiusOuter: 0.09"
37+
material="shader: flat; color: #000; opacity: 1.0"
38+
animation__1="property: scale; startEvents: click; from: 1.0 1.0 1.0; to: 0.5 0.5 0.5; dir: normal; dur: 1000; easing: easeInQuint"
39+
animation__3="property: opacity; startEvents: mouseenter; from: 1.0; to: 0.25; dir: normal; dur: 1000; easing: easeInQuint"
40+
animation__2="property: scale; startEvents: mouseleave; from: 0.5 0.5 0.5; to: 1.0 1.0 1.0; dir: normal; dur: 1000; easing: easeOutQuint"
41+
event-set__1="_event: mouseenter; opacity: 0.5"
42+
event-set__2="_event: mouseleave; opacity: 1.0"></a-entity>
43+
</a-entity>
44+
<!-- /CAMERA + CURSOR -->
45+
</a-scene>
46+
47+
<div class="by">
48+
<h2>SHEPARD GLITCH ME</h2>
49+
<p>b/w chewing on
50+
<a href="https://en.wikipedia.org/wiki/Shepard_tone" target="_blank">Shepard's descending tones</a><br/></p>
51+
<p>techs: WebVR, WebGL, GLSL</p>
52+
<p>drag && look && listen<br/>
53+
<!--<p>by <a href="https://github.com/spleennooname" target="_blank">spleennooname</a></p>
54+
<p>techs: WebVR, WebGL, GLSL | <a href="https://aframe.io" target="_blank">A-Frame</a>, <a href="https://github.com/wizgrav/clubber" target="_blank">clubber</a></p> -->
55+
</div>
56+
57+
<!--githubcorner-->
58+
<a href="https://github.com/spleennooname/shepard-glitch-me/" target="_blank" class="github-corner">
59+
<svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: absolute; top: 0; border: 0; right: 0;">
60+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
61+
<path
62+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
63+
fill="currentColor"
64+
style="transform-origin: 130px 106px;"
65+
class="octo-arm"></path>
66+
<path
67+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
68+
fill="currentColor"
69+
class="octo-body"></path>
70+
</svg>
71+
</a>
72+
<style>
73+
.github-corner:hover .octo-arm {
74+
animation: octocat-wave 560ms ease-in-out;
75+
}
76+
@keyframes octocat-wave {
77+
0%,
78+
100% {
79+
transform: rotate(0);
80+
}
81+
20%,
82+
60% {
83+
transform: rotate(-25deg);
84+
}
85+
40%,
86+
80% {
87+
transform: rotate(10deg);
88+
}
89+
}
90+
@media (max-width:500px) {
91+
.github-corner:hover .octo-arm {
92+
animation: none;
93+
}
94+
.github-corner .octo-arm {
95+
animation: octocat-wave 560ms ease-in-out;
96+
}
97+
}
98+
</style>
99+
<!--endgithubcorner-->
100+
</body>
101+
</html>

‎build/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SHEPARD GLITCH ME - a WebVR/WebGL experiment for DDD2017 - spleen666@gmail.com</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, maximum-scale=1">
9+
<script src="shepardglitchme.bundle.js"></script>
10+
</head>
11+
<body>
12+
<a-scene vr-mode-ui="enabled: false" effects="bloom, film, colors" bloom="strength: 0.10; radius: 0.10; threshold: 0.5" colors="mode: g" film="nIntensity: 10.75; sIntensity: 0.45">
13+
<!-- ASSETS -->
14+
<a-assets>
15+
<video id="cam" src="mp4/justify_my_love.mp4" width="640" height="480" muted crossorigin autoplay loop webkit-playinsline playsinline></video>
16+
<audio id="shepard" src="mp3/descent_shepard.mp3" crossorigin autoplay loop></audio>
17+
</a-assets>
18+
<!-- /ASSETS -->
19+
<a-sky color="#ffffff"></a-sky>
20+
<!-- video -->
21+
<a-video material="src: #cam; shader: webcam-shader;" geometry="primitive: curved-plane; width: 6; height: 4.5; segmentsHeight: 16; segmentsWidth: 16" render-shader look-at="#camera" width="6" height="4.5"></a-video>
22+
<!-- /video -->
23+
<!-- CAMERA + CURSOR -->
24+
<a-entity id="camera" camera="userHeight: 1.75; fov: 73; zoom:1" look-controls="enabled: true" wasd-controls="enabled: true" position="0.0 0.0 6.0" rotation="-30.0 0.0 -5.0">
25+
<a-entity id="cursor"
26+
cursor="fuse: true; fuseTimeout: 1000"
27+
position="0.0 0.0 -2.0"
28+
rotation="0.0 0.0 0.0"
29+
fuse-ring
30+
geometry="primitive: ring; radiusInner: 0.075; radiusOuter: 0.09"
31+
material="shader: flat; color: #000; opacity: 0.85"
32+
animation__1="property: scale; startEvents: click; from: 1.0 1.0 1.0; to: 0.5 0.5 0.5; dir: normal; dur: 1000; easing: easeInQuint"
33+
animation__2="property: scale; startEvents: mouseleave; from: 0.5 0.5 0.5; to: 1.0 1.0 1.0; dir: normal; dur: 1000; easing: easeOutQuint"
34+
event-set__1="_event: mouseenter; opacity: 0.75"
35+
event-set__2="_event: mouseleave; opacity: 1.0"></a-entity>
36+
</a-entity>
37+
<!-- /CAMERA + CURSOR -->
38+
</a-scene>
39+
40+
<div class="by">
41+
<h2>SHEPARD GLITCH ME</h2>
42+
<p>b/w chewing on <a href="https://en.wikipedia.org/wiki/Shepard_tone" target="_blank">Shepard's descending tones</a><br/></p>
43+
<p>techs: WebVR, WebGL, GLSL</p>
44+
<p><br/>drag, look, listen.</p>
45+
</div>
46+
47+
</body>
48+
</html>

‎build/mp3/descent_shepard.mp3‎

1 MB
Binary file not shown.

‎build/mp4/justify_my_love.mp4‎

26.8 MB
Binary file not shown.

‎build/shepardglitchme.bundle.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "shepard-glitch-me",
3+
"version": "0.0.1",
4+
"main": "index.js",
5+
"author": "Andrea Bovo - <spleen666@gmail.com>",
6+
"description": "a reactive audio chewing about risk, fall & Shepard's tones.",
7+
"scripts": {
8+
"build": "webpack -p --config webpack.config.js --display-reasons --display-modules",
9+
"live": "webpack-dev-server --https --colors --hot --inline --config webpack.config.js --content-base build --watch-content-base"
10+
},
11+
"homepage": "https://github.com/spleennooname/shepard-glitch-me",
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/spleennooname/shepard-glitch-me.git"
15+
},
16+
"keywords": [
17+
"webgl",
18+
"clubber",
19+
"glsl",
20+
"shepard",
21+
"webaudio",
22+
"aframe",
23+
"aframe-component",
24+
"aframe-vr",
25+
"vr",
26+
"mozvr",
27+
"webvr"
28+
],
29+
"devDependencies": {
30+
"css-loader": "^0.26.1",
31+
"eslint": "^3.19.0",
32+
"eslint-loader": "^1.7.1",
33+
"shader-loader": "^1.3.0",
34+
"style-loader": "^0.13.1",
35+
"webpack": "^2.4.1",
36+
"webpack-dev-server": "^2.4.4"
37+
}
38+
}

0 commit comments

Comments
 (0)