@visbot/codemirror-avs
Version:
Winamp AVS mode for CodeMirror 5
193 lines (167 loc) • 5.33 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Winamp AVS mode for CodeMirror 5" />
<title>Demo | @visbot/codemirror-avs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.css" />
<link rel="stylesheet" href="dist/avs.min.css" />
<style>
label {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md">
<h1 class="h3">@visbot/codemirror-avs</h1>
<p>A mode for <a href="https://www.wikiwand.com/en/Advanced_Visualization_Studio">Winamp AVS</a> to use with <a href="https://codemirror.net/">CodeMirror</a>, the versatile text editor implemented in JavaScript for the browser.</p>
<h2 class="h5">Example</h2>
<p>Let's take a look at this SuperScope from NemoOrange's <a href="https://www.youtube.com/watch?v=oNg4QxUQ2Js&list=PLE94B3AE5C75A0132&index=15">Jaxx</a> preset. Feel free to edit the code in order to test the highlighter and <a href="https://github.com/visbot/codemirror-avs/issues">report an issue</a> if you come across something fishy.</p>
<p>
<label for="frame">Frame</label>
<textarea id="frame" class="codemirror">
nn=if(below(w,500),4,if(below(w,1000),6,8));
n=ceil((w/nn))*2+4;
m=1/(n-1);
linesize=nn-1;
yms=if(equal(ymt,dest),0,ymu);
ymt=if(above(abs(ymt),4),-4*sign(ymt),ymt+yms);
//first time only
wh=(ww-w);
ww=w;
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+1000),rand(35)*.01+.65),
assign(megabuf(p+2000),(rand(20)-10)*.005)));
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+3000),rand(10)*.02),
assign(megabuf(p+4000),rand(628)*.01)));
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+7000),rand(35)*.01+.65),
assign(megabuf(p+8000),(rand(20)-10)*.005)));
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+9000),rand(10)*.02),
assign(megabuf(p+10000),rand(628)*.01)));
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+13000),rand(80)*.01),
assign(megabuf(p+14000),(rand(20)-10)*.005)));
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+15000),rand(10)*.02),
assign(megabuf(p+16000),rand(628)*.01)));
//original t value & rand getspec value
p=1;
loop(if(wh,n/2,0),exec3(
assign(p,p+2),
assign(megabuf(p+23000),rand(1000)),
assign(megabuf(p+30000),rand(80)*.01)));
//red
p=1;
loop(n/2,exec3(
assign(p,p+2),
assign(megabuf(p+5000),
megabuf(p+5000)+megabuf(p+2000)),
assign(megabuf(p+6000),
megabuf(p+1000)+sin(megabuf(p+5000)
+megabuf(p+4000))*megabuf(p+3000))));
//green
p=1;
loop(n/2,exec3(
assign(p,p+2),
assign(megabuf(p+11000),
megabuf(p+11000)+megabuf(p+8000)),
assign(megabuf(p+12000),
megabuf(p+7000)+sin(megabuf(p+11000)
+megabuf(p+10000))*megabuf(p+9000))));
//blue
p=1;
loop(n/2,exec3(
assign(p,p+2),
assign(megabuf(p+17000),
megabuf(p+17000)+megabuf(p+14000)),
assign(megabuf(p+18000),
megabuf(p+13000)+sin(megabuf(p+17000)
+megabuf(p+16000))*megabuf(p+15000))));
//vertical movement
p=1;
loop(n/2,exec3(
assign(p,p+2),
assign(megabuf(p+22000),
megabuf(p+22000)*megabuf(p+21000)),
assign(megabuf(p+23000),
megabuf(p+23000)+megabuf(p+22000)+getspec(megabuf(p+30000),.1,0)*.15)));
p=1;
loop(n/2,exec2(
assign(p,p+2),
assign(megabuf(p+20000),
sin(megabuf(p+23000))*cos(megabuf(p+23000)*.7))));</textarea
>
</p>
<p>
<label for="beat">Beat</label>
<textarea id="beat" class="codemirror">
uu=equal(ymt,dest)*floor(rand(18)/17);
rb=rand(5)-3;
ru=if(uu,ru+rb,ru);
ymu=if(uu,.02*sign(rb),ymu);
rru=abs(ru%6);
dest=if(uu,(rru*.5)+1.25*sign(rru-2.5)-1.25,dest);
p=1;
loop(n/2,exec3(
assign(p,p+2),
assign(megabuf(p+21000),(rand(15)+85)*.01),
assign(megabuf(p+22000),(rand(20)-10)*.01)));</textarea
>
</p>
<p>
<label for="point">Point</label>
<textarea id="point" class="codemirror">
k=-k;
x=(i*2-1+m*-k)*(1+m*3);
yt=megabuf(i*n+20000)+megabuf(i*n+20001);
y=k*2+yt+ymt;
red=megabuf(i*n+6000);
green=megabuf(i*n+12000);
blue=megabuf(i*n+18000);
drawmode=k;</textarea
>
</p>
<p><a href="https://github.com/visbot/codemirror-avs">Code on GitHub</a></p>
</div>
</div>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.js" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5/addon/edit/matchbrackets.min.js" defer></script>
<script defer src="dist/avs.min.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const editors = document.getElementsByClassName("codemirror");
const options = {
lineNumbers: true,
matchBrackets: true,
smartIndent: false,
mode: "avs/ssc",
theme: "bootstrap",
};
Object.keys(editors).map(function (i) {
const cm = CodeMirror.fromTextArea(editors[i], options);
});
});
</script>
</body>
</html>