-
Notifications
You must be signed in to change notification settings - Fork 0
/
pi-chain.html
124 lines (110 loc) · 4.07 KB
/
pi-chain.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
<?DOCTYPE html?>
<html>
<head>
<!-- workaround for https://github.com/vasturiano/three-spritetext/issues/45 -->
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/three-spritetext"></script>
<script src="https://unpkg.com/3d-force-graph@1"></script>
<script src="https://unpkg.com/d3-dsv"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#3d-graph {
width: 100%,
height: 350px
}
</style>
</head>
<body>
<div id="3d-graph"></div>
<script type="text/javascript">
const pi =
"14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384460955058223172535940812848111745028410270193852110555964462294895493038196442881097566593344612847564823378678316527120190914564856692346034861045432664821339360726024914127372458700660631558817488152092096282925409171536436789259036001133053054882046652138414695194151160943305727036575959195309218611738193261179310511854807446237996274956735188575272489122793818301194912983367336244065664308602139494639522473719070217986094370277053921717629317675238467481846766940513200056812714526356082778577134275778960917363717872146844090122495343014654958537105079227968925892354201995611212902196086403441815981362977477130996051870721134999999837297804995105973173281609631859502445945534690830264252230825334468503526193118817101000313783875288658753320838142061717766914730359825349042875546873115956286388235378759375195778185778053217122680661300192787661119590921642019893";
const mainLoop = [
[],
[2, 41, 69, 64, 30, 95, 17, 38, 97, 6, 26, 83, 28, 27, 32],
[1, 141, 535, 224, 756, 721, 864, 875, 332, 628, 342, 171, 852, 101, 821, 425, 861, 783, 973]
];
const groupColors = {
"main": "red",
0: "pink",
1: "grey",
2: "grey",
4: "grey",
7: "blue",
19: "grey",
46: "yellow",
79: "grey",
92: "blue"
}
function next(p, s) {
if (p < 1) return 0;
return parseInt(pi.substring(p - 1, p + (s-1)));
}
function group(p, s) {
// Trace until chain then assign lowest value in chain
let sequence = [p];
let found = false;
let chain;
let n = p;
while (!found) {
n = next(n, s);
if (!sequence.includes(n)) {
sequence.push(n);
} else {
found = true;
chain = sequence.slice(sequence.indexOf(n));
}
}
return Math.min(...chain);
}
let params = new URLSearchParams(document.location.search);
let q = params.get('q');
let s = parseInt(params.get('s'));
console.log(s);
if (![1,2,3].includes(s)) s = 3;
console.log(s);
let nodes = [];
let links = [];
let groups = [];
for (var i=1; i<Math.pow(10,s); i++) {
let g = group(i, s);
if (mainLoop[s-1].includes(i)) g = "main";
let node = { "id":i, "group":g };
nodes.push(node);
let nextValue = next(i, s)
links.push({"source":i, "target":nextValue, "width":10, "distance":Math.abs(i-nextValue)})
}
let data = { "nodes": nodes, "links": links };
console.log(nodes);
const graph = ForceGraph3D()
(document.getElementById("3d-graph"))
.cooldownTicks(200)
.nodeLabel('id')
.forceEngine('ngraph')
//.nodeAutoColorBy('group')
.nodeThreeObject(node => {
const sprite = new SpriteText(node.id);
sprite.material.depthWrite = false; // make sprite background transparent
sprite.color = node.id==q ? 'yellow' : groupColors[node.group];
if (node.id==q) {
sprite.borderWidth = 2;
sprite.borderColor = 'yellow';
sprite.borderRadius = 18;
sprite.padding = 9;
}
sprite.textHeight = 18;
return sprite;
})
//.nodeColor(node => groupColors[node.group])
.linkWidth(link => link.width)
//.linkDirectionalArrowLength(20)
//.linkDirectionalArrowRelPos(2)
.linkDirectionalParticles(1)
.linkDirectionalParticleWidth(10)
//.d3Force('link', d3.forceLink().distance(link => Math.round(Math.rand()*100)))
//.d3Force("charge", d3.forceManyBody().theta(0.5).strength(-1))
.graphData(data)
.d3Force('link').strength(link => link.distance);
</script>
</body>
</html>