pushing init comit from storage
This commit is contained in:
wompmacho
26
AudioVisualizerLogo.html
Normal file
26
AudioVisualizerLogo.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Overlay Scene</title>
|
||||||
|
<!-- CSS -->
|
||||||
|
<link href="./style/css/audioVisual.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="./style/css/keyframes.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="style/css/fonts.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="branding_animation">
|
||||||
|
<div id="sketch-holder"></div>
|
||||||
|
<div class="logo"></div>
|
||||||
|
<div class="branding">WompMacho</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<!-- JS -->
|
||||||
|
<script type="text/javascript" src="./style/lib/p5/p5.js"></script>
|
||||||
|
<script type="text/javascript" src="./style/lib/p5/addons/p5.dom.js"></script>
|
||||||
|
<script type="text/javascript" src="./style/lib/p5/addons/p5.sound.js"></script>
|
||||||
|
<script type="text/javascript" src="./style/js/audioVisualizerLogo.js"></script>
|
||||||
|
</footer>
|
||||||
|
</html>
|
||||||
@@ -1,2 +1,9 @@
|
|||||||
|
<p align="center">
|
||||||
|
<img width="876" height="726" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/womp-website/gif/audio_visualizer.gif">
|
||||||
|
</p>
|
||||||
|
|
||||||
# audio-visualizer
|
# audio-visualizer
|
||||||
Audio Visualizer HTML/JavaScript Overlay for OBS
|
Simple Audio Visualizer HTML/JavaScript Overlay for OBS
|
||||||
|
|
||||||
|
Uses JS, p5 Lib to draw a visualization. Uses p5 dom addon (depreciated) for js serv
|
||||||
|
Will Work in Browser/OBS in current state. Allow audio permissions and click page to start.
|
||||||
60
style/css/audioVisual.css
Normal file
60
style/css/audioVisual.css
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
html {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- wrapper -- */
|
||||||
|
.branding_animation {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
animation: size-pulse 15s infinite;
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1;
|
||||||
|
font-size: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Overwrite Canvas default -- */
|
||||||
|
#defaultCanvas0 {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- p5 Identifier -- */
|
||||||
|
#sketch-holder{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --branding -- */
|
||||||
|
.branding {
|
||||||
|
font-family: "Viner Hand ITC";
|
||||||
|
color: white;
|
||||||
|
animation: brand_name 10s ease infinite alternate;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 5;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 15vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- logo -- */
|
||||||
|
.logo {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: url("../pic/WompLogo.png");
|
||||||
|
background-size: 30%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
6
style/css/fonts.css
Normal file
6
style/css/fonts.css
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* -------------------- Fonts -------------------- */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Viner Hand ITC";
|
||||||
|
src: url(../fonts/VinerHandITC.ttf)
|
||||||
|
}
|
||||||
710
style/css/keyframes.css
Normal file
710
style/css/keyframes.css
Normal file
@@ -0,0 +1,710 @@
|
|||||||
|
/* -------------------- keyframes -------------------- */
|
||||||
|
|
||||||
|
@keyframes spiner {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
75% {}
|
||||||
|
100% {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {}
|
||||||
|
50% {
|
||||||
|
box-shadow: inset 0px 0px 100px rgba(255, 0, 0, .2);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
75% {}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_left {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(-235px) translateY(-70px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(-235px) translateY(-70px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(0px) translateY(-53px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(0px) translateY(-53px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_left {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(-235px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(-235px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes slide_right_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_middle {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_middle_2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
74% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;;
|
||||||
|
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_bottom {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(50px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(50px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_top {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-50px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-50px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_middle {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;;
|
||||||
|
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_middle_2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
74% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;;
|
||||||
|
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes slide_text_right_bottom {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- Music -------------------- */
|
||||||
|
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll_Repeat {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll_text {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 11px #fff, 0 0 12px #228DFF, 0 0 13px #228DFF, 0 0 14px #228DFF, 0 0 15px #228DFF, 0 0 16px #228DFF;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow: 0 0 10px #000, 0 0 11px #000, 0 0 12px #000, 0 0 13px #32CD32, 0 0 14px #32CD32, 0 0 15px #32CD32, 0 0 16px #32CD32, 0 0 17px #32CD32;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes music_title {
|
||||||
|
0% {
|
||||||
|
color: black;
|
||||||
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------------- alerts -------------------- */
|
||||||
|
|
||||||
|
@keyframes most_recent_follower {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
47% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes session_top_cheerer {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
53% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
57% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes most_recent_subscriber {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
71% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes most_recent_donator {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes session_top_donator {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- filter-animation -------------------- */
|
||||||
|
|
||||||
|
@keyframes filter-animation {
|
||||||
|
0% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
filter: hue-rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- Brand Name -------------------- */
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes brand_name {
|
||||||
|
0% {
|
||||||
|
color: black;
|
||||||
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- pulse -------------------- */
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 50px rgba(204,169,44, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes size-pulse {
|
||||||
|
0% { transform: scale(0.9);
|
||||||
|
}
|
||||||
|
50% { transform: scale(1);
|
||||||
|
}
|
||||||
|
100% { transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- spiral -------------------- */
|
||||||
|
|
||||||
|
@keyframes spiral {
|
||||||
|
0% { transform: scaleX(0); opacity: 0.7;
|
||||||
|
}
|
||||||
|
50% { transform: scaleX(1); opacity: 1;
|
||||||
|
}
|
||||||
|
100% { transform: scaleX(0); opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- shine -------------------- */
|
||||||
|
|
||||||
|
@keyframes shine {
|
||||||
|
0% {
|
||||||
|
background-image:-webkit-linear-gradient(
|
||||||
|
top left,
|
||||||
|
rgba(255, 255, 255, 0.0) 0%,
|
||||||
|
rgba(255, 255, 255, 0.2) 45%,
|
||||||
|
rgba(255, 255, 255, 0.5) 48%,
|
||||||
|
rgba(255, 255, 255, 0.8) 50%,
|
||||||
|
rgba(255, 255, 255, 0.5) 52%,
|
||||||
|
rgba(255, 255, 255, 0.2) 57%,
|
||||||
|
rgba(255, 255, 255, 0.0) 100%
|
||||||
|
);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transform: translate(-100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(300%);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- lines -------------------- */
|
||||||
|
|
||||||
|
@keyframes lines {
|
||||||
|
0%, 50%, 100% {
|
||||||
|
transform:translateY(0%);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform:translateY(100%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform:translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sunbeams {
|
||||||
|
0% {
|
||||||
|
transform:translateY(40%) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform:translateY(-40%) rotate(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform:translateY(40%) rotate(360deg);
|
||||||
|
}
|
||||||
|
0%,14%,17%,43%,53%,71%,80%,94%,100% {
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
6%,15%,24%,28%,48%,55%,78%,82%,99% {
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
style/fonts/VinerHandITC.ttf
Normal file
BIN
style/fonts/VinerHandITC.ttf
Normal file
Binary file not shown.
106
style/js/audioVisualizerLogo.js
Normal file
106
style/js/audioVisualizerLogo.js
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
// var
|
||||||
|
var mic, fft, smoothing, bands;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
|
||||||
|
// creating audio context to allow for music
|
||||||
|
var constraints = {
|
||||||
|
audio: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var audio = createCapture(constraints, function (stream) {
|
||||||
|
console.log(stream);
|
||||||
|
});
|
||||||
|
audio.volume(0);
|
||||||
|
|
||||||
|
|
||||||
|
colorMode(HSB);
|
||||||
|
|
||||||
|
// Set Smoothing, bar count, dimmensions
|
||||||
|
var smoothing = 0.8;
|
||||||
|
var bands = 256;
|
||||||
|
|
||||||
|
// Create Canvas with 100%
|
||||||
|
var canvas = createCanvas(windowWidth, windowHeight);
|
||||||
|
|
||||||
|
// Attatch to Div
|
||||||
|
canvas.parent('sketch-holder');
|
||||||
|
|
||||||
|
// Make work in degrees for circle
|
||||||
|
angleMode(DEGREES);
|
||||||
|
|
||||||
|
// create Mic in
|
||||||
|
mic = new p5.AudioIn();
|
||||||
|
|
||||||
|
// Fast Fourier Transform (apmlitude at various frequencies)
|
||||||
|
fft = new p5.FFT(smoothing, bands);
|
||||||
|
fft.setInput(mic);
|
||||||
|
|
||||||
|
// start mic capture
|
||||||
|
mic.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function windowResized() {
|
||||||
|
resizeCanvas(windowWidth, windowHeight);
|
||||||
|
resetSketch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetSketch() {
|
||||||
|
|
||||||
|
// Analyze the spectrum and gives array
|
||||||
|
var spectrum = fft.analyze();
|
||||||
|
|
||||||
|
// Move to Center
|
||||||
|
translate(width / 2, height / 2);
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 0; i < spectrum.length; i++) {
|
||||||
|
var angle = map(i, 180, spectrum.length, 0, 250);
|
||||||
|
var amplitude = spectrum[i];
|
||||||
|
|
||||||
|
var radius = map(amplitude, 0, 360, Math.sqrt(width * height) / 4, Math.sqrt(width * height) / 2, true);
|
||||||
|
var x = radius * cos(angle);
|
||||||
|
var y = radius * sin(angle);
|
||||||
|
//noStroke();
|
||||||
|
|
||||||
|
// draw bars
|
||||||
|
var e1 = line(x, y, x, y);
|
||||||
|
var e2 = line(y, x, y, x);
|
||||||
|
|
||||||
|
// Rotate
|
||||||
|
e1.rotate(16);
|
||||||
|
e2.rotate(16);
|
||||||
|
//rotate(radius/PI);
|
||||||
|
strokeWeight(20);
|
||||||
|
stroke(color(map(amplitude, 0, 255, 0, 255, true), map(amplitude, 0, 255, 200, 255, true), map(amplitude, 0, 255, Math.random(), 255, true), amplitude));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
|
||||||
|
// TEMP
|
||||||
|
clear();
|
||||||
|
//background(55);
|
||||||
|
resetSketch();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*********************************
|
||||||
|
getUserMedia returns a Promise
|
||||||
|
resolve - returns a MediaStream Object
|
||||||
|
reject returns one of the following errors
|
||||||
|
AbortError - generic unknown cause
|
||||||
|
NotAllowedError (SecurityError) - user rejected permissions
|
||||||
|
NotFoundError - missing media track
|
||||||
|
NotReadableError - user permissions given but hardware/OS error
|
||||||
|
OverconstrainedError - constraint video settings preventing
|
||||||
|
TypeError - audio: false, video: false
|
||||||
|
|
||||||
|
# Permissions for p5 to access remote Mic
|
||||||
|
*********************************/
|
||||||
|
function touchStarted() {
|
||||||
|
if (getAudioContext().state !== 'running') {
|
||||||
|
getAudioContext().resume();
|
||||||
|
} else {
|
||||||
|
console.log("not started");
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
style/lib/p5/.DS_Store
vendored
Normal file
BIN
style/lib/p5/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
style/lib/p5/addons/.DS_Store
vendored
Normal file
BIN
style/lib/p5/addons/.DS_Store
vendored
Normal file
Binary file not shown.
3247
style/lib/p5/addons/p5.dom.js
Normal file
3247
style/lib/p5/addons/p5.dom.js
Normal file
File diff suppressed because it is too large
Load Diff
3
style/lib/p5/addons/p5.dom.min.js
vendored
Normal file
3
style/lib/p5/addons/p5.dom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
12873
style/lib/p5/addons/p5.sound.js
Normal file
12873
style/lib/p5/addons/p5.sound.js
Normal file
File diff suppressed because it is too large
Load Diff
28
style/lib/p5/addons/p5.sound.min.js
vendored
Normal file
28
style/lib/p5/addons/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
82597
style/lib/p5/p5.js
Normal file
82597
style/lib/p5/p5.js
Normal file
File diff suppressed because one or more lines are too long
3
style/lib/p5/p5.min.js
vendored
Normal file
3
style/lib/p5/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
55064
style/lib/p5/p5.pre-min.js
vendored
Normal file
55064
style/lib/p5/p5.pre-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
style/pic/WompLogo.png
Normal file
BIN
style/pic/WompLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Reference in New Issue
Block a user