html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/kaiof/webview-console/7c17ec0c/webview-console.js"></script><link rel="stylesheet" href="https://cdn.rawgit.com/kaiof/webview-console/7c17ec0c/webview-console.css" /><script>ecpup_autopopup=true;</script>
<title>Spinny Triangle</title>
<script src="https://cdn.rawgit.com/regl-project/regl/gh-pages/dist/regl.js"></script>
</head>
<body>
<canvas id="cvs"></canvas>
<button onclick="velocity=0.02;this.disabled='disabled';btnStutter.disabled=''">Slow down</button>
<button id="btnStutter" disabled onclick="stuttering=false;this.disabled='disabled'">Unstutter</button>
<!-- old webviews fix! -->
<div id="gl_fragcode" class="hide">
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}
</div>
<div id="gl_vertcode" class="hide">
precision mediump float;
attribute vec2 position;
uniform float angle;
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
.hide {
visibility:hidden;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var regl, cvs;
var velocity, stuttering;
var gl_fragcode, gl_vertcode;
function init(){
cvs = document.querySelector("#cvs");
regl = createREGL({
canvas: cvs,
onDone: function(err, regl) {
if(err) { alert(err)} // like opengl !supported
}
});
velocity=.43;
stuttering=true;
gl_fragcode = document.getElementById("gl_fragcode");
gl_vertcode = document.getElementById("gl_vertcode");
}
function stutter() {
if(stuttering) return Math.random()/5;
else return 0;
}
function go(){
// black, depth 1
regl.clear({
color: [0, 0, 0, 1],
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run