-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinfinity_dive.html
87 lines (73 loc) · 3.61 KB
/
infinity_dive.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
<!DOCTYPE html>
<html>
<head>
<title>Infinity dive</title>
<style>
* { margin: 0; }
body { overflow: hidden; }
canvas { background: #222;}
</style>
</head>
<body>
<canvas></canvas>
<script>
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })();
var scaleFactor = 1.3, playerRadius = 10;
var width = window.innerWidth;
var height = window.innerHeight;
var borderWidth = Math.round((width + height) / 2 * 0.0075);
var center = { x: width / 2, y: height / 2 };
var hypotenuse = distanceFromCenter(0, 0);
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'brown';
ctx.lineWidth = borderWidth;
var player = {
x: width / 2,
y: height / 2,
size: 1
};
var circles = [];
for (var i = 0; i < 13; i++) {
var circle = {};
var startFactor = getRandomAngleFactor();
var endFactor = startFactor + 1;
circle.radius = 100 + i * borderWidth;
circle.startAngle = startFactor * Math.PI;
circle.endAngle = endFactor * Math.PI;
circle.factor = (hypotenuse + circle.radius * (3 + i*2)) / (hypotenuse * 2);
circle.radius *= circle.factor / 3;
circle.width = borderWidth * circle.factor;
circles.push(circle);
}
ctx.beginPath();
ctx.arc(center.x, center.y, 100, startFactor * Math.PI, endFactor * Math.PI);
ctx.stroke();
(function gameLoop() {
window.requestAnimFrame(gameLoop);
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = 'brown';
ctx.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
ctx.translate(center.x, center.y);
ctx.rotate(Math.PI / 180);
ctx.translate(-center.x, -center.y);
for (var i = 0; i < circles.length; i++) {
var circle = circles[i];
ctx.beginPath();
ctx.arc(center.x, center.y, circle.radius, circle.startAngle, circle.endAngle);
ctx.lineWidth = circle.width;
ctx.stroke();
}
//player.x = Math.cos(degree) * (player.x - center.x) - Math.sin(degree) * (player.y - center.y) + center.x;
//player.y = Math.sin(degree) * (player.x - center.x) + Math.cos(degree) * (player.y - center.y) + center.y;
//var playerFromCenter = distanceFromCenter(player.x, player.y);
//var zeroFromCenter = distanceFromCenter(0, 0);
//player.size = (zeroFromCenter + playerFromCenter) / zeroFromCenter * scaleFactor * playerRadius;
})();
function getRandomAngleFactor() { return Math.random() * (3 - 0) + 0; }
function distanceFromCenter(x, y) { return Math.sqrt((center.x - x) * (center.x - x) + (center.y - y) * (center.y - y)); }
</script>
</body>
</html>