hysyskとかmrrychとかいい加減にしよう

myfye.net
丸尾君の新作。おんぶにだっこのだっこ担当(クライアントサイド)。おんぶ担当(サーバーサイド/normal version)はnajimi.jpのyamakk。

撮った写真がカメラからそのままネットにアップロードされ、撮影の間隔が12秒以内の場合、指定された濃度で自動的に乗算合成されて一枚になります。

このような仕組みが、どう撮るものに影響してくるのか楽しみです。

HTMLからSWFに値を渡す方法、スライダーなどのユーザーインターフェース、ビットマップの操作など色々勉強になりました。

最近読み始めた「ActionScript 3.0デザインパターン」の内容を習得できればもっと綺麗に書き直せそうです。
「Foundation Actionscript 3.0 Image Effect」も買ったので今後のバージョンアップに活かせそうです。

actionscript3でglitchする

参考にしたのはこのforum。
Processing 1.0 - glitch art

ヘッダになっているであろう位置をとばして適当な位置のデータを置き換える。
ヘッダの位置予想は適当。ヘッダがあれば、何でもできる。
バイナリのいじり方はflash oopを参考にした。

本当はhex editorみたいに全部展開してちゃんと狙ってglitchさせたいけど、イベント処理が重く分割させる必要がある。これもflash oopにイベントを分割してドラゴン曲線を描くライブラリの作り方が書かれているので参考にするつもり。

package {
 import flash.display.Sprite;
 import flash.display.Loader;
 import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.net.URLRequest;
 import flash.net.URLStream;
 import flash.utils.ByteArray;
    
    public class LoadBinaryURLStream extends Sprite {
        private var stream :URLStream; 
        private var request:URLRequest;
        private var data:ByteArray;
        private var loader:Loader;
        public function LoadBinaryURLStream(){
            data = new ByteArray();
            request = new URLRequest("img/pic.jpg");
            loader = new Loader();
            addChild(loader);
   
            stream = new URLStream();
            stream.addEventListener(Event.COMPLETE, onComplete);
            stream.addEventListener(ProgressEvent.PROGRESS, onProgress);
            
            stream.load(request);
        }
  
        private function onComplete(e:Event):void {
            loader.loadBytes(data);
        }
  
        private function onProgress(e:ProgressEvent):void {
            stream.readBytes(data, data.length);
            if(data.length > 1024) {
                data.position = Math.floor(Math.random()*data.length)-1;
                if(data.position<1024) {
                    data.position += 1024;
                }
                data.writeByte(0);
            }
        }
    }
}

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する2

JSONというのが何なのかというのが今回の話題。

詳しくは公式ドキュメントなりwikipediaなりを読むとして、とりあえずはXMLなどのようなデータフォーマットの一種であると。JavaScript Object Notationが正式名称だけど、JavaScriptのオブジェクトの表記をベースにしているというだけで、JavaScript以外でも使える。
"キー":値というシンプルな形。入れ子にもできる。
例:

{
  "name":"hayashi", 
  "age":26, 
  "occupation":[
    {"main":"designer"},
    {"sub":"programmer"}
  ]
}

前回のプログラムで、loaderから読み取ったデータをそのまま出力してみる(loader.dataをtraceする)と、このような形式の文字列が出力されているはず。

で、あとはXMLと同じようにドットとキーで欲しい値にアクセスする。
前回のソースの27行目を下のように一旦オブジェクト型の変数に格納する形にして、
var o:Object = JSON.decode(loader.data);

o.tokensで何てキーワードで検索したかとか、o.totalで何件ひっかかったとかが取得できる。

o.resultsはリクエストに合致した記事のデータがそれぞれ配列になっていて、o.results[0].titleで1件目の記事のタイトルを取得したり、o.results[2].bylineで3件目の記事の筆者を取得したりできる。o.results.lengthで結果の総数を得てfor文と一緒に使うケースが多いと思う。

この辺のキーの与え方に関しては返ってきたデータ(loader.dataでtraceした結果)を見ながらの作業になる。

視覚化の方法についてはまた次回。

actionscript2とpapervision3D

papervisionXがどうとか騒がれている2009年の3月ですが、Flash Player8(もしかすると7)で3Dっぽいものを動作させなければならないのでpapervisionについて調べてる。
が、古い情報はなかなか見つからない。検索結果と見られるページ全部をある時期に戻せたらいいのに。メディアアートに文化財保存修復学科的なものがあればいいのに。

svnからpapervision3Dを全部check outすると、一応as2のsrcもあるのだけど、as3用のpritivesのようなSphereやCylinderがない。wikiにあるとの情報だったが、wikiもう見られない。

3Dに関しては全然知識がなく、ここ数日でわかったことは、立体を作るためには三角形をひたすら組み合わせるということ。

自分で書くのは大変そうなのでinternet archiveで探してサルベージ。

objectフォルダに入れておく。とりあえずSphereは動いた。
ファミコンで鉄拳2とか観て自分を奮い立てる。

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.scenes.Scene3D;

import org.papervision3d.objects.Sphere;

var container:MovieClip;
var scene:Scene3D;
var camera:Camera3D;
var sphere:Sphere;

init3D();
this.onEnterFrame = loop3D;

function init3D():Void {
 container = this.createEmptyMovieClip("container", this.getNextHighestDepth());
 container._x = 275;
 container._y = 200;
 
 scene = new Scene3D(container);
 
 camera = new Camera3D();
 camera.z = -2000;
 camera.zoom = 1;
 camera.focus = 500;
 
 var material:WireframeMaterial = new WireframeMaterial(0xffffff);

 sphere = new Sphere(material, 400, 10, 10);
 
 scene.push(sphere);
}

function loop3D():Void {
 sphere.rotationY = container._xmouse / 2;
 sphere.rotationX = container._ymouse / 2;
 
 scene.renderCamera(camera);
}

steering behaviorのメモ

seekがターゲットに向かう動き、fleeがターゲットから遠ざかる動き。まずこれを押さえる。
ここからflockするために、cohesion、separation、alignmentを加えるんだけど、

cohesionは仲間の平均の位置をseekすることで、separationは近づき過ぎた仲間からfleeすること、alignmentは仲間の平均の速度に合わせること。

基本はAdvanced ActionScript 3.0 Animationで勉強した。
最近また新しいサンプルが増えたnature of codeもよくわかる。
どちらも大元にあるのはcraig reynolds。
Steering Behaviors For Autonomous Characters

nature of codeは夏に本が出るらしい。
Nature of Code Book at daniel shiffman

早速メーリングリスト登録した。

mousine

前にjavaでこんなの書いた気がするけど、actionscriptでマウスの動きに合わせて
周波数と振幅変えるコードをwonderflに書いた。
mousine

普通にマウス位置を取得して周波数や音量に入れると波形が急激に変化してブツブツノイズが入ってしまうので、アニメーションを滑らかに動かすのと同じ要領で、波形を書き込む前にfreqとampの値を滑らかに変化させている。onEnterFrame()はsampleData()が実行された後で実行されるので、2048サンプル分ごとにマウスから値を取得し、新しい周波数と音量を設定していることになる。8192サンプルだと反応が遅いと感じる。この辺りは悩ましいところ。
Adobe - デベロッパーセンター : Flash Player 10で広がるFlashの音の世界
SampleDataEvent - ActionScript 3.0 言語およびコンポーネントリファレンス

滑らかな数値の変化のさせ方は結構面白くて、アニメーションで使われている手法を音にも適用してみたい。
CBCNET - 土日 Flash のススメ(4)：動きをつけるということ（イージングについて考える）

build ribbons

erik natzkeのflash on the beachの発表なのかな。jonathan harrisへのレスポンスと一緒に上げられてた気がするけど。
Untitled Document
Flash on the Beach and “The Jonathan Harris Affair” | THOMAS KRÄFTNER

これのParticlesのソース見て、動かしてみて、この書き方がいいのかどうかは知らないけどprocessingでもループ内でnewしてParticlesを生み出したいと思った。最初に思いついたのが配列を使って実現する方法。サイズの宣言と値を代入する必要があるので、適当に埋めてやってたんだけど、ださい(し、これでは意味がない。最初に決まった数のオブジェクトを作るんじゃなくて、ループの度に増やしたい)。

とりあえずParticleクラス
Particle.pde

class Particle {
  float x;
  float y;
  float vx;
  float vy;
  float rad;
  
  Particle(float x, float y, float vx, float vy, float rad) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.rad = rad;
  }
  void draw() {
    x += vx;
    y += vy;
    ellipse(x, y, rad, rad);
  }
}

実行するメインのコード。
particleTest1.pde

Particle[] p = new Particle[500];
int idx = 0;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  for(int i=0;i<p.length;i++) {
    p[i] = new Particle(0,0,0,0,0);
  }
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  if(idx>p.length-1) {
    idx = 0;
  }
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  p[idx] = new Particle(mouseX, mouseY, vx, vy, rad);
  idx++;
}

void drawParticles() {
  for(int i=0;i<p.length;i++) {
    p[i].draw();
  }
}

actionscript3の場合は描画されるオブジェクトはディスプレイリストで管理されるから、addChildでひたすらオブジェクトを追加しつつ増え過ぎたら削除、みたいな書き方ができる。
processingでもそんな方法はないのかなと思ったらサンプルにあった。
ArrayListClass \ Learning \ Processing 1.0 (BETA)

これはBallクラスにlifeプロパティをもたせてあり、255回ループで呼ばれたらfinished()メソッドがtrueを返して、ballsから削除されるようになってる。

(Example>Topics>Simulate>MultipleParticleSystemsとかもいい。nature of codeでやったVector3DクラスがPVectorクラスとして組み込まれてる。各メソッドについてもサンプルがついてて親切。)

for (int i = balls.size()-1; i >= 0; i--) { 

は毎回balls.size()を参照しなくてもいいようにするかっこいい書き方。

というのを参考にしつつ、一定数超えたら削除していく方法で書き直したのがこれ。前出のParticleクラスはそのまま使える。
ArrayList使った思い通りの方法。
particleTest1_2.pde

ArrayList particles;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  particles = new ArrayList();
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  particles.add(new Particle(mouseX, mouseY, vx, vy, rad));
  if (particles.size()>500) {
    particles.remove(0);
  }
}

void drawParticles() {
  for(int i=particles.size()-1; i >= 0; i--) {
    Particle p = (Particle)particles.get(i);
    p.draw();
  }
}

(11/7修正)重力のための変数gravityを削除。まだ関係ないので。

using flickr api 01

flickrから画像を取得する方法。提供されてるAPIを使う。使用の際に必要となるAPIキーはここで取得。
http://www.flickr.com/services/api/keys/

よく使われてるのはこのライブラリらしい。
as3flickrlib - Google Code

ライブラリ使わなくてもある程度は自分でできる。
[Think IT] 第4回：外部API（Flickr）を試す！ (1/3)

MVCモデルを使ってとか、僕にはまだわかりません。
下にあるコードは手っ取り早く使う場合とか、前段階として。
慣れだと思うけど、一回散らかさないと片付け方がわからない。

とりあえず、ブラウザに直接URLを入力してみると、xmlが返ってくる。
例えば、「test」というキーワードで全文検索して10件取得した1ページ目だったらこんな感じ(見やすいように改行入れてますが本来は一行です)。

http://api.flickr.com/services/rest/
?method=flickr.photos.search&api_key=取得したAPIキー
&text=test&page=1&per_page=10

結果。


他のを試したければここに出てるargumentsから選んで&でつないで=で代入すればいい。
&tags=music
とか。
Flickr Services: Flickr API: flickr.photos.search

ここまでくれば、あとは普通にxmlの処理するのと一緒。
SSAW07 » 第5回：ActionScript 3.0応用 I - 外部イメージの読み込み

Make your own Flickr search engine with Flash and AS3 | The Tech Labs

thinkitにも書かれているように、crossdomain.xmlをロードするのを忘れずに。

さらに、flash CS3とかで動かしてるブルジョアは大丈夫かも知れませんが、普通にflash player落としてXcodeとかで開発してる場合、セキュリティのエラーが出ると思う。

FlashPlayerTrustというフォルダを作り、Macintosh HD/Library/Application Support/Macromedia/に保存。その中にcfgファイルを作る(名前は何でもいいそうです。とりあえずmm.cfgとかにしておく)。
cfgファイルに目的のswfやフォルダのパスを設定する。こういう話題はどこに書いてあるかというと、ここからダウンロードできるpdfです。そんなん知らんよね。
Adobe - Developer Center : White paper: Adobe Flash Player 9 security

これもどうやって辿り着けたのか思い出せないが、とにかくここのドキュメントはダウンロードしていつでも参照できるようにしておく。
Adobe Flex resources

testで全文検索した結果から10枚表示。マウスクリックで表示順変更。
YOUR API KEYの部分を取得したAPIキーと差し替えないと実行した時にエラーが出て表示されません。

package {
 import flash.display.MovieClip;
 import flash.display.Stage;
 import flash.display.StageScaleMode;
 import flash.display.StageAlign;
 import flash.display.Bitmap;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.net.URLRequest;
 import flash.net.URLLoader;
 import flash.display.Loader;
 import flash.system.LoaderContext;

  public class TestFlickr extends MovieClip {
  private var APIkey:String;
  private var text:String;
  private var searchURL:String;
  private var startPage:uint = 1;
  private var pageValue:uint = 10;
  
  public function TestFlickr() {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(MouseEvent.CLICK, onMouseClick);
   init();
  }
  
  private function init():void {
   //your API key
   APIkey= "YOUR API KEY";
   //search word
   text = "test";
   
   search();
  }
  
  private function search():void {
   while(this.numChildren > 0){
    this.removeChildAt(this.numChildren-1);
   }
   setSearchURLString();
  }
  
  private function setSearchURLString():void {
   var baseURL:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + APIkey;
   searchURL = baseURL + "&text="+ text + "&page=" +startPage + "&per_page=" + pageValue;
   trace(searchURL);
   startXMLLoad();
  }
  
  private function startXMLLoad():void {
   var req:URLRequest = new URLRequest(searchURL);
   var XMLLoader:URLLoader = new URLLoader();
   XMLLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
   XMLLoader.load(req);
  }
  
  private function onXMLLoadComplete(e:Event):void {
   var imgLoader:URLLoader = URLLoader(e.target);
   var xmlData:XML = XML(imgLoader.data);
   
   var xmlList:XMLList = xmlData.photos.photo;
   for(var i:uint = 0; i < pageValue; i++) {
    var farm:String = xmlList[i].@farm;
    var server:String = xmlList[i].@server;
    var id:String = xmlList[i].@id;
    var secret:String = xmlList[i].@secret;
    var imgURL:String = "http://farm" + farm + ".static.flickr.com/" + server + "/" + id + "_" + secret +".jpg";
    trace("URL:" + imgURL);
    var imgReq:URLRequest = new URLRequest(imgURL);
    var loader:Loader = new Loader();
    
    loader.contentLoaderInfo.addEventListener(Event.INIT, loadImageInit);
    loader.load(imgReq, new LoaderContext(true));
   }
  }
  
  private function loadImageInit(e:Event):void {
   var bitmap:Bitmap = e.target.content;
   addChild(bitmap);
  }
  
  private function onMouseClick(e:MouseEvent):void {
   setChildIndex(getChildAt(0), numChildren - 1);
  }
 }
}

adobe made some noise

BIT-101のコード試してもSamplesCallbackEventがどこにあるのかわからず発狂しかけた。
Astro Dynamic Sound! » BIT-101 Blog
Joa Ebertがフルコードをzipでくれ！てるからそれ参考にした。
Simple Astro synthesizer at blog.je2050.de - Blog of Joa Ebert

最新のsdkをダウンロードしてパスを通す。
Download Flex 3 - Flex SDK - Confluence

flex-config.xmlも書き換えておくこと。
Targeting Flash Player 10 Beta with Flex SDK 3.0.x
osxのスタンドアローンのflash playerはないのかな。
コンパイルしたらとりあえずブラウザにdrag & dropしてる。
SDKの中にruntime/playerフォルダがあって、各OS毎のflash playerインストーラーがある。

そのうち環境構築も含めてまとまった記事を書く。

(11/1)書き直しました。不要なimportをなくして、akihiro kamijo: Flash Player 10 の動的サウンド生成機能 （Sound クラス）を参考にサンプル数を増やした。

さて、イベントハンドラ内では 2048 以上 8192 以下のサンプルデータを書き込みます。パフォーマンス上はできるだけ多くのサンプルデータを （つまり 8192 個） 書くのが有利と考えられます。

package {
 import flash.display.Sprite;
 import flash.media.Sound;
 import flash.events.Event;
 import flash.events.SampleDataEvent;
 
 public class SoundTest extends Sprite{
  private var sound:Sound;
  private var freq:Number = 440;
  private var rate:Number = 44100;
  private var phase:Number = 0;
  
  public function SoundTest() {
   init();
  }
  
  private function init():void {
   sound = new Sound();
   sound.addEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator);
   sound.play();
  }
  
  private function sineWaveGenerator(event:SampleDataEvent):void {
   for(var i:int = 0; i < 8192; i++) {
    phase += freq / rate;
    var phaseAngle:Number = phase * Math.PI * 2;
    var sample:Number = Math.sin(phaseAngle)*0.25;
    event.data.writeFloat(sample);
    event.data.writeFloat(sample);
   }
  }
 }
}

note20070829

eclipse + flex 2(actionscript 3)
Aaron Spjut » Blog Archive » Continuous Integration with Flex 2 (Actionscript 3), FlexUnit, CruiseControl, Apollo and subversion on OS X

build.xmlのfailonerror="true"をなくしたらビルド通った。

eclipse + CDT(C/C++)
HelpからSoftware UpdatesのFind and Install...
Search for new features to ins...をチェックして、Next>
New Remote Site...でNameにCDTとか名前付ける、
URLはhttp://download.eclipse.org/tools/cdt/releases/europa

OpenGL
ProjectのPropertiesでTool settingsのMacOSX C++ LinkerからMiscellaneousを選び、Linker Flagsに
-framework OpenGL -framework GLUT
と追加。
あとはこの辺で遊ぶ。
OpenGL Video Tutorial - Home

OpenALもこんな感じでやってこう。

actionscript

actionscript関係で、仕事のオファーが来て、受けないつもりだけど、リサーチ。ちなみにflashは全然使えません。前から気になってて、古堅さんも「これでもうjava何年も触ってない」ってほど使ってる、MTASCを入れてみた。んだけど、どうやら世間はAction Script 3で、Flex 2っていう開発環境がAdobeから無料で配布されてるのでそっちも。

MTASCインストールするのに、環境変数とか何とか勉強になった。finderから起動するアプリに環境変数を指定するには
~/.MacOSX/environment.plist
てファイルを作って(.MacOSXってフォルダも作って)、XML形式で書くと。
で、僕この方法よく分からず、かつeclipseの起動ができなくなったので、やめました。

とった方法は.bash_profile(ログインした時に実行されるファイル)のPATH=""の中を編集。
/展開した場所/mtasc-1.12-osx
というのを:でつなげて入れる。
一旦ターミナルをログアウトして、再びログイン、

mtasc

と入力して

Motion-Twin ActionScript2 Compiler 1.12 - (c)2004-2005 Motion-Twin
Usage : mtasc.exe [options]
Options :
　ー以下省略ー

と出ればよい。

この辺が勉強になりました。検索ですぐ見つかるけど。
ActionScript 2とFlash OOPのすすめ

Flex 2 SDKはAdobeのメンバーシップに登録して、zipファイルをダウンロード。展開して、適当な場所に置いて、player/debugの中のInstall Flash Player 9 UB.dmgを実行。

MTASCでやったように.bash_profileに
/展開した場所/flex_sdk_2/bin
を追加して、ログアウト。

mxmlc

というコマンドを実行して

Loading configuration file /Users/iamas/dev/flex_sdk_2/frameworks/flex-config.xml
Error: a target file must be specified

Use 'mxmlc -help' for information about using the command line.

と出れば成功。sampleフォルダの中のbuild-samples.shはすげー時間かかった。

ここ見て恒例のhello world!
ActionScript3.0メモ

javaに似てる。

色んな言語の基本的なとこばっか触って喜んでるんだけど、そろそろそういう環境おたくもやめないとなー。結局それで何するか、だ。やっぱり。というか、やりたいことがあって、必要条件として言語の習得があったはずなのに、いつの間にか言語の習得それ自体が楽しくなっちゃって、必ずしも悪いことでもないと思うんだけど、もっとアイディアありきで考えたいなと、最近は思う。
Scriptographerとか、いいバランスかなと。