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 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