ASスケッチ—フォントの座標を元にしたグラフィックの作成とアニメーションへの展開（前編）の続きです。
Typo07を描いているときに、思ったのが、文字って書き順にかなり形を作られてるんじゃないか？そもそもひらがなができた経緯を考えたら、当たり前と言えば当たり前だが、そんな事を描いてて思いました。身体と繋がっていると言ってもいいかもしれない。しかしながら文字の座標を配列に突っ込む順は、書き順ではなく単純に左上から縦に順番に右下まで座標を調べて、配列に入れている。つまり文字の書き順ではない。
Typo10
サンプル：Typo10
ソース：Typo10.zip
（MotionLine5.as,Typo10.as）
上記のサンプルは配列の順番に座標を渡しているが、それをとびとびで値を渡したらどうなるのか？
private function setMaterial(event:Event):void {
var X0:Number;
var Y0:Number;
var X1:Number;
var Y1:Number;
var X2:Number;
var Y2:Number;
_r += 1;
if(_r>=_typoAryX.length){
_r = 0;
this.removeEventListener(Event.ENTER_FRAME,setMaterial);
}
X1 = this._typoAryX[_r];
Y1 = this._typoAryY[_r];
X0 = (X1-this._preX0)/2 + this._preX0;
Y0 = (Y1-this._preY0)/2 + this._preY0;
this._preX0 = X1;
this._preY0 = Y1;
//↓ここの値をいじくる1,2,3,4,...,99,100
_r += 1;
var X3:Number = this._typoAryX[_r];
var Y3:Number = this._typoAryY[_r];
X2 = (X3-this._preX0)/2 + this._preX0;
Y2 = (Y3-this._preY0)/2 + this._preY0;
this._preX0 = X3;
this._preY0 = Y3;
trace("_r:"+_r);
trace("Math.abs(X0-X2):"+Math.abs(X0-X1));
if(_r<_typoAryX.length){
var mLine:MotionLine5 = new MotionLine5(1, 0xffffff, X3, Y3, X2, Y2, X1, Y1, this._container);
trace(this._container.numChildren);
}
}
上記の↓ここと書かれた部分の値を変えたものをパブリッシュして、一枚一枚スクリーンショットでキャプチャしてみた。（発表のときに一番突っ込まれた…。力技すぎる。）
http://ra66it.net/lab/choi200802/TypoAnimation10/
上記のリンク先を見ていただきたいんですが、形がだんだん崩れていく様子が分かります。Typo10_+6とかTypo10_+9とかTypo10_+19とか結構いい感じにきてます。
で、まあ、静止画で見てもよくわからないというか、一個一個じっくり見る分には面白いんですが、どんな変化をしているかを直感的にみるにはそれらをアニメーションさせた方がいいと思ったので、順番に並べてアニメーションさせてみました。
Typo11
サンプル：Typo11
ソース：Typo11.zip
（MotionLine5.as,Typo11.as）
Typo10と同様の事を別のパラメーターの渡し方で作ってみた。
private function setMaterial(event:Event):void {
var X0:Number;
var Y0:Number;
var X1:Number;
var Y1:Number;
var X2:Number;
var Y2:Number;
X0 = this._typoAryX[_r] + Math.random()*20-10;
Y0 = this._typoAryY[_r] + Math.random()*20-10;
X1 = this._typoAryX[_r+1] + Math.random()*20-10;
Y1 = this._typoAryY[_r+1] + Math.random()*20-10;
X2 = (X1 + this._typoAryX[_r+2])/2 + Math.random()*20-10;
Y2 = (Y1 + this._typoAryY[_r+2])/2 + Math.random()*20-10;
//↓ここの値をいじくる1,2,3,4,...,99,100
_r += 1;
if(_r+2>=_typoAryX.length){
_r = 0;
this.removeEventListener(Event.ENTER_FRAME,setMaterial);
}
var mLine:MotionLine5 = new MotionLine5(1, 0xffffff, X0, Y0, X1, Y1, X2, Y2, this._container);
trace(this._container.numChildren);
}
Typo10と同様にパラメータをいじる。一枚一枚書きだしてみたものは以下。
http://ra66it.net/lab/choi200802/TypoAnimation11/
こっちなんかは本当に手描きでアニメーションさせているかのような、手でアニメーション描いていた線がでているような気がした。で動かしてみました。
まとめ
今回はテキストの座標の情報でトライしてみたが、他の情報で同じ事をしたらどんな表現になるのか、少し考えてみたいと思った。結構、ソースみるとランダムとか多用していたり、直感で描くといいつつ、やっぱりどこかでイメージしているものを作ってる自分もいたりというのがあったので、これはちょい絶で見せていたときに出た意見だが、まったく外部からなにかのパラメータを渡すのもいいのでは？（インタラクション←→リアクション）
さて次は何を作ろう。
今日は、ちょい絶vol.2でした。
プログラム（僕の場合はActionScriptですが）でデザインを行うための考察。鉛筆で紙に絵を描くように、ASで絵が描けるようになるための筋トレ。ASデッサンにしようかASスケッチにしようか悩んだんですが、僕自身、わりと紙にあたりをつけるように直感的にソースを書きたいと思ったので、とりあえずASスケッチということにしてみました。
今回の出発点：
大阪てら子に行ったときにさくーしゃさんがテキストフィールドをビットマップに貼付けるサンプルを紹介してくれたので、（[Saq.] 第11回 大阪てら子でつくったやつ を参照。あざっす。）それを元にフォントの座標の情報を使って何か表現できないかと思い、手を動かす。
制作にあたり決めたルール：
- 基本的な部分は共通で利用する
- パーツのバリエーションやさまざまなパラメーターで置き換えで形を作る
- 直感でコードを書く（無謀な…）
- トライ＆エラーを繰り返しいいなと思う形を探す
ちなみに今回のサンプルはTweenerクラスを利用しているので、tweener - Google Code あたりから適当に落としておいてください。
Type01
サンプル：Typo01
ソース：Typo01.zip
（MotionBall.as,Typo01.as）
上記のリンク先からソースを落とせます。以下部分的に説明したいと思います。まず以下のようにTextFieldをBitmapDataにdrawする。
public function Typo01 (){
this._canvas = new BitmapData(500, 500, false, 0x000000);
this.addChild(new Bitmap(this._canvas)) as Bitmap;
this._container = new Sprite();
this.addChild(this._container);
var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat('Helvetica', 80, 0xffffff, true);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.text = 'YES';
this._Typo = new BitmapData(500, 500, false, 0x000000);
this._Typo.draw(tf, new Matrix(3, 0, 0, 3, 0, 150));
//this.addChild(new Bitmap(this._Typo));
setTypoAry();
}
次にさっき作ったものをもとに以下のようにgetPixelで色を抜き出し、0xffffffで割り算した値が1か0かで白黒を判断する。白だったら、その座標を配列に入れる。（あっ、なんかいらんことしてる気がする…。）
private function setTypoAry():void {
var q:int = 5;
var n:int = this._canvas.width/q;
var m:int = this._canvas.height/q;
var d:Number;
_typoAryX = new Array();
_typoAryY = new Array();
while (n--) {
while (m--) {
d = 1 - (this._Typo.getPixel(n*q, m*q) / 0xffffff);
if(d!=1){
_typoAryX.push(n*q);
_typoAryY.push(m*q);
}
}
m = this._canvas.height/q;
}
this.addEventListener(Event.ENTER_FRAME,setMaterial);
}
そしたらあとはパーツとなるクラスにどういった値を渡すかの計算をするだけ。Typo01だと以下のような感じ。
private function setMaterial(event:Event):void {
var X:Number;
var Y:Number;
var r:int = Math.floor(Math.random()*_typoAryX.length);
X = _typoAryX[r];
Y = _typoAryY[r];
var mBall:MotionBall = new MotionBall(10, 0xffffff, X, Y, this._container);
trace(this._container.numChildren);
}
Type02
サンプル：Typo02
ソース：Typo02.zip
（MotionLine.as,Typo02.as）
このサンプルは、ランダムに選んだ点とそこから30個以内の点、２点をMotionLineクラスに値を渡しています。線を描くときはターゲットになるspriteを作って、そいつをTweenerで移動させて、その点をアンカーにしてやる。
Type03
サンプル：Typo03
ソース：Typo03.zip
（MotionCross.as,Typo03.as）
これはTypo01と同じように、ランダムで選んだ値を十字を描くクラスに座標を渡しているだけ。
Type04
サンプル：Typo04
ソース：Typo04.zip
（MotionLine2.as,Typo04.as）
はじめの点を決めて、50以内の点、またそこから50以内の点をきめて、MotionLineクラスに値をわたしている。線はcurveToで曲線を描画。
Type05
サンプル：Typo05
ソース：Typo05.zip
（MotionLine3.as,Typo05.as）
バラバラの線ではなく、一筆書きで線を描画。
Type06
サンプル：Typo06
ソース：Typo06.zip
（MotionText.as,Typo06.as）
パーツの部分のクラスでもベースの部分でやっているようなテキストフィールドをビットマップ処理する方法で、１文字描いている。これはもう少し動きをつけるとおもしろいかもしれないです。テキストは１文字でも描くだけで意味が表情としてでやすいかもしれないと思った。
Type07
サンプル：Typo07
ソース：Typo07.zip
（MotionLine4.as,Typo07.as）
ここまでやってみて、ベジェ曲線での表現がおもしろそうだったので、ベジェ曲線をもう少し掘り下げてみた。今まで点をランダムに選んで座標として値を渡していたが、順番に渡してみてはどうか。curveToのアンカーの部分は固定して、コントロールの部分を少し散らして渡してみた。少し植物のツタのような表現になりました。
Type08
サンプル：Typo08
ソース：Typo08.zip
（MotionLine5.as,Typo08.as）
今度は散らす値をもう少し極端にやってみた。スパークYES！
Type09
サンプル：Typo09
ソース：Typo09.zip
（MotionLine5.as,Typo09.as）
一方で、ここまで、直感的にコードを書くと言いつつも、ある程度イメージを予測して描いていた部分もあったのかなぁと思った。試しにXとYを置き換えた値を渡してみたら、こんな表現になった。これはこれでYESの座標は持っているんだけど、YESにはみえないという意味で、おもしろいかもと思った。
Y1 = (X2-X0)/2 + X0 + Math.random()*100 - 50; X1 = (Y2-Y0)/2 + Y0 + Math.random()*100 - 50;
ソース的には、↑ここ。
後半へ続く…。ASスケッチ—フォントの座標を元にしたグラフィックの作成とアニメーションへの展開（後編）
1 - 2 / 2
