Web Workers - HTML5 - page 277

Fortschrittsbalken, und newMin und newMax setzen die entsprechenden Höhen-
werte auf der Webseite ein. Alle anderen Nachrichten führen zum Aufruf der
showResult() -Funktion, die die Dauer der Berechnung ermittelt und diese mit
der Anzahl der Punkte auf dem Höhenprofil ausgibt.
Soll der Aufruf ohne Worker gestartet werden, wird die onmessage() -Funktion
der externen JavaScript-Datei gestartet, wobei die imgData -Variable im data -
Attribut eines JavaScript-Objekts verpackt wird. Das ist insofern praktisch,
als der postMessage() -Aufruf beim Worker die Daten ebenfalls in einer sol-
chen Struktur verpackt und wir den ausgelagerten Code nicht weiter anpassen
müssen.
Die externe JavaScript-Datei canvas_profile.js beginnt mit der onmessage() -
Funktion. In der hier gezeigten Schreibweise hat diese Funktion einen doppel-
ten Nutzen: einerseits als Event-Handler für das message -Event des Workers
und andererseits als globale Funktion, die wir ohne Worker aufrufen können. In
ihr werden die zufälligen Punkte für die einzelnen Teilstrecken erzeugt.
onmessage = function(evt) {
...
var p1 = [Math.round(Math.random()*(evt.data.width-1)),
Math.round(Math.random()*(evt.data.height-1))];
for (var i=1; i<evt.data.parts; i++) {
var p2 = [Math.round(Math.random()*(evt.data.width-1)),
Math.round(Math.random()*(evt.data.height-1))];
var len = Math.sqrt((Math.pow(p2[0]-p1[0],2)
+Math.pow(p2[1]-p1[1],2)));
var profile = [];
for (var j=0; j<len-1; j++) {
...
var h = getHeight([x,y]);
Die Länge der Strecke in Pixel ( len ) zwischen den zwei zufälligen Punkten ( p1
und p2 ) errechnet sich mithilfe des Satzes des Pythagoras , wobei wir hier die
JavaScript-Funktionen Math.sqrt() (zum Wurzelziehen) und Math.pow() (zum
Quadrieren) verwenden. Anschließend läuft eine zweite Schleife über alle Pixel
entlang dieser Strecke und extrahiert den Höhenwert aus dem Array.
var getHeight = function(p) {
var pos = ((parseInt(p[1])*evt.data.width) +
parseInt(p[0]));
return evt.data.alpha[pos] * equidistance;
};