-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (113 loc) · 4.22 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
<html>
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>JS Threaded Math using Webworker</title>
<script>
// setup vars we're going to need including the default for threads at 8.
var p = [], threads = 8, workers = [], msg = [], running = false, start;
// when a worker has completed it's task, terminate it.
function killWorkers() {
for (var i = 0; i < threads; i++) {
workers[i].terminate();
}
var end = new Date().getTime();
var time = end - start;
document.getElementById("time").innerHTML = "Execution time: " + time;
}
// basic sorting function to order the results.
function sortNumber(a,b) {
return a - b;
}
// when a result is calculated, push it to the global array p and then sort.
// check to see if we're done and stop the workers.
function result(num) {
p.push(num);
p.sort(sortNumber);
document.getElementById("count").innerHTML = p.length;
document.getElementById("result").innerHTML = "Calc: " + p.toString();
if (p.length > 24) {
killWorkers();
reset();
}
}
// reset the workers and clear all the variables to default
function reset() {
for (var i = 0; i < threads; i++) {
if (workers[i] !== undefined) {
workers[i].terminate();
}
}
p = [], threads = 16, workers = [], msg = [], running = false, start = null;
document.getElementById("time").innerHTML = " ";
document.getElementById("result").innerHTML = "Calc: ";
}
// trigger by the begin button, initializes the workers and calls the worker.js
// code which does the number calculation.
function fn() {
if (running) {
alert("Already running, reload page or click reset to start over");
}
else {
running = true;
document.getElementById("time").innerHTML = "Calculation in progress...";
threads = parseInt(document.getElementById("threads").value);
// for calculating speed of calculation
start = new Date().getTime();
// creating a worker for each 'thread'
for (var i = 0; i < threads; i++) {
workers[i] = new Worker('worker.js');
workers[i].onmessage = function(e) {
//console.log(e.data);
result(e.data);
};
msg[i] = {};
msg[i].n = i;
msg[i].mod = threads;
msg[i].run = true;
workers[i].postMessage(JSON.stringify(msg[i]));
}
}
}
</script>
</head>
<body>
<h2>Threaded math with Javascript</h2>
<div>
Threads: <input type="text" id="threads" value="8">
<input type="button" onclick="fn()" value="Begin"/>
<input type="button" onclick="reset()" value="Reset"/>
</div>
<div id="count">0</div>
<div id="result">Calc: </div>
<div id="expected">Real: 0,1,2,3,4,5,6,7,8,9,153,370,371,407,1634,8208,9474,54748,92727,93084,548834,1741725,4210818,9800817,9926315</div>
<div id="time"></div>
<br>
<div style="width:640px">Using Javascript and webworkers to calculate "Narcissistic Numbers". </div>
<br>
<div style="width:640px">
Details: A number is considered a narcissist if the sum of each digit in the number raised to the power of the length of the number is the number.
</div>
<pre><code>
Example:
153 => 1 ** 3 = 3
5 ** 3 = 125
3 ** 3 = 27
___________
+ 3
+ 125
+ 27
_____
153
</code></pre>
<div style="width:640px">
Additionally this page will dynamically generate "threads" using the <a href="http://en.wikipedia.org/wiki/Web_worker">
Javascript webworker (HTML5)</a>. I've found that 8 workers is an optimal total for use in most cases. Anything higher
than 20 tends to get unexpected behavior. But feel free to try different thread counts.
</div>
<br>
<div style="width:640px">
Note: Some browsers like Chrome will not allow you to execute this from the filesystem, you will need to either use a
web server or launch Chrome with the --allow-file-access-from-files flag.
</div>
</body>
</html>