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>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta charset=utf-8>
</head> <!-- Thanks a lot for 200 likes! -->
<body> <!-- This code uses the REGL WebGL framework available at regl.party. It was inspired by one of the examples there. Your device may or may not support WebGL. -->
<script src="https://npmcdn.com/regl/dist/regl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix.js"></script>
<script>
const regl = createREGL()
const NUM_POINTS = 1e4
const VERT_SIZE = 4 * (4 + 4 + 3)
const pointBuffer = regl.buffer(Array(NUM_POINTS).fill().map(function ()
{
return [
// freq
Math.random() * 20,
Math.random() * 20,
Math.random() * 20,
Math.random() * 20,
// phase
10 * Math.PI * Math.random(),
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run