WordPressにProcessingJSプラグインを導入してみた。

最近がっつりProcessingにはまってます。Processing、かわいいよ、Processing。

そこで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);
}

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

カテゴリー: JavaScript, Processing, wordpress | コメントをどうぞ

JavaScriptで桃鉄っぽいもの作り始めてみた #jsdoit

おひさしぶりこです。
最近はProcessingばかりやってました。久しぶりにJavaScriptで何かつくろうと思ったので以前からつくりたかった桃鉄っぽいものつくってみました。

仕組み

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

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

ソースはこちらです。

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

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

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

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

カテゴリー: JavaScript | コメントをどうぞ

JavaScriptのクロージャーでFizzBuzzやってみた

こんぬちは、私です。

日常でちょこちょこプログラムは書きますが、脳みそが全然追いついていないため、トレーニングとして基本的な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 | コメントをどうぞ

田代砲的なもの(DOSアタックで耐久テスト)

たまにサイトの耐久テストをやったりするので、2ちゃんねるで有名な田代砲的な(DOSアタック)ものをブックマークレット用につくってみました。

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

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

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

そんなメモでした。

カテゴリー: JavaScript | コメントをどうぞ

ProcessingのVideoライブラリを試してみた

Processingネタを1年以上振りに書きます。
もうほとんど触ってもいませんでしたProcessing。
そんなProcessingちゃんを久しぶりにちょこっと書いてみました。

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で画像データを扱う

カテゴリー: Processing | コメントをどうぞ

ルンバにルミカライトつけてバルブモードで軌跡を撮ってみた

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

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


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


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


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


スポットしすぎ。


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

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

カテゴリー: ルンバ | コメントをどうぞ

【追記あり】PHP5.3.8 をCentOS5系にソースからインストールする

いまさらながらPHPのインストールでしくじることがあったのでメモ。

まず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()できればおk。

【追記】

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
カテゴリー: PHP | コメントをどうぞ

【PaaS】fluxflexにRedmine(ベーシック認証付き)を構築してみた

今話題のPaaSを片っ端からアカウントつくりまくって試しまくってたりするhirohiです。
学生の頃は自宅サーバのがカッコイイだろ!とか思い、自宅にしょぼいサーバたてて色々やっていましたが、メンテがもろもろだるいし、ドキュメント残さないから何をどう設定したかすぐわかんなくなるし(ドキュメントは残すべき。)ということで、VPSをレンタルしてそこでサーバを運用している今日この頃です。

…が、最近はすっかり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でここまで設定できればむしろこっちの方が安あがりかも!メンテはある程度必要ですけど。

カテゴリー: PaaS, Redmine, Ruby, Ruby on Rails | コメントをどうぞ

ブックマークレットでjQueryを使う方法

こにちは。今さらながらブックマークレットにちょろっとはまってます。

普段は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が使えるようになります。

超便利!

カテゴリー: JavaScript, jQuery | 1件のコメント

Rails3 jquery-railsをインストールする

ようやくちゃんと(?)Railsを勉強し始めました。

Railsはprototype.jsベースになってたりするのですが、最近はもっぱら世の中jQueryなので、Rails3でjQueryを使えるようにします。

gemsでjquery-railsをインストールする。

% sudo gem install jquery-rails --no-RDoc --no-ri
% gem list
jquery-rails (1.0.14)

これでインストール完了。
次に、Rails3アプリに組み込む。
${RAILS_APP_PATH} は、railsアプリのパス。

% cd ${RAILS_APP_PATH}/
% vi Gemfile
#最後尾に下記を追加する。
gem 'jquery-rails'

追記したらbundleして、railsサーバー起動。

% bundle
% rails generate jquery:install
     remove  public/javascripts/prototype.js
     remove  public/javascripts/effects.js
     remove  public/javascripts/dragdrop.js
     remove  public/javascripts/controls.js
     copying  jQuery (1.6.2)
     create  public/javascripts/jquery.js
     create  public/javascripts/jquery.min.js
     copying  jQuery UJS adapter (c00a97)
     remove  public/javascripts/rails.js
     create  public/javascripts/jquery_ujs.js
% rails s

ブラウザからソースを表示して、jQueryとjQueryUIが読み込まれてたら成功。
これでjQueryが使えるようになった。

カテゴリー: jQuery, Ruby, Ruby on Rails | 2件のコメント
Page 1 of 1612345...Last »