This repository has been archived by the owner on Aug 13, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (75 loc) · 2.3 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
<!DOCTYPE html>
<html>
<head>
<title>springy collatz</title>
<style>
* { margin:0; padding:0; }
canvas {
display:block;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springyui.min.js"></script>
<canvas id="my_canvas"/>
<script>
//jshint esversion: 6
var graph = new Springy.Graph(); // initiate graph
var numbers = [];
var n = 3; // start the loop at n = 3
setInterval(() => {// the main loop, which adds a node (or two) each 800 ms
n = addNext(n);
}, 1000);
function collatzNumber (n) { // return the next number in the sequence
// using a ternary operator
return isEven(n) ?
n/2 : // if n is even, divide by 2
n*3+1; // if n is odd, multiply by 3 and add 1
}
function isEven (n) {
return n % 2 === 0;
}
function addNext (n) {
nextN = collatzNumber(n);
// add this and the next number to the graph.
// if the node already exists, it wont be created again
graph.addNodes(n, nextN);
// make the color of the arrow green if n is odd, and red if it is even
let color = isEven(n) ? '#ff0000' : '#00ff00' ;
// create a link between the current and next number
if (!(numbers.includes(n) || n == 1)) {
graph.addEdges([n, nextN, {color}]);
// if n is 1 or already exists, we do not create a link,
// but find a new n with the chooseNext function
} else nextN = chooseNext();
return nextN;
}
function chooseNext () { // returns the smallest missing integer
// recreate the numbers array with all the nodes in the graph
numbers = [];
for (let i = 0; i < graph.nodes.length; i++) {
numbers.push(graph.nodes[i].id);
}
// sort the numbers in ascending order
numbers.sort(function(a, b) {
return a - b;
});
// find the smallest integer missing from the array
for (let i = 0; i < numbers.length; i++) {
if (i+1 != numbers[i]) return i+1;
}
}
// add the springy graph to the canvas
$('#my_canvas').springy({ graph: graph });
var canvas = document.getElementById("my_canvas");
/*
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
*/
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
</script>
</body>
</html>