Metaball - wonderfl build flash online

Metaball with PerlinNoise - wonderfl build flash online

前からメタボールに興味があって、ようやく作ってみました。
といってもアルゴリズムはProcessingのlearningにあるのをそのまま使った感じです。
メタボールのアルゴリズムは僕が知っているだけでもいくつかあるのですが、この表現手法が一番気にいっています。
PerlinNoiseという自然表現に使用されるテクスチャ作成技法と組み合せた下のはかなり好みな感じに仕上がりました。

3D Image Ring - wonderfl build flash online

3D Image Sphere - wonderfl build flash online

こちらはマウスドラッグで動きます。

野中文雄さんの「ActionScript 3.0による三次元表現ガイドブック」という本が届いたので、早速試してみました。
3Dは何度か挑戦して、挫折しているのですが、一応自作のMatrix3D、Vector3Dでも動いたので、ようやく少し遊べるようになりました。
めっさ楽しいです。近々ちゃんとしたコンテンツにも挑戦しようと思っております。
画像はr-type-lさんのを使わせて貰いました。

Noise Instrument - wonderfl build flash online

SiONというライブラリを使って、楽器的なものを作ってみました。
真ん中の円に触れるとドラムパターンとトーンパターンが変わります。

ソースをダウンロードして、どっかのディレクトリにUPすれば、すぐ動くと思います。
PEARがインストールできる環境であれば、問題ないのですが、念のため使用しているPEARのAPIも丸ごと入れておきました。
あんまりテストとかしてないので、環境によっては、動かないかも知れません。

■ソース - Source

使用しているAPIは以下のものです。制作者の方ありがとうございます。

●http://pear.php.net/package/Net_URL2/
●http://pear.php.net/package/HTTP_Request2/
●http://pear.php.net/package/HTTP_OAuth/
●http://github.com/meltingice/TwitPic-API-for-PHP

使い方はこんな感じ。
1. Twitterのアプリケーション登録を行う。https://twitter.com/apps
2. sourceディレクトリの中のクラスを適当なディレクトリにUPする。
3. 認証用のPHPとコールバック用のPHPを同ディレクトリにUPする。
※TwitPicへの投稿機能を使用する再は、TwitPicのアプリケーション登録も行う。http://dev.twitpic.com/

認証用のプログラムはこんな感じ。
アクセスするとTwitterの認証画面に遷移し、ログインするとコールバック用のプログラムに遷移します。

//認証用プログラム

//クラスの読み込み
require_once 'TwitterRequest/TwitterRequest.php';

//インスタンス生成
//consumer_key : アプリケーション登録した際に発行されるCunsumer Key
//consumer_secret: アプリケーション登録した際に発行されるConsumer secret
//callback_url : 認証後にコールバックされるURL
$twitter = new TwitterRequest('consumer_key', 'consumer_secret', 'callback_url');

//実行
$twitter->run();

コールバック用のプログラムはこんな感じ。

//コールバック用プログラム

//クラスの読み込み
require_once 'TwitterRequest/TwitterRequest.php';

//インスタンス取得
$twitter = TwitterRequest::build();

//実行
$consumer = $twitter->rerun();

//処理内容を以下に記載
//
//
//

このクラスは認証だけ行うものなので、実処理については、好きなように記載して下さい。
APIはこちらを参考に。
■Twitter API Documentation
■Twitter API Documentation（日本語訳）

処理内容のサンプルです。

[ツイートを投稿したい場合]

//投稿処理
$response = $consumer->sendRequest("http://api.twitter.com/1/statuses/update.xml", array('status' => 'テキスト'), "POST");

//結果表示
echo "<code>".htmlspecialchars($response->getBody())."</code>";

[自分のツイートを取得したい場合]

//ツイート取得
$response = $consumer->sendRequest("http://api.twitter.com/1/statuses/user_timeline.xml", array('count' => "10"), "GET");

//XMLに変換
$xml = simplexml_load_string($response->getBody());

//結果表示
foreach($xml->status as $status){
	echo $status->text."<br />";
}

TwitterとTwitpicに投稿する場合はこんな感じ。

//Twitpic API Key : TwitPicでアプリケーション登録した際に発行されるAPI Key
$twitter->postImage("Twitpic API Key","画像のパス","テキスト");

一度認証された後はセッションが続く限り、コールバックのプログラムと同様の書き方で、他のプログラムでも動作します。

クラスはこんな感じです。

<?php
/**
 * TwitterRequest
 *
 * PHP version 5.1.6+
 *
 * @version   1.0.0
 * @created   29/10/2010
 * @author    Haruaki Enokido @enok00
 * @license   http://www.opensource.org/licenses/bsd-license.php New BSD License
 * @link      http://pear.php.net/package/Net_URL2/
 * @link      http://pear.php.net/package/HTTP_Request2/
 * @link      http://pear.php.net/package/HTTP_OAuth/
 * @link      http://github.com/meltingice/TwitPic-API-for-PHP
 */

require_once 'HTTP/OAuth/Consumer.php';

class TwitterRequest {
	const REQUEST_TOKEN_URL = 'http://twitter.com/oauth/request_token';
	const AUTHORIZE_URL = 'http://twitter.com/oauth/authorize?oauth_token=';
	const ACCESS_TOKEN_URL = 'http://twitter.com/oauth/access_token';

	protected $consumer = null;
	protected $consumer_key = null;
	protected $consumer_secret = null;
	protected $callback = null;

	/**
	 * コンストラクタ
	 */
	public function TwitterRequest($consumer_key, $consumer_secret, $callback=""){
		if(session_id()==""){ session_start(); }

		$this->consumer_key = $consumer_key;
		$this->consumer_secret = $consumer_secret;
		if($callback!=""){ $this->callback = $callback; }

		$this->consumer = $this->createConsumer($this->consumer_key, $this->consumer_secret);
	}

	/**
	 * 再ビルド
	 */
	public static function build(){
		if(session_id()==""){ session_start(); }

		if(isset($_SESSION['tr_data'])){
			$data = unserialize($_SESSION['tr_data']);
			return new TwitterRequest($data->consumer_key, $data->consumer_secret);
		}else{
			exit;
		}
	}

	/**
	 * 初期実行
	 */
	public function run(){
		$this->getRequestToken($this->callback);

		$_SESSION['consumer_key'] = $this->consumer_key;
		$_SESSION['consumer_secret'] =$this->consumer_secret;
		$_SESSION['request_token'] = $this->consumer->getToken();
		$_SESSION['request_token_secret'] = $this->consumer->getTokenSecret();
		$_SESSION['tr_data'] = serialize($this);

		$this->redirect(self::AUTHORIZE_URL.$this->consumer->getToken());
	}

	/**
	 * 再実行
	 */
	public function rerun(){
		$this->setToken();

		return $this->consumer;
	}

	/**
	 * トークン設定
	 */
	private function setToken(){
		try{
			if(!isset($_SESSION['access_token']) && !isset($_SESSION['access_token_secret'])){
				$oauth_verifier = $_GET['oauth_verifier'];

				$this->consumer->setToken($_SESSION['request_token']);
				$this->consumer->setTokenSecret($_SESSION['request_token_secret']);
				$this->consumer->getAccessToken(self::ACCESS_TOKEN_URL, $oauth_verifier);

				$_SESSION['access_token'] = $this->consumer->getToken();
				$_SESSION['access_token_secret'] = $this->consumer->getTokenSecret();
			}

			$this->consumer->setToken($_SESSION['access_token']);
			$this->consumer->setTokenSecret($_SESSION['access_token_secret']);
		}catch (Exception $e){
			echo $e->getMessage();
			exit;
		}
	}

	/**
	 * Consumer取得
	 */
	private function createConsumer($consumer_key, $consumer_secret){
		return new HTTP_OAuth_Consumer($consumer_key, $consumer_secret);
	}

	/**
	 * Consumer設定
	 */
	public function setConsumer($consumer_key, $consumer_secret){
		$this->consumer = $this->createConsumer($consumer_key, $consumer_secret);
	}

	/**
	 * RequestToken取得
	 */
	public function getRequestToken($callback){
		try{
			$this->consumer->getRequestToken(self::REQUEST_TOKEN_URL, $callback);
		}catch (Exception $e){
			echo $e->getMessage();
			exit;
		}
	}

	/**
	 * Twitpicへの投稿
	 */
	public function postImage($twitpic_key,$media,$status){
		require_once 'TwitPic/TwitPic.php';

		$twitpic = new TwitPic(
				$twitpic_key,
				$_SESSION['consumer_key'],
				$_SESSION['consumer_secret'],
				$_SESSION['access_token'],
				$_SESSION['access_token_secret']);

		try{
			$result = $twitpic->uploadAndPost(
				array('media'=>$media,'message'=>$status),
				array('format'=>"xml")
			);

			$result = print_r($result, true);
		}catch (Exception $e){
			echo $e->getMessage();
			exit;
		}

	}

	/**
	 * リダイレクト
	 */
	public function redirect($url){
		header("Location: ".$url);
	}

	/**
	 * Getter
	 */
	public function __get($key){
			return $this->$key;
	}

	/**
	 * Setter
	 */
	public function __set($key, $value){
		$this->$key = $value;
	}

}
?>

質問などがあれば、@enok00までお気軽に。

参考にさせて頂いたサイトはこちらです。ありがとうございました。
●http://www.msng.info/archives/2010/01/twitter_api_oauth_with_php.php
●http://nariyu.playwell.jp/2010/09/twitpic-upload-via-php/

Frocessingでお絵描きツール第2段。
黄金比を用いた螺旋構造で、四角形に塗りつぶしていく感じです。
クリックすると色が変わり、連打すると消えていきます。

■ソース - Source
■フルバージョン - Full Vertion

久しぶりにFlashで遊んでみました。
前回同様Frocessingを使って、お絵描きツールを作ってみたのですが、やはりこういうのは楽しいですね。
Frocessingのおかげでコードも少なめに書けるし、これからちょこちょこ作っていこうと思います。
まだまだ使ってみたい機能が色々あるので、ねたには尽きなそうです。

ソースはWonderflに投稿しているので、ご興味のある方はぜひ！
■http://wonderfl.net/c/ys87J

大きい画面で触ってみたいという方はこちらをどうぞ。
■http://linkalink.jp/enok/swf/second/

【クリックすると始まります】
■ソースはwonderfl

久しぶりにFlashを使う機会があったので、前から試してみたかったNutsuさんのFrocessingで3Dを試してみました。
FrocessingはProcessingライクにAS3を書くことが出来るライブラリです。
Processing自体をさわったことがないので、本家サイトのサンプルなどを見てると、それはすごいのが出てくる出てくる。
僕もいつかはこんなのが作りたいと思いながら、とりあえず最初の一歩で作ってみました。

球の中を直線・曲線が飛び交うというものです。
球の方はsphere関数をカスタマイズして、表示方法を少しいじました。
直線・曲線はcurveVertex3dで描画しています。
本体はF5MovieClip3Dとなっています。
F5MovieClip3DBmpにすると↓のようになります。

【クリックすると始まります】
■ソースはwonderfl

新居に画伯がやってきた。
ご家族と一泊した後に、こちらの彫刻を置いていかれました。
重厚感はんぱないっす。大事にします。

前回の「ぼよよ～ん」に続いて、もう一作品WONDERFLに投稿してみました。
好きな文字を好きな音楽に反応させる「FONT DANCE」を使い、ドラムの「ＤＯＮ」を表現してみました。
「ＤＯＮ」はこちらです。

今回はFlashをやる上で目標の一つであった音とモーションの連動をやってみました。
音に反応してフォントが小さくなったり、大きくなったり、かたかたになったりします。
今回はSoundMixer.computeSpectrumという機能を使って、音を波長データで取得しています。

[やったこと]
1. 好きな文字をテキスト化する。
2. テキストをビットマップ化する。
3. テキストのエッジを検出しポイント化する。（ConvolutionFilterを使用）
4. 音をロードする。
5. ロードした音をコピーする。（Sound.extractを使用）
6. 音の波形データを取得し、テキストのポイントに反映させる。（SoundMixer.computeSpectrumを使用）
※ソースはこちら

[苦労した箇所]
1. Sound.extractを使用した部分。
SampleDataEvent.SAMPLE_DATAの中で必要な分だけSound.extractを行うという方法を取りたかったのですが、何故かこれをやると音が早回しの状態で再生されてしまうので、音のロードが完了した時点で全データを予め取得する方法に変更にしました。
これによって使用メモリが20Mぐらいあがってしまいました。
alumican_netさんのこちらを参考にさせて頂きました。

2. 描画部分。
描画部分で512個のスプライトにグラデーションかけて、BlendModeをかけるというそれは重そうなことをやっているので、CPUをかなり消費してしまいます。この部分を修正すれば、処理を半分くらいにはできるのですが、とりあえず見た目気にいっているので、そのまま放置です。

※音はtechno.toの試聴音源を使わせて貰ってます。

WONDERFLというFLASHの投稿サービスサイトで、定期的にCHECKMATE（Actionscript天下一武道会）というコンテストが開催されています。
今は第3回目で、Saqooshaさんのお題で皆さん作品を投稿しています。
前から一度参加したかったのですが、なかなかタイミングが合わず今回初参加してみました。

[クリックすると表示されます。マウスでぐりぐりします。]

僕が投稿したのは、Professionalの方で、お題はこちらです。
—————————————————————————————————————————————-
漫画にみられるようなオノマトペ（onomatopoeia: 擬声語）をFlash のモーションで表現してください。
ヒント：Box2Dや他のライブラリ併用してみてください。
—————————————————————————————————————————————-

丁度CS4を１年遅れで購入して、FP10の新技術drawTriangleの動作をテストしていたところだったので、この技術をそのまま使ってみました。僕が作ったのは「ぼよよ～ん」です。
それと先日参加させて頂いたSpark projectの、BeInteractiveさんが制作しているTweenライブラリBetweenAS3も試してみました。
BetweenAS3は今までなかったTWEEN新機能が実装されていて、かつ処理速度がちょっ早なとても優れたTweenライブラリだと感じました。
Tweenerがついに開発STOPされたので、今後も使わせて頂くこと間違いなしですね。

↓「ぼよよ～ん」を作るにあたって、参考にさせて頂きました↓
http://aquioux.blog48.fc2.com/blog-entry-624.html