-
Notifications
You must be signed in to change notification settings - Fork 1
/
dm-logo.html
61 lines (57 loc) · 2.06 KB
/
dm-logo.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DM Logo 25</title>
<script src="http://acko.net/files/mathbox2/mathbox-bundle.min.js"></script>
<link rel="stylesheet" href="http://acko.net/files/mathbox2/mathbox.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<script>
var mathbox = mathBox({
plugins: ['core', 'controls', 'cursor'],
controls: {
klass: THREE.OrbitControls
},
});
if (mathbox.fallback) throw "WebGL error";
var three = mathbox.three;
three.camera.position.set(0, 2, 0);
three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);
function reuleaux(i, j, k) {
var rad = (j / 10.0 - 1) * Math.PI / 3.0
//using Polar equation of a curve from https://en.wikipedia.org/wiki/Polar_coordinate_system
//R=1, r0=1/sqrt(3) (2/3 height of unit sided equilateral triangle, offset of centre of reuleaux arc)
var cosr = Math.cos(rad)
var r = (Math.sqrt(cosr*cosr + 2.0) - cosr)/Math.sqrt(3)
var az = i / 100.0 * Math.PI * 2.0
var th = rad + (k*Math.PI + az)*2/3 //twist it!
//based on parametric equation of a torus
var x = Math.sin(az) * (1 + r * Math.cos(th))
var y = Math.cos(az) * (1 + r * Math.cos(th))
var z = r*Math.sin(th)
return {x: x, y: z, z: y}
}
var view = mathbox.cartesian({scale: [0.1, 0.1, 0.1]})
.unit({scale:1000})
view.voxel({
width: 100, height: 20, depth: 3,
items: 4, channels: 3,
expr: function (emit, i, j, k, t) {
var p0 = reuleaux(i,j,k); emit(p0.x, p0.y, p0.z)
var p1 = reuleaux(i+1,j,k); emit(p1.x, p1.y, p1.z);
var p2 = reuleaux(i+1,j+1,k); emit(p2.x, p2.y, p2.z);
var p3 = reuleaux(i,j+1,k); emit(p3.x, p3.y, p3.z);
}
})
var numXY=0
for(var i=-numXY/2; i<=numXY/2; ++i)
for(var j=-numXY/2; j<=numXY/2; ++j)
view.transform({position: [-j*3.5, 0, -i*3.5]})
.transform({rotation: [(i+1)/Math.PI, 0, (j+2)/5.0]})
.face({color: (i==-2 && j==-1 )?0x60B0FF : 0xEEEEEE, shaded: false})
.face({color: (i==-2 && j==-1 )?0x60B0FF : 0xEEEEEE, shaded: true, opacity: 0.5})
</script>
</body>
</html>