-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (118 loc) · 4.18 KB
/
index.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
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
<!doctype html>
<html>
<head>
<style>
body { margin: 0 auto; width: 900px; }
</style>
</head>
<body>
<canvas id="canvas" width="900" height="900"></canvas>
<script>
function MetatronsCube(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.midpoint = { x: canvas.width/2, y: canvas.height/2 };
this.size = 80;
this.circles = [
new Circle(this.midpoint.x, this.midpoint.y, this.size), // Center.
].concat(this.makeRings(2)).concat(this.makeRings(4));
}
MetatronsCube.prototype.draw = function(beforeStroke) {
var cube=this, ctx=cube.ctx, did={};
ctx.beginPath();
cube.circles.forEach(function (c1, i) {
c1.draw(ctx); // Draw the circles.
cube.circles.forEach(function (c2, j) {
var them = (i<j) ? String(i)+j : String(j)+i;
if ((i === j) || did[them]) { return; }
c1.connectTo(c2, ctx); // Connect the centers.
did[them] = true;
})
})
if (typeof(beforeStroke) === 'function') { beforeStroke(ctx); }
ctx.stroke();
};
MetatronsCube.prototype.makeRings = function(layer) {
var rqs = [[1,-1],[1,-1],[1,1],[1,1],[-1,1],[-1,-1]];
return rqs.map(function (rq, i) {
var p = (i%3==0) ? 0 : 1/3;
return new Circle(
this.midpoint.x + rq[0] * (layer * Math.sin(Math.PI * p) * this.size),
this.midpoint.y + rq[1] * (layer * Math.cos(Math.PI * p) * this.size),
this.size
);
}.bind(this));
}
function Circle(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
Circle.prototype.draw = function(ctx) {
ctx.moveTo(this.x + this.r, this.y);
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
};
Circle.prototype.connectTo = function(that, ctx) {
ctx.moveTo(this.x, this.y);
ctx.lineTo(that.x, that.y);
};
function WanderingColor() {
this.values = [0,0,0];
this.pickChannel = function() { return Math.floor(Math.random() * 3); };
this.channel = this.pickChannel();
this.goingUp = true;
}
WanderingColor.prototype.update = function() {
this.values[this.channel] += (this.goingUp) ? 1 : -1;
var value = this.values[this.channel];
if ((this.goingUp && (value >= 0xff)) || (!this.goingUp && (value <= 0))) {
this.channel = this.pickChannel();
this.goingUp = (this.values[this.channel] === 0);
}
return this.toString();
};
WanderingColor.prototype.toString = function() {
return '#' + this.values.map(function(x) {
var hex = x.toString(16);
return ((hex.length < 2) ? '0' : '') + hex;
}).join('');
};
// Draw Metatron's cube on the canvas.
var canvas = document.getElementById('canvas');
canvas.onclick = function() {
if (running) {
window.cancelAnimationFrame(lastFrame);
} else {
lastFrame = window.requestAnimationFrame(animate);
}
running = !running;
};
var mc = new MetatronsCube(canvas);
var lastFrame;
var wc = new WanderingColor(), wc2 = new WanderingColor(), wc3 = new WanderingColor();
var running = true;
mc.ctx.lineCap = 'round';
var width=5, width2=3;
function animate() {
mc.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
mc.ctx.translate(this.canvas.width/2, this.canvas.height/2);
// mc.ctx.rotate(0.005);
mc.ctx.translate(-this.canvas.width/2, -this.canvas.height/2);
mc.draw(function (ctx) {
ctx.strokeStyle = wc3.update();
ctx.lineWidth = (width += 0.01);
});
mc.draw(function (ctx) {
ctx.strokeStyle = wc2.update();
ctx.lineWidth = (width2 += 0.005);
});
mc.draw(function (ctx) {
ctx.strokeStyle = wc.update();
ctx.lineWidth = 3;
});
lastFrame = window.requestAnimationFrame(animate);
};
lastFrame = window.requestAnimationFrame(animate);
</script>
</body>
</html>