From dfca30bb66f4ff5f8164682ecadfa219786f5c81 Mon Sep 17 00:00:00 2001 From: Victoria Fierce Date: Fri, 10 Mar 2023 11:58:21 +0100 Subject: [PATCH] absolutely destroy this beautiful static html file by converting it to a slightly more dynamic flask app + docker container --- .woodpecker.yml | 16 ++++ Dockerfile | 10 +++ Pipfile | 15 ++++ app.py | 51 +++++++++++ index.html | 208 ------------------------------------------- static/main.css | 116 ++++++++++++++++++++++++ static/main.js | 60 +++++++++++++ static/raccoon.gif | Bin 0 -> 10640 bytes static/viz.js | 67 ++++++++++++++ templates/index.html | 31 +++++++ 10 files changed, 366 insertions(+), 208 deletions(-) create mode 100644 Dockerfile create mode 100644 Pipfile create mode 100644 app.py delete mode 100644 index.html create mode 100644 static/main.css create mode 100644 static/main.js create mode 100644 static/raccoon.gif create mode 100644 static/viz.js create mode 100644 templates/index.html diff --git a/.woodpecker.yml b/.woodpecker.yml index 496c740..3d90701 100644 --- a/.woodpecker.yml +++ b/.woodpecker.yml @@ -1,5 +1,21 @@ pipeline: + build: + image: plugins/docker + volumes: + - /var/run/docker.sock:/var/run/docker.sock + settings: + registry: gitea.malloc.hackerbots.net + repo: gitea.malloc.hackerbots.net/tdfischer/hackerbots-live + daemon_off: true + auto_tag: true + tags: latest + username: + from_secret: GITEA_USERNAME + password: + from_secret: GITEA_PASSWORD deploy: + when: + branch: master image: alpine:3.13 volumes: - /var/web/live/:/deploy diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..144ae9d --- /dev/null +++ b/Dockerfile @@ -0,0 +1,10 @@ +FROM python:3.9-alpine + +RUN pip install pipenv && pip install gunicorn==20.1.0 eventlet==0.30.2 + +WORKDIR /app +COPY . /app + +RUN pipenv install --system + +CMD ["gunicorn", "-k", "eventlet", "-w", "1", "-b", "0.0.0.0:5000", "app:app"] diff --git a/Pipfile b/Pipfile new file mode 100644 index 0000000..2e617e6 --- /dev/null +++ b/Pipfile @@ -0,0 +1,15 @@ +[[source]] +name = "pypi" +url = "https://pypi.org/simple" +verify_ssl = true + +[dev-packages] + +[packages] +flask = "*" +flask-json = "*" +requests = "*" +flask-socketio = "*" + +[requires] +python_version = "3.9" diff --git a/app.py b/app.py new file mode 100644 index 0000000..5f8e4c6 --- /dev/null +++ b/app.py @@ -0,0 +1,51 @@ +from flask import Flask, render_template +from flask_json import FlaskJSON, as_json +import requests +from flask_socketio import SocketIO + +app = Flask(__name__) +app.config['SECRET_KEY'] = 'secret' +json = FlaskJSON(app) +socketio = SocketIO(app, logger=True, log_output=True) +socketio.init_app(app, cors_allowed_origins="*") + +CURRENT_LISTENERS = 0 + +def heartbeat(): + global CURRENT_LISTENERS + backendFetch = requests.get('http://hackerbots.net:8000/status-json.xsl') + stats = backendFetch.json()['icestats']['source'] + print(stats) + return { + 'title': stats.get('title', 'Unknown Track'), + 'listeners': CURRENT_LISTENERS, + 'show_title': 'Flask Test Show' + } + +@socketio.on('live.hello') +def on_hello(*args, **kwargs): + print("Hello!!!") + +@socketio.on('connect') +def on_new_listener(): + global CURRENT_LISTENERS + CURRENT_LISTENERS += 1 + socketio.emit('live.heartbeat', heartbeat()) + +@socketio.on('disconnect') +def on_new_listener(): + global CURRENT_LISTENERS + CURRENT_LISTENERS -= 1 + socketio.emit('live.heartbeat', heartbeat()) + +@app.route("/") +def index(): + return render_template('index.html') + +@app.route("/status.json") +@as_json +def status(): + return heartbeat() + +if __name__ == '__main__': + socketio.run(app, port=5000, host='0.0.0.0') diff --git a/index.html b/index.html deleted file mode 100644 index 6007f35..0000000 --- a/index.html +++ /dev/null @@ -1,208 +0,0 @@ - - - - - live.hackerbots.net - - - - - - - - - - - - - - - - - - -
HIT IT, JACK ▶
-

- - diff --git a/static/main.css b/static/main.css new file mode 100644 index 0000000..1909e67 --- /dev/null +++ b/static/main.css @@ -0,0 +1,116 @@ +html, body, #canvas { + width: 100%; + height: 100%; +} + +.butterviz { + width: 100%; + height: 100%; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + animation: rainbow-bg 10s linear; + animation-iteration-count: infinite; +} + +#loader { + font-size: xx-large; + font-family: 'Bungee Spice'; + text-align: center; + position: absolute; + transition: all .75s ease; + background-color: rgba(0, 0, 0, 0.75); + visibility: hidden; + opacity: 0; +} + +#loader p { + padding: 10rem 5rem 1rem 5rem; + background: url(/static/raccoon.gif); + background-repeat: no-repeat; + background-position: top center; +} + +#loader.show { + visibility: visible; + opacity: 1; +} + +#the-button { + animation: throb 2.5s ease-in-out infinite alternate; + font-family: 'Bungee Spice', cursive; + font-size: 6em; + text-align: center; +} + +#metadata { + position: absolute; + bottom: 0%; + background-color: rgba(0, 0, 0, 0.8); + z-index: 1000; + color: #fff; + font-family: 'Bungee Spice', sans-serif; + text-align: center; + width: 100%; + padding-top: 3rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: center; + padding-bottom: 3rem; +} + +#title { + font-size: 2rem; +} + +@keyframes rainbow-bg{ + 100%,0%{ + background-color: rgb(255,0,0); + } + 8%{ + background-color: rgb(255,127,0); + } + 16%{ + background-color: rgb(255,255,0); + } + 25%{ + background-color: rgb(127,255,0); + } + 33%{ + background-color: rgb(0,255,0); + } + 41%{ + background-color: rgb(0,255,127); + } + 50%{ + background-color: rgb(0,255,255); + } + 58%{ + background-color: rgb(0,127,255); + } + 66%{ + background-color: rgb(0,0,255); + } + 75%{ + background-color: rgb(127,0,255); + } + 83%{ + background-color: rgb(255,0,255); + } + 91%{ + background-color: rgb(255,0,127); + } +} +@keyframes throb{ + from{ + transform: scale(1.0); + } + to { + transform: scale(0.75); + } +} diff --git a/static/main.js b/static/main.js new file mode 100644 index 0000000..dfe6eb0 --- /dev/null +++ b/static/main.js @@ -0,0 +1,60 @@ +import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js" +import Visualizer from "./viz.js" + +export function init() { + function updateMeta(data) { + var title = data.title; + var listeners = data.listeners; + $('#title').text(title); + $('#listeners').text(listeners + " listeners"); + } + + function visToggle() { + if (!document.hidden) { + visualizer.start(); + } + } + document.addEventListener('visibilitychange', visToggle); + + var visualizer = null; + var audioPlayer = document.getElementById("audio-player"); + + $('#the-button').click(() => { + if (visualizer == null) { + var loaderWidget = document.getElementById("loader"); + + audioPlayer.play(); + + $(loaderWidget).addClass("show"); + $('#the-button').remove(); + + setTimeout(() => { + visualizer = new Visualizer(audioPlayer); + setTimeout(() => { + visualizer.start(); + }, 0); + }, 0); + } + }); + + var socket = io(); + socket.on('connect', () => { + socket.emit('live.hello', {}); + }); + socket.on('live.heartbeat', (heartbeat) => { + console.log('heartbeat') + console.log(heartbeat) + updateMeta(heartbeat) + }); + + window.addEventListener("resize", _.debounce(() => { + visualizer.resize(); + }, 100)); + + audioPlayer.addEventListener("waiting", (evt) => { + $(loaderWidget).addClass("show"); + }); + audioPlayer.addEventListener("playing", (evt) => { + $(loaderWidget).removeClass("show"); + }); +} diff --git a/static/raccoon.gif b/static/raccoon.gif new file mode 100644 index 0000000000000000000000000000000000000000..c926754c6db45861f8c544c363f4fea2c6b49d2d GIT binary patch literal 10640 zcmeI1WmH_twy1HpU_nFE5Q5Vz=i~ZyEW1c!Cf1N1cEy>H0~YX-zcwY(fy13i&@r#R#|L#LTfahL<2j&fhn|tv^G*ng`FmUp){ zhr77zxwts}9RWIaE^rr^or^0#URM~PX>Mr`{aye4dHx!$g0;K7r?r)myNfg6&-n%0 z{|oydVKERtzo-yM^sjM?iOGwIi3o`Z$jgZc2=m|j{+F)RzcXii_s;PB4vzmPSpIIh zkHFuL{|x>6%0Cy6HS~VPxZf`g^t;<%H`iB}7w2cEC&x#J2m5=wJKI~E8|!O7S67yo z78mB{e$38%pZ+%Wb@I!^=kc*mqaR0xhXx1w`#$u(@9BQm)!EVB*4onC)Ywp8S6fqE zRat>5FGH4=6c-g1?Mwj+W*jH5DZV z`2#Xi5@I4k0(?AN9BeF1jC;T^Ut-~7qv4@(|EAGzY@uP@kqxP$ve_Js+V0FY@U85V zEw+rgOFCV+#)OFJv&sW)`F08ne|l2TB~)5q zYSv~g-6g7u?{6j4BG`SKod1w~8EOVo7fqP-LwV}_Xyn1gd!+IFAhJA4D9kkJDcp&NJs9Z%o%}Km64Lj@?Pz4JebW}U0oFG#cGOj2GS~7PblCqzvFRKPu z(+naw*4~0r?blTGm5^&0mTi}8Do$%<>p6Z+_Up+vCmb7jez%vz;4rpw_T&h*hK)i5 z9f2JrQJ)i8w65c@S>kO0{*spy&dF(!<+(AcK^+9%Do=Q`RVs|s&*MZ@v^khnP<~X~ zMmA-HZez9W(K%F?-Xdgb-rFc~SM*OL+TPU_No}du!z2lJ(G#`QooT1!GAnsz-AC3M zr_~6dEe7z+o#x8C%)ORxb?S)rsEimgk<8DT<((EmDb-!AN9y74($EACm2FQ`Ad_TuFl_4|gr$fN0`P#3@*!1Q`aGf48p4||A>BEr3Ym-p!X0M&Rb zbdWPw;CM***bg?0;p~??0-^Zjn3Z$|4h@i{kA)XB^BO<@bRwl`Hz@$}=j+ucMR*Vz zp8L9eOXJKwoz%qC@XR%>Cll#=S%@!KZ%fg?*rz*~4X^be^*o>Uk#`oEwzG_SH7|p~ z2wO;Igo!QFEmrU^c}fIa%!HHddEPBWc4?HvILXnNe`1~Gu6->QVY0koFP|g(0Zov= zCmR(=(o86!9MQa^2RCdlv(VLP8!N5P0q+jX-h%e%x~us16)til51Q3M9iRIs>||rd z-)V*&=a9Diik^dMVPEWZiFHN(G$6sfl2&fH4d1<PVS|j_JM9O|&-_!jP4RD~&87#BmAZ-T)kz zN20Cdkx>I#0XUBr-#;Xf4WDu}CU&-qpq-G7>{v1VE2I<$RAB5 zX-<%a*O&CPHYyOc%oL@fz++vtgD^g^cwBTL&xH7luwi8;9Ag(0_~a7j#ESW_nns!B zBY&I+0}F%oM!)1%ZL|wk5mRrFGMkNCqTFCg{dAa$TbzATg41d{kONauZGs@Rf|Z4j zBV41YJ0(kFl}%VxHB|9G3UxL zCd0{GwyWu?^(C4SC=30Tq54uy3oyq8gBqN*D31cc`Ivx`BcxczTSSqrk#n@{)Z|$v zeoC&s&C7c_t8wq7g;{y0&xMHWmN)9mw2fk=;ftZXP`~L6oqwlzZm|X6>s8mSlso||@;TMzi$NbKUz^9K?xKWQZ4Nrob=Gw!~KZM^8?hZ!#$m^FD?$R3-)amf8C(DH!s}zBp)7|2H}-_BM3a}Nn8va;Za${ zCGJ973P%xp8ROxjFD^w!kpY&Y)@Y8GqS;f$@WJdDWXn;&ay#`Ho?)*z3E?wz%UBVp zoFxL1qpKb7x}zeKn0(^}OlHJ*u^O)eEMSe26=^Ms*HOYBc>PFVlZi+P2e9_m3SnQA zWLUysr6?NqVlC6wrmQ3l(Ac_?>DsTloCSwkJ&E;7{mtOBmWf;z9JRGPNot3ce6#s7 zWO^*v0jU~mQ@&Y}^~ipc2h)Rd3z-!_z$sl+QqGxC!q%{bD$i(R1J_J(mRD5GlslHR zSa6oRbmPR#RK*#tP+}Akpq!u|e6~jKYKM5aoa-OUU85RCo;k)hW?N+P)P4n1RW|oH zT<_EhTB+^TR9^x6pj>6`d+0T7F<2d4Bw)VI-I=33=R<)um(JUHLf0-Ik{>Qycm32g zUB~1fYkEiuxk5h_eRRvSqej~BW7D`4)P@#&ygV8p591yhq|VU@9$;r_ckPd9(8w4P z9jG{xw{nt1`&8J+eO!K)x+FNxAQ5g?zBHUiHzucEBUGl@e9$2CwEf`yCu|90y2+>7 z5QneaFXMEk3>~{qKbWN8G>uyj_4;QbN1%Sf-_V{mwTn4iG=L zp0mX7Z@c%KZ0>~3K(L0WRrrl*YVB@ToY=BD%23X;w|drli!_gpvd^(AuX5V%a^)U_ zJ1=-u1uE?uh3C1da1&q;7LnUK5h!*c;mt{OL7#S9hp6o0bhck-)LOjzzDKS}6ccC_ z+xlJ$m2zsk!5B9(KzX&_q zBKK+W%i`kF7^~Exipu=zpxV6p!p5{_|A4yuhR&{cuLDpWecl5(L+xrG`#-hl4NrUt z`C9YsbNGzMk12`i#U;CyZnw3>jm@pWorS&qqSEMHle4Pq%aiMi??<@K(*nV92UI^4 zh?s>H2!(~=EpdyIq2Jk4)!-3JvT)`v z?plEVGsB@|xi`}_m18{#4z;%>^;+{@%V9a&v;{rG;$+Vcr!%z9j6PyV=EQ=p*lGXb zu!DV>q$vDP4iDQP?>W4cRkBs{o5KX<#D8*Fe%WlhDq}fg5cv+9%gLcbgf2m|n*_z} z)aO%9a#vTt%e9L>T7~Ca`i0l1GWwf)MrGaXBYNGs1swXldJ*SD`&ML+VH{q^uVMD~ z$*wCX-r-d(Z~Gn?lMi}CuIBP?;D*bn+n2gS;a?b|*>0fs#JIo{!Cw8b_mS>lO7Mn-MQV zMlly(&WtNmXSm^@I6gGsVtwh5out+rmHi4atu&u94CSuKVmeQd{eEMx$!(TMDZ|k1Jr2@Z1nbxN|U)j$Q`CrgS*FP6ost14KTn-NP zN57kEz48}dP0!sGUJ>iRx!_7~yKG&h01($Nq3BynxBL)V!P|0<{%t$%6ORgaEAKwi z&9tvTe2W^}8U02`wjZ@0cCy^HACWJ1!KeE$wUGP$&k}-8AHN&Ltjb>H>cU-3Te!Jo zD3Xr8+%Z_Xr9T)j?Z2^@ba@B72qita9l56T62k4C9dZcj<}$-}4VT&HsPVzoOTc6r zl)>lR3r26y!{m$V*?-^~oFSo&`!h}E_Ki*$ONS{w4?qkn4;0Rpm4~i9%}8@=9u6p4 zf;-X3lhlF2gjdZ;hEjVP@sq3-!WM_)#X?Fs_@gzjf+-*^AK2BNLiNH5s3bsr96Zpc zSm`r#gM-Qt;ARz59?HRAm{1l{-Bzw7=@ zP`ZS{B6oZtvE0-UxLT!QX-I`6CGc4iI#(fcJ1>s{vTq8 z>!@rNre2Ba{e_8qiZK(3Rx91ITHJ59SrX3sc_Suc&N-61XLX-PcA|S@udgrK9Z@DS zk@uM_1`Www;BDN4#o%*dWELehB6u-$oa4gS?vxg9DZEwnZH|rTP2^H!rM;M`xj35H za&$de-ZJ7>2W&Y8)WrUY7=)3yjNlxm(TWq^!XqVyl!REuOY!zv#wuQg$|vR$smdhx zGF$>*+rEynN|Api9`l-At_(8;Ay#J1`7%SrI#gSXwmZYAskJ1>RmhEc8 zvHliLXSSa0ycWH3pUDdJ=LU6guqTE2*duA8*xJ|&DWQ~y z*tx6k;b^y)9;GJSZJZc>UWxo>fvRXy6r0_x|K8N%j9f{+u58uN%d>AAnxKov>wVD9 z-ckJ(?1FcCd%)Xung=v-F-v;qY4MP=NJ-+ zdI6a2r-a8I4p7&zxjV9Io7KI45>zoW%-I~rm)Y~xMuaqM$D z9A7W@BuGi_4wbt5Z8h3uOvo)HL{_^!m{M$AsXy|8Z+|?9V8=7|AEz$1``73 zK^cao@mCV7%mZwF=$iPo*h)Ke4-#5JSV`QTYB(*E=dvT&%e$lXGYhCRgZdh=?cFT@ zt=#gzl2PL`OilP1@#pbVhe{i1Bfg~T)38!wcq=S|dT3j7_Is8o;YCNl*cjn$P;j7s zm^Xu`DH5hLC|G6pJ@s-2RO6q4!tCfy@FH!eH4IKn;sxpW0iSy*XMEp~ot zVQQmaeQ0fSOsiIVLe7VQ>S)PV173-vABHRtvEyUojS~)Uzm9&JE}Kc4)SX^f%w2|8 z%?+$?q-<46t@R(Adwa^9A}?;Qq%S@nMUny_j%RoUg46POeBp%aJMz<{K(Po(2DLhs z@hGKu#=96ltmrY8zF^j+^pjN3MUs$xAmc?AB9*Z?)7TB@@9SJkRSbW;ykY5K3R$ z^~4#mg)ys5i+#AL>#my*#=6;Y&xJqIJXwxJSPSLcOih|V!Z;keb|M8I0Wjra9x+}8 zZGI`zMVUaZgdC>wt2<_~>CVu;l{jzf$6W_Ozvqa4jhORocKh7tjQLQ*No;#{;FY{> zr=;64Q(LL>llW`VH{Z>Dt@gY8I~@0QyL&s`iaV~)Cts8eWEDbguFp+J4Z?e+ZtrF{ zA7lIkNff<8V?#zbTAw8KRQM6i!>F{aurM}3(# z1EMiS-~kco6)nKn6{OcP18arrn!-^9KIgyY4rmSII=zxKwiyw&EdbK3=5){X}AdY0u> z*-Ey`+U18FzpKk9d7%DumRvX;!Y)sWhI6y%wf@X%q41R1{T^Q*VP7KjJGZnBD90>A z#$RoM#qP;ig8BsOMKx&Aagk-6m26j)e)T~LDXk7~*Hm5ll!^5~)pqJ|X}GlS>QV*N zE9$pojLI5%pT#&mcyED1HO+irE^96+zCz%&Ejh5aju!Yp@iuQkysc|>Ayv*>S3}Uw zg6^2=j_rx>qBtQ7@4*O-%OZPK$%R(QQsTRVzxRACnaV&(MDtrx^T}k58e^t{%|ECEgY$4r;ug_VKZ4)RQErC z5y=JT^S`Vmr(YqLbD-%9mKo{k&@lYyHXa*=2U2Gh#0IZu?2Ss@am$V?29Cq%m9&F| zzKA5S!Hb|x`A`~3icU@PV&2W|Nm_1VhX=+6mmU+3qDDEt{o!lOHBE!$;Uc$oaXY1c zp`N|`z{Aw7S%7hHRAE8xYV+0X^J+P_W_2=XW1%rHzIpkP;B3n(58b2IyKFntpgM<8 zOB1i`NEk^YPHv<|^G1SW)st;Y-NdUtR3X{+B<~o=D@|%x3o$980fkk_KU5efK07Y{ya?3no8c!c2c9gP9X-+@21= z=2L0C2zL&qdyV#9i?R;PvK>3jDH1G@Cj$y$iPrH1_iLedHeyY8z}BW9R1|>Fk|g z6K9c%9S%)liOw*2Yn__qkn@l$-#r9X6)k|IF0V3#HKJ-%>hKyGn_Dv496P$Ix_c6O z6+37i_Y4k&j%bc{jb!BZ~DSmr(cWOWVa7S}lExVo!WZn@@MF(cZO$zxCJDob5T(J`e?eu;|qo>ayy*@6>U0fcJ~5RO=Jd`5&LV3UZl4A zi%u|TyAb*E+S?dQ#Hph;w1U+*hB6T>=+Rewd)~}DHiNbJ*$103aBAqRq z)?aH)x0|wjJ)^$_ernz8ycTvFZ`iFOkI(dQn;VdR(mWvG0sA}_CvmQc(ZZ<5RTsmQ zAo;-c;PD{JlytkJ^k93%*2T2_fc4_&_+3eL*5R*{D{K|IyTHl0(?>xVY*DnqH#B1S zXk-Rg?KSz#XcYP?%#qQ47tGNgC0m%OfbmfU^lViZK+Y$1)Au{) zes<<~p(y;*S&6c*}}Krz!x&Z_F&b zS5gggR;**pA~;IIt$6Ki@J&lpf8Ot$hgL*w5$v{a;B9uLNyhJ^*K!QbF4wcCPRce4 zVnygy^S?4IZxp>2A+Rs<)w@6Wd0~PeD9wZVaHJ(iIFuI_>hlkkRq$qPiNEe=+pfrL z+*%i4?Ni&XD)@fIF5IehpB3U>_?XwklaHWk=K!Zhg!6E#~8hD#A9hcU~*|-4q?9aqaDsF zXcy>vY~**O?2VY&!Of2LI}m|gXXEV6cdq1vBj%#p%N38O4-3*@y;(IoiTqkjkl4F3eS4vLhNT4Dl{GD zOqDB-Cmr@7VoL#qZSZ9)iep%*G@V0XlvMrA;oaxg$9Z;9Z;gz_1}=Q&T8VN^O`bfc zAK!T~S1Q`owr=T3EWCNw#Mr)M5hCTwEz#0-x!P!;Rl47NG!EX&>zQ9ZV$b1iA;OU+ zW<6n5s}?&gHoEgW;B#OSr}zrH{k8k~VQ$Y!#)8w;CDgXM3w?)hzv~=mF_wP;(|szn zbVV`Yr-0k7;$$Dx#FfW^b&*xa0itr218hHPkzr8P@un2YOXbDuAbN%o8U--(l#If_ zEg%h}pkc;Olj%lN(+cORFhfX9_fSebiC_kq-#DC(+Ke@&^ z=@rsn;tWtH*2Z~g^f3N>t4zsGfEBpILWHr2E=N#@9kD6{B=rtaH0(}_#j?s}RV`Hk Px+gOQS?K`L&?Np3rhH#S literal 0 HcmV?d00001 diff --git a/static/viz.js b/static/viz.js new file mode 100644 index 0000000..ad3c52b --- /dev/null +++ b/static/viz.js @@ -0,0 +1,67 @@ +import "https://unpkg.com/butterchurn@2.6.7" +import "https://unpkg.com/butterchurn-presets@2.4.7" +import "https://unpkg.com/butterchurn-presets/lib/butterchurnPresetsExtra.min.js" + +export default class Visualizer { + butterViz = null; + canvas = null; + cycleInterval = null; + presetCycleLength = 15000; + + constructor(mediaElement) { + var audioContext = new AudioContext(); + var mediaSrc = audioContext.createMediaElementSource(mediaElement); + + this.canvas = document.createElement('canvas'); + this.canvas.className = "butterviz"; + document.body.appendChild(this.canvas); + this.canvas.width = this.canvas.offsetWidth; + this.canvas.height = this.canvas.offsetHeight; + this.butterViz = butterchurn.default.createVisualizer(audioContext, this.canvas , { + width: this.canvas.width, + height: this.canvas.height, + pixelRatio: window.devicePixelRatio || 1, + textureRatio: 1, + }); + + mediaSrc.connect(audioContext.destination); + this.butterViz.connectAudio(mediaSrc); + + var presets = {}; + if (window.butterchurnPresets) { + Object.assign(presets, butterchurnPresets.getPresets()); + } + if (window.butterchurnPresetsExtra) { + Object.assign(presets, butterchurnPresetsExtra.getPresets()); + } + + this.cycleInterval = setInterval(() => { + this.butterViz.loadPreset(_.sample(presets), 5.7); + }, this.presetCycleLength); + + $(this.canvas).click(() => { + this.butterViz.loadPreset(_.sample(presets), 1.0); + }); + + setTimeout(() => { + this.butterViz.loadPreset(_.sample(presets)); + }, 0); + + } + + resize() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + this.butterViz.setRendererSize(this.canvas.offsetWidth, this.canvas.offsetHeight); + } + + start() { + if (!document.hidden && this.butterViz) { + var fps = 60; + setTimeout(() => { + requestAnimationFrame(() => {this.start()}); + }, 1000 / fps); + this.butterViz.render(); + } + } +} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..8382a7e --- /dev/null +++ b/templates/index.html @@ -0,0 +1,31 @@ + + + + + live.hackerbots.net + + + + + + + + + + + + + + + +

Buffering...

+
HIT IT, JACK ▶
+
Loading...
+ +