Web Workersによるワーカースレッド作成

// 描画用ImageData
var webworkers_mm_imageData;

// 色設定
var webworkers_mm_color = new Object();

// マンデルブロ集合内
webworkers_mm_color.inR = 'i / 3';
webworkers_mm_color.inG = '0';
webworkers_mm_color.inB = '255 - (j / 2)';

// マンデルブロ集合外
webworkers_mm_color.outR = 'n * 3';
webworkers_mm_color.outG = 'n * 4';
webworkers_mm_color.outB = 'n * 2';

var webworkers_mm_context = document.getElementById('webworkers_mm_screen').getContext('2d');

function webworkers_mm_start() {

	// Canvas要素から描画用ImageDataを取得
	webworkers_mm_imageData = webworkers_mm_context.createImageData(512, 512);

	// 関数に渡すパラメーターを格納するObject
	var param = new Object();

	// マンデルブロ集合の描画範囲
	param.sx = -1.5;
	param.sy = -1.0;
	param.rangeX = 2.0;
	param.rangeY = 2.0;

	// マンデルブロ集合の描画サイズ
	param.width = 512;
	param.height = 512;

	// 色設定
	param.colorSet = webworkers_mm_color;

	// ImageData
	param.buf = webworkers_mm_imageData.data;

	// 最大の計算回数
	param.maxN = 400;

	// 計算実行
	webworkers_mm_calc(param);

	// ImageDataの画像データをCanvas要素に転送
	webworkers_mm_context.putImageData(webworkers_mm_imageData, 0, 0);

}

function webworkers_mm_calc(data) {

	// 計算開始位置
	var sx = data.sx;
	var sy = data.sy;

	// 計算範囲
	var rangeX = data.rangeX;
	var rangeY = data.rangeY;

	// 描画範囲
	var width = data.width;
	var height = data.height;

	// 最大計算回数
	var maxN = data.maxN;

	// 色設定
	var colorSet = data.colorSet;

	// 1ピクセル刻み幅
	var stepX = rangeX / width;
	var stepY = rangeY / height;

	// 計算結果格納バッファ（int配列）
	var buf = data.buf;

	var i, j, k;
	var n;

	var tr, ti, vr, vi, pr, pi;
	var index;

	var r, g, b;

	for (i = 0;i < height;i++) {
		for (j = 0;j < width;j++) {

			n = 0;

			vr = 0;
			vi = 0;

			// 複素平面上ピクセル位置の実部／虚部の値を算出
			pr = sx + (stepX * j);
			pi = sy + (stepY * i);

			// ピクセル位置における発散回数を計算
			do  {

				tr = (vr * vr) - (vi * vi) + pr;
				ti = (vr * vi * 2.0) + pi;

				vr = tr;
				vi = ti;

			} while ((((vr * vr) + (vi * vi)) < 4 && (++n < maxN)));

			// ImageDataのオフセット算出
			index = (j * 4) + (i * width * 4);

			// 発散回数に応じてピクセルの色を設定
			if (n == maxN) {

				r = eval(colorSet.inR);
				g = eval(colorSet.inG);
				b = eval(colorSet.inB);

			} else {

				r = eval(colorSet.outR);
				g = eval(colorSet.outG);
				b = eval(colorSet.outB);

			}

			// R要素を0-255に収める
			if (r < 0) {
				r = 0;
			}

			// R要素を0-255に収める
			if (r > 255) {
				r = 255;
			}

			// G要素を0-255に収める
			if (g < 0) {
				g = 0;
			}

			// G要素を0-255に収める
			if (g > 255) {
				g = 255;
			}

			// B要素を0-255に収める
			if (b < 0) {
				b = 0;
			}

			// B要素を0-255に収める
			if (b > 255) {
				b = 255;
			}

			buf[index] = r;
			buf[index + 1] = g;
			buf[index + 2] = b;

			// 不透明度を255に設定
			buf[index + 3] = 255;

		}
	}

}

// メッセージを受け取ったら処理関数を呼び出す
addEventListener('message', function(e) { webworkers_mm_calc(e.data); }, false);

function webworkers_mm_calc(data) {

	・・・

	// 計算結果格納バッファ
	var buf = new Uint8Array(width * height * 4);

	・・・

	// 処理結果をメインスレッドに渡す
	postMessage(buf);

}

・・・

var worker = new Worker('webworkers_mm2.js');

// 結果を受け取るイベントハンドラ設定
worker.addEventListener('message', function(e) { webworkers_mm_onWorkerMessage(e); }, false);

// Web Workerの処理開始
worker.postMessage(param);

・・・

function webworkers_mm_onWorkerMessage(e) {

	var i;

	// 受け取ったデータをImageDataにコピー
	for (i = 0;i < e.data.length;i++) {
		webworkers_mm_imageData.data[i] = e.data[i];
	}

	// ImageDataの画像データをCanvas要素に転送
	webworkers_mm_context.putImageData(webworkers_mm_imageData, 0, 0);

}