Works - ----/--/--
----

キーワード

目次

はじめに



　HTML5から追加されたcanvas要素を用いた図形の描画や，ラスタデータ（2次元配列）を用いた数値計算の実行，計算結果の図示等， あらゆる用途に使用できるテンプレートを作成しました．

　本テンプレートはHTML＋JavaScriptで構成されています．今回はHTMLとJavaScriptがちょっと書ける人向けの内容となります．

　この説明だけではまだイメージできないかもしれないのでここにサンプルを用意しました． みんな大好きライフゲームです．

Q．何の役に立つのか

　ちょっとした画像処理だったり，偏微分方程式の数値解析だったり，頭の中で実装方法がイメージできていても計算をするまでの土台を作るのに結構苦労したりするんですよねえ． そしてこの作業がまた結構時間を食うんです．

　こうしたテンプレートを用意しておくことで，思いつきでパっと実装することが可能になります．実装の容易さを確保しておくことで思考に回すパワーを温存でき，技術開発が捗るという訳です．

　しばらくはこれを自分で使ってみたいと思います．ブラウザで実行できるのでご自身のサイトに埋め込んでWebアプリとして公開することも可能ですよ．

配布ページ

免責事項


利用条件


推奨ブラウザ


　まあ，ほとんどJavaScriptの標準関数を組み合わせて整理しただけな物なので，どうぞご自由に使ってくださいって感じです．

HTML + JS ファイルはこちら
OneDrive

使い方

　ZIPファイルを解凍すると下図のようなファイルが展開されます．



　編集が必要なファイルは"RasterCalculator.html"となります．テキストエディタで開いて編集を開始します．おススメはサクラエディタです．

　テキストエディタで"RasterCalculator.html"を開くと，以下の様なスクリプトが表示されます． 内容は大まかに5つのセクションに分けて記述されています．それぞれのセクションの場所とざっくりな役割は下図の通りです．



　以下の説明では，これらの表記でスクリプト内の場所を示していくので覚えておいてください．

　ここで一旦，"RasterCalculator.html"をブラウザで開いて確認してみましょう．



　はい，真っ暗ですね．何もしてないので当然です．それではここに何か図形を描画してみましょう．③InitializeにDrawDot関数を追加してみます．
//Initialize---------------------------------------------------------------------------------------
//キャンバスの初期状態を定義
function InitCanvas()
{
	//座標（200, 200）に赤色（255, 0, 0）のドットを描画する
	DrawDot(200, 200, 255, 0, 0);
	
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			//全てのピクセルに対して行う処理ここに書く
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
}

//キャンバスの初期化
function Initialize()
{
	ResetCanvas();
	Frame = 0;
	Stop();

	InitCanvas();
}

Initialize();

　そしてこれの実行結果がこちらです．DrawDot関数は指定した座標のピクセルに指定の色を描画する関数となります．座標は左上が（0, 0）です． また，色の指定は24ビットRGBカラーで指定します．R, G, Bにはそれぞれ0～255の値が入ります．



　次にキャンバス全体を好きな色で塗りつぶしてみましょう．先ほどはfor文の外にDrawDot関数を書きましたが，今度はfor文内にDrawDot関数を記述してみましょう．

　今回は全体に色を塗りたいので座標値はfor文のループ変数（X, Y）としてやります．
//Initialize---------------------------------------------------------------------------------------
//キャンバスの初期状態を定義
function InitCanvas()
{
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			DrawDot(X, Y, 0, 0, 255);
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
}

//キャンバスの初期化
function Initialize()
{
	ResetCanvas();
	Frame = 0;
	Stop();

	InitCanvas();
}

Initialize();

　実行結果はこんな感じです．



　少し遊んでみましょう．次は座標値で色を変えてみたいので色を(X, 0, Y)としてみます．
//Initialize---------------------------------------------------------------------------------------
//キャンバスの初期状態を定義
function InitCanvas()
{
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			DrawDot(X, Y, X, 0, Y);
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
}

//キャンバスの初期化
function Initialize()
{
	ResetCanvas();
	Frame = 0;
	Stop();

	InitCanvas();
}

Initialize();

　綺麗なグラデーションができました．



　ここだけでも結構遊べます．そうですね，次はグリッドなんか引いてみましょうか．
//Initialize---------------------------------------------------------------------------------------
//キャンバスの初期状態を定義
function InitCanvas()
{
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			if(X % 30 == 0 || Y % 30 == 0)
			{
				DrawDot(X, Y, 0, 255, 0);
			}
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
}

//キャンバスの初期化
function Initialize()
{
	ResetCanvas();
	Frame = 0;
	Stop();

	InitCanvas();
}

Initialize();

　こんな感じになります．



　まあ，遊ぶのはこの辺までにして次に進んでいきたいと思います．

　ここまでキャンバスの初期状態の設定方法を解説しました．しかし，この状態で再生ボタンを押しても真っ黒になるだけで何も起こらないので，次はアニメーション処理をしてみましょう．

　今度は1フレーム毎に処理をしていきたいので⑤DrawLoopに処理を記述していきます．処理の書き方は③Initializeに書くときと変わりません．

　折角なので時間で変わる何かをしたいと思います．同じくDrawDot関数を使っていきますが，座標値を（Frame, Frame）としてみます．
//DrawLoop-----------------------------------------------------------------------------------------
function DrawCanvas()
{
	//キャンバスを毎フレームリセットする
	ResetCanvas();
	
	DrawDot(Frame, Frame, 255, 255, 255);
	
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			//全てのピクセルに対して行う処理ここに書く
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
	
	Frame++;
	
	//ヘッダー情報更新
	ApplyInfo();
}

　[再生ボタン]をクリックすると白い点が左上から右下に移動していく様子が見えると思います．ちなみにちょっと前に設定した③Initializeの処理は邪魔なので全部消してます．



　ここで，スクリプト中のResetCanvas()をコメントアウトで消してみてください．ある変化が起きます．
//DrawLoop-----------------------------------------------------------------------------------------
function DrawCanvas()
{
	//キャンバスを毎フレームリセットする
	//ResetCanvas();
	
	DrawDot(Frame, Frame, 255, 255, 255);
	
	for(var Y = 0; Y < CanvasHeight; Y++)
	{
		for(var X = 0; X < CanvasWidth; X++)
		{
			//全てのピクセルに対して行う処理ここに書く
		}
	}
	
	//Draw関数で定義した色（配列情報）をキャンバスに反映する
	ApplyImageArray();
	
	Frame++;
	
	//ヘッダー情報更新
	ApplyInfo();
}

　今度は点の移動した軌跡が残っていきます．ResetCanvas関数はキャンバス全体を黒で塗りつぶす処理をします． 毎フレーム黒の塗りつぶしでリセットしたくないときはこのようにResetCanvas関数を消去してください．



　ここまで最低限の使い方を解説しました．細かいことはリファレンスマニュアルを確認してください．

　と，本当はここに「画像ファイルの読み込み処理」を解説してやりたかったんですが，結論から言いますと作れませんでした． 画像ファイルを読み込んでキャンバスに描画するところまでは簡単にできるのですが，その画像の情報を配列データとして取得することができないんです．

　どうやらセキュリティ上の都合でローカルファイルから取得できる情報には制限がかかっている様なんです．色々試してみても回避できなかったので一旦は諦めることにしました．

　いやあ，滅茶苦茶悔しいんですよこれ．だって画像に色んなフィルタかける使い方とか色々あるでしょう．それができなくなるということはラスタ計算機としての価値が半減してしまうということなんですよ．

　まあ，何かいい方法あったら追記したいと思います．とりあえず画像が読み込めなくても使い道はあるので．

リファレンスマニュアル

　リファレンスマニュアル（笑）です．全体的な仕様や，用意している関数の説明をしたいと思います．

使用している変数

　よく使いそうな変数だけ記しておきます．以下の変数は値の取得時のみに使用してください．値の再代入は推奨されません．

描画系関数

　これらの関数は配列pixels[]を操作するものであり，キャンバスへの描画は別途ApplyImageArray()を実行する必要があります．

キャンバス情報取得

　これらの関数は配列pixels[]から色情報を取得するものです．

汎用関数

　知ってると便利な関数です．

こちらもおすすめ