154 build/css/main.css
View file
@@ -0,0 +1,154 @@

@font-face {
font-family: 'Avant garde';
src: url('../fonts/avant-garde/avant-garde.eot'); /* IE9 Compat Modes */
src: url('../fonts/avant-garde/avant-garde.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/avant-garde/avant-garde.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/avant-garde/avant-garde.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/avant-garde/avant-garde.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
font-stretch: normal;
}

body {
position: absolute;
margin:0;
padding:0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #FFFFFF;
font-family: 'Avant garde';
color:#333333;


}
canvas#webgl {
position: absolute;
width: 80%;
height: 80%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*z-index: -1;*/
box-shadow: 0px 0px 120px -6px rgba(115,119,243,0.12);
/*box-shadow: 0px 0px 120px -6px rgba(23, 90, 214, 0.21);*/
}
canvas#texture {
position:absolute;
pointer-events: none;
left:0px;
top:0px;
z-index: 100;
opacity: 0;

}

/*INTRO*/
#intro {
position: absolute;
width: 80.2%;
height: 80%;
top:20%;
left:20%;
margin-left: -10.1%;
margin-top: -10%;
background-color: white;
z-index: 1;
text-align: center;
/*opacity: 0;*/
/*pointer-events: none;*/
}

#intro .title {
margin-top:20%;
font-size: 64px;
}
#intro .credits {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom:20px;
border-bottom: 2px solid black;
color:#333333;
text-decoration: none;
}
#intro .credits a {
border-bottom: 2px solid black;
color:#333333;
text-decoration: none;
}
#intro .credits a:hover {
background-position: 0px 40px;
}
#start {
position: absolute;
left:50%;
top: 50%;
-webkit-perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
transform: translate(-50%,-50%);
cursor:pointer;
}
.cube {
position: relative;
/*padding: 100px auto 0;*/
height: 100px;
width: 200px;
-webkit-transition: -webkit-transform .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-webkit-transform-style: preserve-3d;
}

.face {
position: absolute;
height: 100px;
width: 200px;
padding: 0px;
font-size: 27px;
line-height: 1em;

}

.cube .front {

-webkit-transform: rotateX(88deg) translateZ(45px);
background-image:url("../assets/bg.png");
background-position: 0px 0px;
}
.cube .bottom {

-webkit-transform: rotateX(-88deg) translateZ(45px);
background-image:url("../assets/bg.png");
background-position: 0px 0px;
}

#start:hover .cube{
-webkit-transform:rotateX(-90deg);
}

#start:hover .front{
background-position: 0px -105px;
}
#start:hover .bottom{
background-position: 0px 105px;
}
#intro .strip {
position: absolute;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:url("../assets/bg2.png");
background-position: 0px 15px;
line-height: 80px;
font-size: 44px;
transition: background-position 0.5s;
font-family: 'Avant garde';
text-transform: uppercase;
pointer-events: none;
left:50%;
top:50%;
margin-top:-6px;
transform: translate(-50%,-50%);
color:#333333;

}
BIN +5.61 MB build/fonts/sound3.mp3
View file
Binary file not shown.
BIN +5.61 MB build/sound3.mp3
View file
Binary file not shown.
31 build/vendors/Sound.js
View file
@@ -47,16 +47,16 @@ class Sound extends Emitter {
console.log(this._source );
this.player.setAttribute('src', this.url);
this.player.play();
// this.player.currentTime = 116;
this.player.currentTime = 0;
// this.player.currentTime = 80;
// this.player.currentTime = 0;

window.source = this._source;

var gainNode = this._context.createGain();

this._source.connect(gainNode);
gainNode.connect(this._context.destination);
// gainNode.gain.value = -1;
gainNode.gain.value = -1;


this.emit( "start" )
@@ -72,29 +72,48 @@ class Sound extends Emitter {
let _fregAverage = 0;
let _bassAverage = 0;
let _acuteAverage = 0;
let _freq5Average = [0,0,0,0,0];


// 174 because other values are always at 0
for (var i = 0; i < 174; i++) {
_fregAverage +=this._dataFreqArray[i];
if(i<5 && i>0) {
_bassAverage += this._dataFreqArray[i];
}

if(i> 174 - 5) {
_acuteAverage += this._dataFreqArray[i];
}
if(i>0 && i<10) {
_freq5Average[0]+=this._dataFreqArray[i];
}
if(i>50 && i<60) {
_freq5Average[1]+=this._dataFreqArray[i];
}
if(i>80 && i<90) {
_freq5Average[2]+=this._dataFreqArray[i];
}
if(i>120 && i<130) {
_freq5Average[3]+=this._dataFreqArray[i];
}
if(i>155 && i<160) {
_freq5Average[4]+=this._dataFreqArray[i];
}

}
_fregAverage = _fregAverage/this._dataFreqArray.length;
_fregAverage = _fregAverage/(255*174);
_bassAverage = _bassAverage/(255*4);
_acuteAverage = _acuteAverage/(255*4);
// console.log(_acuteAverage);
for (var i = 0; i < _freq5Average.length; i++) {
_freq5Average[i] = _freq5Average[i]/200
}



// this._context.currentTime = 50;

return {
freq5:_freq5Average,
fregAverage:_fregAverage,
bassAverage:_bassAverage,
acuteAverage:_acuteAverage,
162 index.html
View file
@@ -5,173 +5,19 @@
<title>Awesome Experiment</title>
<link rel="shortcut icon" href="./build/favicon.ico" type="image/x-icon" />
<link rel="icon" href="./build/favicon.ico" type="image/x-icon">

<style type="text/css">

@font-face {
font-family: 'Avant garde';
src: url('./build/fonts/avant-garde/avant-garde.eot'); /* IE9 Compat Modes */
src: url('./build/fonts/avant-garde/avant-garde.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./build/fonts/avant-garde/avant-garde.woff') format('woff'), /* Pretty Modern Browsers */
url('./build/fonts/avant-garde/avant-garde.ttf') format('truetype'), /* Safari, Android, iOS */
url('./build/fonts/avant-garde/avant-garde.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
font-stretch: normal;
}

body {
position: absolute;
margin:0;
padding:0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #FFFFFF;
font-family: 'Avant garde';


}
canvas#webgl {
position: absolute;
width: 80%;
height: 80%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*box-shadow: 0px 0px 120px -6px rgba(115,119,243,0.21);*/
/*box-shadow: 0px 0px 120px -6px rgba(23, 90, 214, 0.21);*/
}
#intro {
position: absolute;
width: 80.2%;
height: 80%;
top:20%;
left:20%;
margin-left: -10.1%;
margin-top: -10%;
background-color: white;
z-index: 1;
text-align: center;
/*opacity: 0;*/

/*box-shadow: 0px 0px 120px -6px rgba(115,119,243,0.21);*/
/*box-shadow: 0px 0px 120px -6px rgba(23, 90, 214, 0.21);*/
}
#intro h1{
margin-top:20%;
}



#intro .part2{
background-position: 0px 15px;

}
/*#intro .part2:hover{
background-position: 0px 60px;
}*/


}
canvas#texture {
position:absolute;
pointer-events: none;
left:0px;
top:0px;
z-index: 10;
/*opacity: 0;*/

}

#start {
position: absolute;
left:50%;
bottom: 30%;
-webkit-perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
transform: translate(-50%,0%);
cursor:pointer;
}
.cube {
position: relative;
margin: 100px auto 0;
height: 100px;
width: 300px;
-webkit-transition: -webkit-transform .3s;
-webkit-transform-style: preserve-3d;

}

.face {
position: absolute;
height: 100px;
width: 300px;
padding: 0px;
font-size: 27px;
line-height: 1em;

}

.cube .front {

-webkit-transform: rotateX(90deg) translateZ(45px);
background-image:url("./build/bg.png");
background-position: 0px 0px;
/*transition: background-position 0.5s;*/

}
.cube .bottom {

-webkit-transform: rotateX(-85deg) translateZ(45px);
background-image:url("./build/bg.png");
background-position: 0px 0px;
/*transition: background-position 0.5s;*/


}

#start:hover .cube{
-webkit-transform:rotateX(-90deg);
}

#start:hover .front{
background-position: 0px -105px;
}
#start:hover .bottom{
background-position: 0px 105px;
}
#intro .strip {
position: absolute;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:url("./build/bg2.png");
line-height: 80px;
font-size: 44px;
transition: background-position 0.5s;
font-family: 'Avant garde';
text-transform: uppercase;
pointer-events: none;
left:50%;
top:50%;
transform: translate(-50%,-50%);

}

</style>
<link rel="stylesheet" href="./build/css/main.css">
</head>
<body>
<div id="intro">
<h1>Workshop</h1>
<h1 class="title">OPT-CUBE</h1>
<div id="start">
<div class="cube">
<div class="face front"></div>
<div class="face bottom"></div>
</div>
<p class="part2 strip">start</p>

<p class="strip">start</p>
</div>

<h3 class="credits">by <a href="https://twitter.com/xvi_jojo?lang=en" target="_blank">Jordan Machado</a></h3>
</div>
<script src="./build/main.js"></script>
<script src="./build/vendors/wagner/Wagner.js"></script>