Arduinoを使った8×8ドットマトリックスLEDの点滅をやりたいなと思い、そのシミュレーションとしてjsdoitでまずはcanvasに描画してみようと思いたちProcessing.jsで書いてみました。

int[][] p = {
  {0,0,1,0,0,0,0,0},
  {0,1,1,1,1,1,0,0},
  {0,0,1,0,0,0,0,0},
  {0,0,1,1,1,1,0,0},
  {0,1,1,0,1,0,1,0},
  {1,0,1,1,0,0,1,0},
  {0,1,1,0,0,1,0,0},
  {0,0,0,0,0,0,0,0}
};
void setup(){
  size(81, 81);
  frameRate(30);
}
void draw(){
  background(0);
  stroke(0);
  for(int y = 0; y < p.length; y++){
  for(int x = 0; x < p[y].length; x++){
    if(p[y][x] == 0){
      fill(96, 96, 96);
    }
    else if(p[y][x] == 1){
      fill(255, 0, 0);
    }
    ellipseMode(CORNER);
    ellipse(x*10, y*10, 10, 10);
  }}
}

jsdoitにも投稿してあります。
Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた

Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた - jsdo.it - share JavaScript, HTML5 and CSS

描画するだけだったら簡単だけど、x軸に対して1ドットずつ横に流してアニメーションさせたいなーと。
アニメーションできたらまたうｐしますん。

そこでProcessingで書いたソースをぺたぺたブログにもはってたのですが、実際に動いてるものをどうにか簡単にはれないかと思い探してみました。

Processing JS WordPress Plugin
http://www.keyvan.net/code/processing-js/

意図も簡単に見つけてしまったので早速導入してみました。

void setup() {
    size(400, 160);
    frameRate(15);
}
void draw() {
    int s = random(100);
    background(#ffffff);
    stroke(random(255), random(255), random(255));
    ellipse(random(width), random(height), s, s);
}

良い感じに動いたー！すてきー！

仕組み

• 2次元配列でマップ作成。
• とりあえずコマをマップ上で動かしてみる。

あたり判定用と見た目用で配列分けようかとも思いましたが、特に必要ないかなと思い配列マップは1つにまとめました。

ソースはこちらです。

桃鉄っぽいもの。 – jsdo.it – share JavaScript, HTML5 and CSS

まだマップは未完成ですが、できたものがこちら。

桃鉄っぽいもの。 – jsdo.it – share JavaScript, HTML5 and CSS

jsdo.it で全部完成できたらいいね！

日常でちょこちょこプログラムは書きますが、脳みそが全然追いついていないため、トレーニングとして基本的なFizzBuzzに挑戦してみました。

言語はいつものJavaScript。
あと最近（今さら）覚えたクロージャーを使って書いてみました。

var rtn = "";
var fizzBuzz = function(fizz, buzz, max){
    return function(){
        max++;
        if( (max % fizz === 0) && (max % buzz === 0) ){
            return "FizzBuzz";
        }
        else{
            if( max % fizz === 0 ){
                return "Fizz"
            }
            else if( max % buzz === 0 ){
                return "Buzz";
            }
            else {
                return max;
            }
        }
    }
}

var FizzBuzz = fizzBuzz(3, 5, 0);
var n = 0;
while(n < 20){
    rtn += FizzBuzz() + "\n";
    n++;
}
console.log(rtn);

実際やってみたもの

10分くらいでできてしまった…。
簡単だったけど面白かった。

javascript:(function(){ setInterval(function(){var dd = new Date(); console.log( dd.getUTCHours() + ":" + dd.getUTCMinutes() + ":" + dd.getUTCSeconds() ); location.reload()}, 5000) })();

これをブックマークレットに登録して使うと、無限リロードしまくります。
（※良い子は悪用しちゃダメだよ！）

ちなみにChromeなどではある程度実行すると悪意のあるスクリプト（？）とみなされて停止して動かなくなったり・・・。

そんなメモでした。

Processingの拡張ライブラリでVideoライブラリがあります。
Macの場合、モニタの上部分についてるあのカメラを使ってProcessingにキャプチャ画像を取り込むことができるのです。

まずはカメラを使う準備から。
下記のソースコードでカメラから取り込んだキャプチャをProcessingに渡します。

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
}

そしたらピクセル解析の準備をします。
loadPixels()をセットすることで、pixels[]にピクセルデータを渡します。

void draw(){
  image(cam, 0, 0);
  loadPixels();  //ディスプレイウィンドウへピクセルデータをロードします。
}

ここからはキャプチャを加工するための関数を定義して読み出します。

rect版モザイク

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  mosaic(10, 10);
}

void mosaic(int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    rect(x, y, w, h);
  }
  }
}

ellipse版モザイク

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  fillMosaic(cam, 10, 10);
}

void fillMosaic(PImage img, int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    ellipse(x, y, brightness(c)/7.0, brightness(c)/7.0);
  }
  }
}

斬新な何か

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  fractalSolidMosaic(cam, 10, 10);
}

void fractalSolidMosaic(PImage img, int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    pushMatrix();
    translate(x, y);
    rotate(brightness(c));
    rect(0, 0, brightness(c)/2.0, 2);
    popMatrix();
  }
  }
}

実際に動かしてもらった方が面白いと思います。
次回はAR系に挑戦してみようと思います。

[参考記事】yoppa.org - Processingで画像データを扱う

ウチです。自宅です。リビングです。

前々からやってみたかったのがルンバの軌跡の撮影。
一眼レフでバルブモードにして長い間露光させておけばシャッターを押してから離すまでの部分を撮影できるのです。これを利用してルンバちゃんの軌跡を撮影してみました。

まずはバルブモードで7分ほど撮影。ちょっと手ブレしちゃった…。

まっすぐからのスポット掃除。

どこ行っちゃうのかなー？

スポットしすぎ。

手動操作でいろいろ動かしてみた。

今回は動きを観察して撮影してみましたが、次はリモコンで操作してルンバで描いた写真を共有できたらなと思います。

まずPHPをインストールする。

# wget http://jp.php.net/get/php-5.3.8.tar.gz/from/us.php.net/mirror
# tar xvfz php-5.3.8.tar.gz
# ./configure --enable-mbstring --with-apxs2 --with-mysql --with-gd --with-zlib --with-jpeg-dir --with-tsm-pthreads --enable-maintainer-zts --cache-file=../config.cache
# make
# make install
# which php
/usr/local/bin/php

# php -v
PHP 5.3.8 (cli) (built: Oct 27 2011 11:47:09)
Copyright (c) 1997-2011 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies

apacheとの連携

# vi /etc/httpd/conf/httpd.conf
LoadModule php5_module        /usr/lib/httpd/modules/libphp5.so
DirectoryIndex index.html index.html.var index.php
AddType application/x-httpd-php .php

# /etc/rc.d/init.d/httpd configtest
# /etc/rc.d/init.d/httpd restart

正常にphpinfo()できればおｋ。

【追記】

64bit版の場合、./configureのオプションがちょっと変わります。
さくらVPSが64bit版だったっぽくちょっと悩みました。

オプションに “–with-libdir=lib64″ を追加してください。

./configure --enable-mbstring --with-apxs2 --with-mysql --with-gd --with-zlib --with-libdir=lib64 --with-pear --with-gd --enable-maintainer-zts --cache-file=../config.cache

【追記2】

Curlを使う場合。

./configure --enable-mbstring --with-apxs2 --with-mysql --with-gd --with-zlib --with-libdir=lib64 --with-pear --with-gd --with-curl --enable-sockets --enable-maintainer-zts --cache-file=../config.cache

…が、最近はすっかりPaaSで良いんじゃないかと思い色々試してみています。
だって無料だよ！個人レベルだったら十分な容量だよ！

さて、WkipediaによるとPaaSとは、

PaaS（Platform as a Serviceの略、パースまたはパーズ）とは、インターネットを利用したコンピュータの新しい利用形態の1つである。PaaSでは、ソフトウェアを構築および稼動させるための土台となるプラットフォームを、インターネット経由のサービスとして提供する。開発者は、プラットフォーム上で構築したサービスを自分の顧客に提供することができる。 具体的には、インフラ、DBMS、ユーザーインターフェースなどのシステム開発手段となるツールや、開発したシステムを運用するための環境をインターネットを通じて「サービス」として提供し、月額使用料などの形で収入を得る事業モデルである。

とのこと。最近ではクラウド開発なんて言われてたり言われてなかったり。

とにかく、自分で開発サーバを構築する必要がなく、ある程度開発環境そろってるので、いきなりソースコードを書いて動かすことができる環境のことだと思っています。（あってる？）
有名どころでいくと、AWS Elastic Beanstalkや、Google App Engine、Herokuなど。

Rubyが好きなので自分もHerokuでRailsやらRedmineやらやってみよーと思いちょろちょろ触ってみたのですが、よくわからない部分が多かったので、Redmineをポチっとインストールできるfluxflexを使ってみることにします。

fluxflex
http://www.fluxflex.com/

アカウントを取得したらログインして、新規プロジェクトをつくります。

プロジェクトを作ったら以下の手順でRedmineをポチッとインストールします。

インストール完了のダイアログが出たら、ブラウザでプロジェクトのURLにアクセスして確認します。Redmineが正常にインストールされていたら、とりあえずRedmineのパスワードだけは変更しちゃいましょう。

※デフォルトのID/PASSは、admin/adminになります。

Redmineのパスワードの変更が終わったら、ベーシック認証をかける準備をします。LinuxかMacOSXでターミナルを起動してください。
fluxflexはgitで更新やデプロイができるので、ターミナルからもろもろ操作します。

プロジェクトのリポジトリからgit cloneしてください。

$ git clone ssh://git@git.fluxflex.com:443/PROJETCT_NAME

ローカルリポジトリができたら、.htaccessを編集して、ベーシック認証が使えるようにします。

$ cd PROJECT_NAME
$ vi public/.htaccess
AuthType Basic
AuthName "Are you ready?"
AuthUserFile /home/PROJECT_NAME/.htpasswd
AuthGroupFile /dev/null
require valid-user

次に.htpasswdを生成します。

$ htpasswd -mc .htpasswd userName

.htpasswd を生成したら、コミットして、デプロイします。

$ git add .htpasswd
$ git commit -a -m "basic auth"
$ git push

git push が成功したら、そのままデプロイされるので、しばらくしたらプロジェクトのURLにアクセスしてください。
ベーシック認証のログイン画面が出てきてログインできれば成功です。

SaaSのRedmineサービスとかもありますが、PaaSでここまで設定できればむしろこっちの方が安あがりかも！メンテはある程度必要ですけど。

普段はjQuery使いなので、HTMLのパースがネイティブだともの凄い骨が折れます。
なので、ブックマークレットでjQueryを読み込ませてみました。

こちらを参考にしました。
http://h2ham.seesaa.net/article/115498697.html

javascript: (function(){
	var d = document;
	var s = d.createElement('script');
	s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
	d.body.appendChild(s);
	setTimeout(function(){
	//ここに記述
	}, 1000);
})();

jQueryをgoogleAPIから読み込んで、bodyにappendしています。
読み込んだ後に実行させるため、1秒間ウェイトをおいています。
これでブックマークレットでjQueryが使えるようになります。

超便利！