Beauty Salon α-BET (alphabet)

space001
Blender3d Collada dae modeling Use Papervision3d on Progression3 and 4 http://a-bet.secret.jp/#/access
more whaison works.
whaison space
space002
http://whaison.jugem.jp/ https://jp.pinterest.com/whaison/ https://www.instagram.com/whaison/ https://whaison.amebaownd.com/
https://suzuri.jp/whaison
http://whaison.blogspot.com/
http://whaison.tumblr.com/ http://qiita.com/users/whaison http://www.behance.net/whaison https://github.com/whaison/ https://bitbucket.org/whaison http://serato.com/user/whaison http://whaison.hatenablog.jp/

typo memo
http://d.hatena.ne.jp/whaison/


dayNote
http://www.myspace.com/whaison http://ameblo.jp/whaison/ http://blog.crooz.jp/whaison/ http://blog.crooz.jp/whaisoncafe/ http://nenpyo.org/whaison

fulldisk
http://full.shin-gen.jp/
http://whaison.client.jp/
http://www.dclog.jp/whaison/
featured forums.
space004
forum.unity3d.com/

forums.unrealengine.com.

Progression Forum.

FlashDevelop Forum.

Papervision3D Forum.

FlexUserGroup Forum.

SparkProjectForum.





Twitter







Mobile
qrcode
Calendar
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
293031    
<< December 2019 >>
New Entries
Archives
Categories
Recent comment
  • FlashDevelopでフォント埋め込み
    感謝!! (12/24)
  • cocos2d-x-3.0rc0 ,c++ ,cpp でTexturePacker で 吐き出した、plist と png でパラパラアニメーションのコード例
    whaison (04/17)
  • Blender2.67にbvh(web上に2500個以上ころがってる)入れてそのBoneオブジェクトをUnity4.0のmecanimで使う
    whaison (08/19)
  • Apple Dev Center 「Certificates, Identifiers & Profiles」で Adhoc をつくってXCode4.6.1でArchiveしてipaを書き出し
    whaison (04/30)
  • Flash CS6でプロパティーパネルで物理演算のジャンプの高さを設定できるCitrus Engine
    whaison (03/01)
  • 「Flash以外、例えばKinectとか」ON TOKYO (会場:高田馬場4-11-8 Floor 6階 ) 短縮URL http://bit.ly/dI0Bfx
    uka (03/02)
  • App Store Review Guidelines アップル社のアプリ審査基準ガイドライン和訳 Apple が 開発者を悩ませ ユーザーをハッピーにしたいガイドライン。w
    whaison (01/25)
  • Unity3d では ADOBE JAPAN OSAKIで行われたFITC 2010 TOKYOでは、 「iOS用にパブリッシュするためには、フリー版ではなくて、有料版を買ってください。さらに追加のパッケージである、"iOS Package (for Development)"を買ってください」とのことだった。
    whaison (01/25)
  • enjoy Adidas-Futsal-Park
    whaison (01/16)
  • MacBookAir にFlashPlayer入れたらなった。Mac Flash Player 10.1/10.2でUstream などでカメラが認識されないバグそんなときはUstreamProducer!でもなくiPhoneだと直ぐにライブ配信できた
    whaison (01/14)
simple sintax high lighter2.0
space003
SyntaxHighlighter2.0用 の貼り付けコード作成する!
ブログパーツ-BLOG PARTS.
Profile
Links
Recommend
Admin
無料ブログ作成サービス JUGEM
Seach this site
            
2009.10.23 Friday
Frocessingは,そのProcessingのような描画APIをActionScript3で利用できるようにしたライブラリです。Processingのように手早くプログラミングできることを目的としています。

FrocessingではじめるActionScriptドローイング

第1回 はじめてのFrocessing

Wonderflを利用する

Wonderflとは

最後にWonderflの利用を紹介します。Wonderflはブラウザ上でActionScriptをコンパイルしFlashを制作することができるWebサービスです。面白法人KAYACが無料で提供しています。本連載で利用するFrocessingもサポートされています。

Wonderflの概要や利用方法については「ブラウザだけでできる!wonderflではじめるFlash制作」をご覧ください。

Wonderflでサンプルコードを実行する

実際にWonderfl上で動作するFlashを見てみましょう。再生ボタンをクリックするとFlashが開始させます。

図9 FrocessingSample - wonderfl build flash online

タイトル「FrocessingSample - wonderfl build flash online」のリンクからWonderflを表示すればFlashとプログラムを合わせて見ることができます(プログラムは今回のサンプルと同じものです)。

Wonderflでforkする

Wonderflの特長としてforkと呼ばれる機能があります。投稿されたプログラムを元に新しくプログラムを作成する別名保存のような機能です。試しにサンプルコードをforkして,線に色を付けたFlashを制作してみました。

図10 forked from: FrocessingSample - wonderfl build flash online

グラフィック描画のプログラムはパラメータを変化させることでいろいろな表情の結果が現れることもたのしさの一つですので,forkを積極的に活用してはいかがでしょうか。

まとめ

初回はFrocessingの概要とプログラム環境について説明しました。グラフィック描画のプログラミングを楽しむには手軽に試せることが大切ですので,自分にあった制作環境を選んでください。次回からはFrocessingの描画APIの説明をはじめたいと思います。

なお,本連載で掲載するサンプルはWonderflで公開していく予定です。まだWonderflのIDをお持ちでない方はこの機会に登録してみてはいかがでしょうか。


 

Frocessingとは

"Frocessingとは何か?"その説明をする前に「Processing」について簡単に紹介したいと思います。Processingとはグラフィック制作向けのプログラムを行う開発環境(ソフトウェア)です。独自の描画APIとシンプルな開発ツールによって,手軽に,直感的にプログラミングできるよう工夫されています。

Frocessingは,そのProcessingのような描画APIをActionScript3で利用できるようにしたライブラリです。Processingのように手早くプログラミングできることを目的としています。

Graphicsとの違い

次のプログラム(リスト3)はリスト1のプログラムをFrocessingを利用して記述したものです。

リスト3 矩形描画のプログラム

stroke( 255, 0, 0 );
fill( 255 );
rect( 50, 50, 200, 100 );

同じ処理が手早く書けることが分かっていただけると思います。これだけを見ると大きな違いはないように思えますが,いろいろな描画プログラムを試す場合など,小さな違いの積み重ねがプログラミングのスピードや快適さに与える影響は少なくないと思います。

Frocessingの準備

プログラミングをはじめる前に,プログラム環境とFrocessingライブラリを準備します。後述するWonderflを利用する場合,この準備は必要ありません。ローカル環境で制作する際の参考にしてください。

プログラム環境の準備

この連載ではActionScript3のプログラミングを行います。ActionScript3で書かれたプログラムをコンパイルするには,Flash CS3以降か,FlexSDKを用いるとよいでしょう。FlexSDKは無料で利用できる開発環境ですので,ActionScriptによるプログラムを試したい方にお勧めです。FlexSDKのセットアップ,使用方法,ActionScriptの基本については「プログラマのためのFlash遊び方」をご覧ください。

Frocessingのダウンロード

Frocessingライブラリは,日本最大のFlash・ActionScriptのオープンソースコミュニティである「Spark Project」で公開されています。

Spark Projectとは

Spark Project では,最近話題の「FLARToolKit」をはじめ,描画系,音系,デバイス系など多様なライブラリが公開されています。プロジェクト一覧をご覧いただければ興味の湧くライブラリがみつかることでしょう。

Frocessingのプロジェクトページ図3)を開くと「Source Code」のブロックにライブラリのデータについて情報が記載されています。最新のソースファイルはSVNリポジトリから閲覧・ダウンロードが可能ですが,今回はZIP形式のデータをダウンロードして使用します。現在の最新版である「frocessing-0.5.7.zip」をダウンロードしてください。

図3 Frocessingのプロジェクトページ

図3 Frocessingのプロジェクトページ

ライブラリの設置

ダウンロードしたZIPを解凍すると「frocessing」というディレクトリが含まれています。このディレクトリがライブラリの本体です。既にライブラリを置く場所が決まっている場合は「frocessing」ディレクトリを所定の場所へコピーすれば利用が可能となります。今回は説明のために「C:¥test¥」にコピーしたものとします。

Frocessingのサンプルコード

まずは,以下のFlashをご覧ください。

図4 Frocessingのサンプル

これはFrocessingを利用してプログラミングされた簡単なグラフィック描画のサンプルです。時間経過とともにランダムな曲線が描画され,マウスクリックで描画内容がクリアされます。このプログラムのソースは以下のようになります。

リスト4 FrocessingSample.as(ソースのダウンロード

package {
  import frocessing.display.*;
  [SWF(width="465", height="465", frameRate="60")]
  public class FrocessingSample extends F5MovieClip2DBmp{
    private var stage_width:Number  = 465;
    private var stage_height:Number = 465;
    private var n:int = 5;
    private var t:Number = 0;
    
    public function FrocessingSample() {
      super();
    }
    
    public function setup():void {
      size( stage_width, stage_height );
      background( 0 );
      noFill();
      stroke( 255, 0.1 );
    }
    
    public function draw():void {
      if ( isMousePressed )
        background( 0, 1 );
      
      translate( 0, stage_height / 2 );
      beginShape();
      curveVertex( -100, 0 );
      for ( var i:int=0; i <= n; i++ ){
        var xx:Number = i * stage_width / n;
        var yy:Number = noise( i * 0.25, t ) * 300 - 150;
        curveVertex( xx, yy );
      }
      curveVertex( stage_width+100, 0 );
      endShape();
      t+=0.01;
    }
  }
}

このプログラムを書き写すか,ファイルを保存して,先ほどのライブラリと同じディレクトリに置いてください。

次にサンプルコードをコンパイルして動作させるためのいくつかの方法をご紹介します。

| whaison | Progression | 17:59 | comments(0) | - | pookmark |
Comment




whaisonStudyNoteBook をFaceBookで いいね!





Share |