何もない空虚

動画を作っていたりいなかったり

この世界のメロディの日 

おはようございます、午前10時半過ぎ、7月もぼちぼち終わりですね。
来月から勤務地が渋谷に変わるとのことで、勤務時間も今より1時間伸びるらしく、憂鬱に拍車がかかっています、行きたくないでござる。

さて、ボカロバンドをやってみたいので募集をかけてみました。
コレ
多分恐らく十中八九集まらないとは思いますが、希望を持ちつつ。

最近は全く動画を作っていません。
というのもサイトを作るのが楽しくてしょうがなかったりします、html5が楽しくてjQueryが楽しくて。

とはいえ今作っているサイトが完成したらまた動画制作に戻ります。
アイマスの動画制作にシフトしたので、P名でもつけようかなーと思っていたりいなかったり。
oriPって名前、どうですかね。
trackback: -- | コメント: -- | edit

HTML5+Javascriptで画像からRGBで平均値を出す日 

こんにちは、タイトル通りです。
今作っているサイトで必要になったんですが、ネットで調べても意外と情報がなくて困ってたんで作ってみました。
多分恐らくですけど、当たり前の内容過ぎて誰も書いてないのかも…。

以下ソース。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {

  var canvas = document.getElementById("c1");
  var ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = "Tulips.jpg";

  var width = img.width;
  var height = img.width;

  img.onload = function() {

    ctx.drawImage(img, 0, 0);
    var src = ctx.getImageData(0, 0, width, height);

    var red = 0;
    var green = 0;
    var blue = 0;
    var alpha = 0;

    for (var i = 0; i < src.data.length; i=i+4) {

      red += src.data[i];
      green += src.data[i+1];
      blue += src.data[i+2];
      alpha += src.data[i+3];
    }

    console.log(red / (width * height));
    console.log(green / (width * height));
    console.log(blue / (width * height));
    console.log(alpha / (width * height));
  };
};
</script>
</head>
<body>
  <canvas id="c1" width="1024" height="768"></canvas>
</body>
</html>

因みにcanvasタグのwidthとheightの値は画像ファイルと同じサイズかそれ以上にしないとエラーはきます。
スクリプト中で画像のwidthとheightを取得してるんで、その値を直接入れちゃえば済む気はする。

ポイントはwidth * heightで各値を割ってるところ、画像を1ピクセルずつ見てるから当たり前っちゃ当たり前ですが。

実際に実行してもらうとわかるんですけど、取得をミスることが結構ありました。
canvasタグのwidthとheightの値がうんたらかんたら言われることが多い、解析に時間がかかるせい?
同条件でもう一回実行したら大体取得するのでsetIntervalあたりでなんとかなりそうな気がしなくもない。

ちなみに参考にさせてもらったサイト様ではスクリプトの最後でcanvasタグに画像を出力していました。
trackback: -- | コメント: -- | edit

はひふへほの日 

こんにちは、午前11時前、会社なう。
来月から自分の勤務地が浜松町から渋谷に変わるとのことで、今から憂鬱です。
ネット環境がなく、場所も遠く、勤務時間も長くなり、人間関係もあまりよろしくなさそうな場所なので凄く行きたくないです、行きたくないでござる。

さて、恒例の(?)新しいサイトを公開してみました。
コレ
twitter原稿用紙とかいうサイトです、需要はありません。(涙目
trackback: -- | コメント: -- | edit