Grav/test.html at master · rsanchez1/Grav · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type='text/javascript'>
        Array.prototype.rotatex = function(angle) {
            return [this[0], this[1]*Math.cos(angle) - this[2]*Math.sin(angle), this[1]*Math.sin(angle) + this[2]*Math.cos(angle)];
        }
        Array.prototype.rotatey = function(angle) {
            return [this[0]*Math.cos(angle) - this[2]*Math.sin(angle), this[1], this[0]*Math.sin(angle) + this[2]*Math.cos(angle)];
        }
        Array.prototype.rotatez = function(angle) {
            return [this[0]*Math.cos(angle) - this[1]*Math.sin(angle), this[0]*Math.sin(angle) + this[1]*Math.cos(angle), this[2]];
        }
        Array.prototype.add = function(vect2) {
            return [this[0]+vect2[0], this[1]+vect2[1], this[2]+vect2[2]];
        }
        Array.prototype.scale = function(factor) {
            factor = 1/factor;
            return [this[0]*factor, this[1]*factor, this[2]*factor];
        }
        Array.prototype.multiply = function(scalar) {
            return [this[0]*scalar, this[1]*scalar, this[2]*scalar];
        }
        Array.prototype.multiplyEach = function(arr2) {
            return [this[0]*arr2[0], this[1]*arr2[1], this[2]*arr2[2]];
        }
        Array.prototype.transformAxes = function(x, y, z) {
            return [this[0] * x[0] + this[0] * y[0] + this[0] * z[0],
                    this[1] * x[1] + this[1] * y[1] + this[1] * z[1],
                    this[2] * x[2] + this[2] * y[2] + this[2] * z[2]];
        }
        Array.prototype.dot = function(arr2) {
            return this[0]*arr2[0] + this[1]+arr2[1] + this[2]+arr2[2];
        }
        Array.prototype.toUnitVector = function() {
            var mag = Math.sqrt((this[0] * this[0]) + (this[1] * this[1]) + ((this[2] * this[2]) || 0));
            return [this[0] / mag, this[1] / mag, (this[2] || 0) / mag];
        }
        function randInt(limit) {
            return Math.floor(Math.random() * limit);
        }
        function pageEvents(ev) {
            var ekey = ev.which;
            var scale = Math.abs((120000)/(120000+zadd));
            if (ekey == 97) {
                xdeg += 1/36;
            }
            if (ekey == 113) {
                xdeg -= 1/36;
            }
            if (ekey == 100) {
                zdeg += 1/36;
            }
            if (ekey == 101) {
                zdeg -= 1/36;
            }
            if (ekey == 115) {
                ydeg += 1/36;
            }
            if (ekey == 119) {
                ydeg -= 1/36;
            }
            if (ekey == 103) {
                //yadd += 10000;
                yadd += (1200 / scale) * 1/30;
            }
            if (ekey == 116) {
                //yadd -= 10000;
                yadd -= (1200 / scale) * 1/30;
            }
            if (ekey == 104) {
                //xadd += 10000;
                xadd += (1300 / scale) * 1/30;
            }
            if (ekey == 121) {
                //xadd -= 10000;
                xadd -= (1300 / scale) * 1/30;
            }
            if (ekey == 102) {
                var add = .10*zadd;
                if (add < 1000) {
                    add = 1000;
                }
                zadd += add;
            }
            if (ekey == 114) {
                var add = .10*zadd;
                if (add < 1000) {
                    add = 1000;
                }
                zadd -= add;
            }
            if (ekey == 112) {
                pause = !pause;
                if (!pause) {
                    drawBodies(primary);
                }
            }
            drawBodies(primary, true);
        }
        window.onload = function() {
            primary = document.getElementById('primary').getContext('2d');
            primary.fillStyle = '#000';
            primary.fillRect(0, 0, 1300, 1200);
            zadd = 10000000;
            xadd = 0;
            yadd = 0;
            xdeg = 0;
            ydeg = 0;
            zdeg = 0;
            bodies = [];
            for (var i = 50; i--;) {
                //bodies[i] = {0:[-300 + randInt(300), -300 + randInt(300), -100 + randInt(100)], c:'rgb(' + (125 + randInt(125)) + ',' + (125 + randInt(125)) + ',' + (125 + randInt(125)) + ')', np:[], scale:0, i:i};
                bodies[i] = {0:[10000*Math.sin(i/50*12), 10000*Math.cos(i/50*12), (i*8-200) * 100], c:'rgb(' + (125 + randInt(125)) + ',' + (125 + randInt(125)) + ',' + (125 + randInt(125)) + ')', np:[], scale:0, i:i};
            }
            bodies[bodies.length] = {0:[0,0,0], c:'rgb(255,255,255)', np:[], scale:0, i:100};
            bodies[bodies.length] = {0:[0,0,10000], c:'rgb(255,255,0)', np:[], scale:0, i:100};
            pause = false;
            drawBodies(primary);
            document.onkeypress = pageEvents;
            setTimeout(function() {drawBodies(primary);}, 16);
        };
        function drawBodies(primary, dotime) {
            primary.fillStyle = '#000';
            primary.fillRect(0,0,1300,1200);
            // 3D accomplished with assistance from AlteredQualia, 3D effect inspired by CanvasMol
            for (var i = bodies.length; i--;) {
                var position = bodies[i][0];
                var xd = position[0];
                var yd = position[1];
                var zd = position[2];
                //var position = bodies[i][0].rotatex(xdeg).rotatey(ydeg).rotatez(zdeg);
                var zx = xd * Math.cos(zdeg) - yd * Math.sin(zdeg) - xd;
                var zy = xd * Math.sin(zdeg) + yd * Math.cos(zdeg) - yd;
                var yx = (xd+zx) * Math.cos(ydeg) - zd * Math.sin(ydeg) - (xd+zx);
                var yz = (xd+zx) * Math.sin(ydeg) + zd * Math.cos(ydeg) - zd;
                var xy = (yd+zy) * Math.cos(xdeg) - (zd+yz) * Math.sin(xdeg) - (yd+zy);
                var xz = (yd+zy) * Math.sin(xdeg) + (zd+yz) * Math.cos(xdeg) - (zd+yz);
                var offset = [yx+zx, zy+xy, xz+yz];
                position = position.add(offset).add([xadd,yadd,zadd]);
                //var position = bodies[i][0].multiplyEach(xaxis).multiplyEach(yaxis).multiplyEach(zaxis);
                //var position = bodies[i][0].transformAxes(xaxis, yaxis, zaxis);
                //position = xaxis.multiply((position.dot(xaxis)) / xx).add(yaxis.multiply((position.dot(yaxis)) / yy)).add(zaxis.multiply((position.dot(zaxis)) / zz));
                var scale = (120000)/(120000+position[2]);
                bodies[i].np = position;
                bodies[i].scale = scale;
            }
            bodies.sort(function(a,b) {return a.np[2]-b.np[2]});
            for (var i = bodies.length; i--;) {
                var position = bodies[i].np;
                var scale = bodies[i].scale;
                if (scale > 0) {
                    position = position.multiply(scale);
                    var radius = 1000*scale;
                    var grad = primary.createRadialGradient(position[0]+600, position[1]+300, 0.1*radius*scale, position[0]+600, position[1]+300, radius);
                    grad.addColorStop(0, bodies[i].c);
                    grad.addColorStop(0.95, 'rgba(0,0,0,1.0)');
                    grad.addColorStop(1, 'rgba(0,0,0,0.0)');
                    drawBody(position[0]+600, position[1]+300, radius, grad, primary);
                }
            }
            if (!dotime && !pause) {
                zdeg += 1/36;
                setTimeout(function() {drawBodies(primary);}, 64);
            }
        }
        function drawBody(x, y, r, color, paper) {
            paper.beginPath();
            paper.arc(x, y, r, 0, Math.PI * 2, 1);
            paper.closePath();
            paper.fillStyle = color;
            paper.fill();
        }
    </script>
</head>
<body>
<canvas id='primary' width='1300' height='1200'></canvas>
</body>
</html>