今月、10月20日に、名古屋のウェブの勉強会、WCAN 2007 Autumnがあるんですが、今回は百式（100SHIKI.COM）の田口さんとWCAN mini ASのメンバーによるセミナーがあります。
田口さんはブログまわりのお話と仕事術的な話をしてくれるそうです。どんな感じになるのかちょっと楽しみです。
一方、WCAN mini ASメンバーの方では、WCAN mini ASの幹事のメンバー（金井くん、小林くん、中村さん、僕）が、ActionScript楽しいっすよって話をする予定です。右のバナーに貼っている体操服を着たアバターを使って、競技を行ったり、他にもこんなおもろいことできますよってことを話す予定です。僕は、どちらかと言えばAS3ちょっとやってみました、さてどうだった？ってことを話すつもりです。ドキドキ。
まだまだ席に余裕がありますので、名古屋でActionScriptが好きな人とか、よかったら遊びにきてください。申し込みはWCANのページの左のカラムの勉強会のお申し込みから行えます。よろしくお願いします。
ちなみに秋の大運動会のバナーの下にある次の人へっていうボタンをクリックすると、運動会に参加する人のアバターがリレーで見れますよ〜。
WCAN mini AS vol.3 お疲れさまでした。
昨日は、WCAN mini AS vol.3 でした。今回は Lightning Talk ということで発表をしたんですが、めっちゃ緊張しました。でもやっぱ、なんかわからないなりにも作って人に見てもらうのは、勉強になるなと思いました。一人でやってると、これおもろいのかなぁと思うこととかあるけど、それをちょっと客観的に見てもらえるし。
WCAN mini AS vol.3 の資料とサンプルは以下です。
スライド資料（1.2MB）
http://appleple.heteml.jp/blog/archives/WcanMiniAs200707.pdf
http://ra66it.net/blog/archives/WcanMiniAs200707.pdf
サンプル（76KB）
http://appleple.heteml.jp/blog/archives/WcanMiniAs200707sample.zip
http://ra66it.net/blog/archives/WcanMiniAs200707sample.zip
※スクリプトであやしい部分があるかもしれません。
昨日は、『ASでデザインする試み』という題目で発表しました。僕は、昨日Gainerを紹介してくれた小林茂さん（ちなみに小林さんの所属するDSPコースは先日銀座のアップルストアでプレゼンをしたそうです。DSPでBANG!のビデオ）の話の中でもでてきました、IAMASという学校に行ってまして、そこでアニメーションとかをやっていたんですが（学生の頃は、こんな作品を作ってました。）、そこで永原先生のデザインの話に影響を強く受けました。
永原先生の『デザイン・ウィズ・コンピュータ』という本の中でプログラミングによるデッサンという話が出てくるんですが、まさに今回の発表はプログラミングでデッサンという話を自分なりに解釈し得てASで実践したものです。
このようなデッサンが実際にどういう効果を上げるのかを知るには、長い時間が必要です。しかし、今始まったばかりのこういった試みが、これまでのデザインとコンピュータの関係に対する先入観を払拭し、環境や素材との出会いを演出することで、コンピュータによる造形について考える契機になることは確かでしょう。それは、造形思想によって私たちと社会とを切り結んできたデザインの新しい方法を模索することでもあるのです。（デザイン・ウィズ・コンピュータ p23より）
サンプルファイルの方で、昨日見せたグラフィックのasファイルとswfを見てもらえばと思うんですが、せっかくなので、その中から線のパターンと塗りのパターンのを１つづつ紹介したいと思います。
その前に、、、。
ASでアルゴリズム的にデザインするということだったんですが、現在デザインにおいてもコンピュータは必要不可欠なわけその恩恵は計り知れないんですが、一方で、WYSIWYG的なツールはアナログでのデザインの手法をソフトウェアに置き換えているにすぎないのではないか。コンピュータならではのデザインというものが、他にもあるのではないかというところが、出発点になります。
デザインの手法としてのアルゴリズム
アルゴリズムとは、問題を解決する定型的な手法・技法、コンピュータなどで、演算手続きを指示する規則などと広辞苑には書かれているんですが、ここでは、表現するためのル−ルと解釈します。
“F”というロゴを作ろうということで、以下のようなルールを決めました。
- Fというロゴを4x6のグリッドで表現する
- 線もしくは塗りであらわす
- ASに記述する定数も4か6を積極的に用いる（具体的な根拠は無いが、、、。）
- 基本形を表現してから、発展系を表現する
線のパターン
まず、PriF01.asという元の形になるasを用意しました。
package {
import flash.display.Sprite;
public class PriF01 extends Sprite
{
private var x0:Number = 0;
private var y0:Number = 0;
private var x1:Number = 200;
private var y1:Number = 0;
private var x2:Number = 200;
private var y2:Number = 100;
private var x3:Number = 100;
private var y3:Number = 100;
private var x4:Number = 100;
private var y4:Number = 200;
private var x5:Number = 200;
private var y5:Number = 200;
private var x6:Number = 200;
private var y6:Number = 300;
private var x7:Number = 100;
private var y7:Number = 300;
private var x8:Number = 100;
private var y8:Number = 400;
private var x9:Number = 0;
private var y9:Number = 400;
private var color:uint = 0xff0000;
private var a:Number;
private var value:Number;
public function PriF01(color:uint=0xff0000, a:Number = 1, value:Number = 0)
{
this.color = color;
this.a = a;
this.value = value;
init();
}
private function init():void
{
x0 = x0+(Math.random()*value-value/2);
y0 = y0+(Math.random()*value-value/2);
graphics.lineStyle(1, color, a);
graphics.moveTo(x0, y0);
graphics.lineTo(x1+(Math.random()*value-value/2), y1+(Math.random()*value-value/2));
graphics.lineTo(x2+(Math.random()*value-value/2), y2+(Math.random()*value-value/2));
graphics.lineTo(x3+(Math.random()*value-value/2), y3+(Math.random()*value-value/2));
graphics.lineTo(x4+(Math.random()*value-value/2), y4+(Math.random()*value-value/2));
graphics.lineTo(x5+(Math.random()*value-value/2), y5+(Math.random()*value-value/2));
graphics.lineTo(x6+(Math.random()*value-value/2), y6+(Math.random()*value-value/2));
graphics.lineTo(x7+(Math.random()*value-value/2), y7+(Math.random()*value-value/2));
graphics.lineTo(x8+(Math.random()*value-value/2), y8+(Math.random()*value-value/2));
graphics.lineTo(x9+(Math.random()*value-value/2), y9+(Math.random()*value-value/2));
graphics.lineTo(x0, y0);
}
}
}
それを例えば、F01.asの場合だと以下のソースのような感じで、PriF01をnewするときに引数として定数をいれてやると、描画するときにランダムで値を散らします。
package {
import flash.display.Sprite;
public class F01 extends Sprite
{
private var count:int = 4*6;
private var targetX:Number = 100;
private var targetY:Number = 100;
public function F01()
{
init();
}
private function init():void
{
for (var i:int = 0; i < count; i++)
{
var f:PriF01 = new PriF01(0x000000,1,4*6);
f.x = targetX;
f.y = targetY;
addChild(f);
}
}
}
}
F01
動いてないとよくわからないとの意見もあったので、別のパラメータのパターンで動かしたものも用意してみました。クリックすると描画を開始して、離すと描画を停止します。
このソースは以下になります。PriF01をnewするときに引数で持たすランダムの値をfor文のiに応じて変化させることなどがこのサンプルのポイントかなと思います。
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
public class F01_3 extends Sprite
{
private var count:int = 4*6*6;
private var targetX:Number = 100;
private var targetY:Number = 100;
private var value:Number = 1;
private var i:int=0;
public function F01_3()
{
init();
}
private function init():void
{
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onMouseDown(event:Event):void
{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onMouseUp(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
if (i < count)
{
value = 0.003*(count-i);
var f:PriF01 = new PriF01(0x000000,value,4*i);
f.x = targetX;
f.y = targetY;
addChild(f);
i+=1;
}
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
}
}
塗りのパターン
まずPriF21.asというFを描くための各ブロックに配置されるオブジェクトを用意しました。
package
{
import flash.display.Sprite;
public class PriF21 extends Sprite {
public var radius:Number;
private var color:uint;
public function PriF21(radius:int = 50, color:uint = 0x000000) {
this.radius = radius;
this.color = color;
init();
}
public function init():void {
graphics.beginFill(color);
graphics.drawCircle(50, 50, radius);
graphics.endFill();
}
}
}
このPriF21というオブジェクトを並べる時に定数を乗算したランダムで散らして描画します。
package {
import flash.display.Sprite;
public class F21_1 extends Sprite
{
private var count:int = 6;
private var count2:int = 6*4;
private var xarray:Array = [100,200,100,100,200,100];
private var yarray:Array = [100,100,200,300,300,400];
private var value0:int = 50;
private var value1:int = 0;
private var value2:int = 0;
private var value3:Number = 1;
public function F21_1()
{
init();
}
private function init():void
{
for (var i:int = 0; i < count; i++)
{
for (var j:int = 0; j< count2; j++){
value0 = Math.floor(Math.random()*50);
value1 = Math.floor(Math.random()*6*4-6*4/2);
value2 = Math.floor(Math.random()*6*4-6*4/2);
value3 = Math.random();
var f:PriF21 = new PriF21(value0, 0x000000);
f.x = xarray[i]+value1;
f.y = yarray[i]+value2;
f.alpha = value3;
addChild(f);
}
}
}
}
}
こんなかんじになります。
F21_1
これも同様に別のパラメータで動かしたものも作ってみました。クリックすると描画を開始します。
ソースは以下になります。
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
public class F21_4 extends Sprite
{
private var count:int = 6;
private var count2:int = 6*4*4;
private var xarray:Array = [100,200,100,100,200,100];
private var yarray:Array = [100,100,200,300,300,400];
private var value0:int = 50;
private var value1:int = 0;
private var value2:int = 0;
private var value3:Number = 1;
private var i:int = 0;
private var j:int = 0;
public function F21_4()
{
init();
}
private function init():void
{
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onMouseDown(event:Event):void
{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onMouseUp(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
if(i < count){
if(j< count2){
value0 = Math.floor(Math.random()*j);
value1 = Math.floor(Math.random()*j-j/2);
value2 = Math.floor(Math.random()*j-j/2);
value3 = 0.003*(count2-j);
var f:PriF21 = new PriF21(value0, 0x000000);
f.x = xarray[i]+value1;
f.y = yarray[i]+value2;
f.alpha = value3;
addChild(f);
j+=1;
} else {
i+= 1;
j=0;
}
}
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
}
}
感想
- 表現的には面白いグラフィックも作れた
- ASではやっぱり重い（環境が古い？）
- 動いてないとおもしろくない？
- ランダムの多用は危険→なにか別の素材から数値を持ち込みたい
本当は4x6で24個のサンプルのパターンを作りたかっただんけど、出来なかった、、、。勉強会で発表するのは、うまくいけば、発表に向けて知識が盛り上がっていくので、勉強になりますね。ASでお絵描きは楽しいので、今後も続けていきたい。
---追記（2008.01.12）---
資料のリンクを修正しました。
昨日のASミーティングで、次回のWCAN mini ActionScript vol.2のお題は『ActionScript3.0やってますか？(仮)』になりました。今回は全員発表という形式ではなく、MAX５名ぐらいで発表してもらう形式にしようかという話になりました。まだ予定ですが、、、。詳しくは WCAN mini ActionScript vol.2 (Unknown Quality) を見て下さい。名古屋でAS3.0やってる方いませんか？いや僕もまだ手をつけれてないんですが、、、。パブリックアルファをちょろっと触っただけで。
1 - 3 / 3
