forked from dlecocq/webglot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
glot.html
96 lines (85 loc) · 3.83 KB
/
glot.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>WebGLot Alpha</title>
<script src="primitive.js"> </script>
<script src="axes.js"> </script>
<script src="grid.js"> </script>
<script src="emptytexture.js"> </script>
<script src="texture.js"> </script>
<script src="ftexture.js"> </script>
<script src="nurbs.js"> </script>
<script src="pde.js"> </script>
<script src="flow.js"> </script>
<script src="stopwatch.js"> </script>
<script src="curve.js"> </script>
<script src="p_curve.js"> </script>
<script src="scalar_field.js"> </script>
<script src="CanvasMatrix.js"> </script>
<script src="screen.js"> </script>
<script src="grapher.js"> </script>
<script>
function keyboard(key) {
var a = this.parameters["a"];
var b = this.parameters["b" ];
if (key == 83) {
//this.gl.console.log("Pressed s");
this.set("a", a * 0.9);
} else if (key == 70) {
//this.gl.console.log("Pressed f");
this.set("a", a / 0.9);
} else if (key == 80) {
//this.gl.console.log("Pressed p");
this.set("b", b / 0.9);
} else if (key == 77) {
//this.gl.console.log("Pressed m");
this.set("b", b * 0.9);
}
}
function start() {
var glot = new grapher(AXES_ON | GRID_ON);
//glot.set("omega", 150);
/*
glot.set("a", 1.5);
glot.set("b", 0.75)
glot.add(new scalar_field("sin(3.0 * sqrt(x * x + y * y) - 2.0 * t) * cos(5.0 * sqrt((x - a) * (x - a) + (y - b) * (y - b)) - t)"));
//*/
//glot.add(new flow("-y * sin(t) * 2.0, 2.0 * x * sin(t * y) - 4.0 * cos(1.5 * t)"));
//glot.add(new flow("sin(3.0 * sqrt(x * x + y * y) - 2.0 * t) * cos(5.0 * sqrt((x - 1.5) * (x - 1.5) + (y - 0.75) * (y - 0.75)) - t)"));
//glot.add(new flow("5.0 * sin(t) + x, 5.0 * cos(t) + y"));
//glot.add(new scalar_field(glot.getContext(), "sin(sqrt(x * x + y * y) + t)"));
//glot.add(new p_curve("sin(s * t), cos(1.5 * s * t)"));
//*
// This is the example given to me by Nathan Collier
glot.add(new nurbs([0, 0, 0, 0.5, 1, 1, 1], [[0.0, 1.0, 0, 1], [2, 2.0, 0, 1], [3, 0.0, 0, 1], [4, 3, 0, 1]], 2, [0, 0, 1, 1]));
/*
glot.add(new p_curve(" (1.0 - s) * 3.3 , s + (1.0 - s) * 2.0", [1, 0, 0, 1]));
glot.add(new p_curve("s * 3.3 + (1.0 - s) * 6.7 , 2.0 * s ", [1, 0, 0, 1]));
glot.add(new p_curve("s * 6.7 + (1.0 - s) * 10.0, (1.0 - s) * 3.0", [1, 0, 0, 1]));
// This is the first portion of the nurbs curve, determined analytically.
//glot.add(new p_curve("(1.0 - (0.5 * s / 0.5)) * ((1.0 - (0.5 * s / 0.5)) * 0.0 + (0.5 * s / 0.5) * 3.3) + (0.5 * s / 0.5) * ((1.0 - 0.5 * s) * 3.3 + 0.5 * s * 6.7), (1.0 - (0.5 * s / 0.5)) * ((1.0 - (0.5 * s / 0.5)) * 1.0 + (0.5 * s / 0.5) * 2.0) + (0.5 * s / 0.5) * ((1.0 - 0.5 * s) * 2.0 + 0.5 * s * 0.0)"))
//*/
glot.set("a", 1.0);
glot.set("b", 1.0);
glot.add(new curve("a * cos(b * (x - t))"));
//glot.add(new nurbs([0, 0, 0, Math.PI / 2, Math.PI / 2, Math.PI, Math.PI, 3 * Math.PI / 2, 3 * Math.PI / 2, 2 * Math.PI, 2 * Math.PI, 2 * Math.PI], [[1, 0, 0, 1], [1, 1, 0, Math.sqrt(2) / 2], [0, 1, 0, 1], [-1, 1, 0, Math.sqrt(2) / 2], [-1, 0, 0, 1], [-1, -1, 0, Math.sqrt(2) / 2], [0, -1, 0, 1], [1, -1, 0, Math.sqrt(2) / 2], [1, 0, 0, 1]], 3, [0, 0, 1, 1]));
//glot.add(new nurbs([0, 0, 0, 0.25, 0.25, 0.5, 0.5, 0.75, 0.75, 1, 1, 1], [[1, 0, 0, 1], [1, 1, 0, Math.sqrt(2) / 2], [0, 1, 0, 1], [-1, 1, 0, Math.sqrt(2) / 2], [-1, 0, 0, 1], [-1, -1, 0, Math.sqrt(2) / 2], [0, -1, 0, 1], [1, -1, 0, Math.sqrt(2) / 2], [1, 0, 0, 1]], 2, [0, 0, 1, 1]));
glot.setKeyboardFunction(keyboard);
glot.run();
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
width : 100%;
height: 95%;
}
</style>
</head>
<body onload="start()">
<canvas id="glot">
There is supposed to be an example drawing here, but it's not important.
</canvas>
<div id="framerate">15</div>
</body>
</html>