-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgraphene.html
26 lines (24 loc) · 1.38 KB
/
graphene.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
<!doctype html>
<html lang=en>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<title>Drawing graphene in HTML5</title>
<script src="gl-matrix-min.js"></script>
<script src="trackball.js"></script>
<script src="graphene.js"></script>
</head>
<body onload="main();">
<h1>Drawing graphene with WebGL</h1>
<p>This page uses <a href="https://www.khronos.org/webgl/">WebGL 2</a> and fairly recent <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">javascript</a> features. Check the console for errors.</p>
<p><a href="">Graphene</a> is a fascinating material with an interesting, chicken-wire like shape. Unfortunately, this shape is kind of difficult to draw. Not impossibly difficult, just annoyingly difficult. Here I draw it with WebGL. I do not load a huge buffer of precomputed vertex coordinates. Instead, I compute the vertex coordinates in the shader, in a procedural way.</p>
<p>Letf-clik and drag with the mouse to rotate the view. Use the mouse wheel
to zoom in and out. Panning is not yet implemented.</p>
<label for=W>Width:</label>
<input type=number min = 1 name=width value=200 id=W>
<label for=H>Height::</label>
<input type=number min = 1 name=height value=200 id=H>
<br>
<canvas id=cv width=800 height=600 style="border: solid 1px;"></canvas>
</body>
</html>