Canvasで画像分割してシャフル

実際、画像分割してるわけじゃないけどそれっぽく創意工夫して作ってみた。

画像分割してシャッフル – jsdo.it – share JavaScript, HTML5 and CSS

var width = 25,height = 25; //画像が100*100で4分割したいので25に
var canvas = document.getElementById("world");
var ctx = canvas.getContext("2d");

var img = new Image();

//jsdo.itのAPIを使って画像を取得
$.getJSON("http://api.jsdo.it/v0.2/user/show.json?name=sw_lucchini", function(data){
  img.src = data.icon + "?" + new Date().getTime();
});

img.onload = function() {
  var len = img.width / width;
  var ary = [];
  var cnt = 0;
  
  /*
   * 座標を作成する
   * [0,0],[0,1],[0,2],[0,3],
   * [1,0],[1,1],[1,2],[1,3],
   * [2,0],[2,1],[2,2],[2,3],
   * [3,0],[3,1],[3,2],[3,3]
   * のように配列ができる
   */
  for(var i = 0;i < len;i++){
	for(var j = 0;j < len;j++){
	  ary[cnt++] = [i,j];
	}
  }
  
  /*
   * 配列をシャッフルする
   * [2,0],[3,1],[3,0],[2,2],
   * [0,0],[3,3],[1,2],[1,1],
   * [2,3],[1,0],[0,3],[0,2],
   * [2,1],[1,3],[0,1],[3,2]
   * こんな感じにシャッフルされた配列になる
   */
  ary.shuffle();

  //canvasに描画。後ろから順に抜き出す。
  for(var i = 0;i < len;i++){
	for(var j = 0;j < len;j++){
	  cnt--;
	  var x = ary[cnt][0],y = ary[cnt][1]; //上記の例だと最初は、x = 3,y = 2。
	  //画像の(x:75,y:50)から25px*25pxをコピーして、canvasの(x:i,y:j)に描画する。
	  ctx.drawImage(img, width * x, height * y, width, height, width * i, height * j, width, height);
	}
  }
}

/* 
 * 参考:「最速インターフェース研究会 :: 実践JavaScriptで配列をシャッフルする方法リファクタリング」
 * http://la.ma.la/blog/diary_200608300350.htm
 */
Array.prototype.shuffle = function() {
  var i = this.length;
  while(i){
	var j = Math.floor(Math.random()*i);
	var t = this[--i];
	this[i] = this[j];
	this[j] = t;
  }
  return this;
}

ちょっとスマートじゃないかもしれないけど気にしない。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ