Processing答撩呵庐掐嚏の试礁

簇息¨[[泣塑胳っぽいプログラミング咐胳そら痞スクリプト>SoraMame.ps.js]]　[[HTML5+JavaScript]]

これは、ビジュアルデザイン脱プログラミング咐胳Processing(プロセッシング∷の词帽な掐嚏淡祸です。

塑淡祸の滦据粕荚は、答塑弄にまるでプログラミング挛赋のない客。でもまあ、できればパソコンを办奶り拎侯できる镍刨がいいかも(メ〖ルとか、ワ〖プロとか∷。

とはいえ、豺棱今办糊尸の攫鼠翁はないので、Webデザインとか警しでも梦っているほうが、艰り寥みやすいかも梦れません。极尸でいろいろ拇べたり玫垫するのが攻きなほうが紊いでしょう。

''[[↑なんと、泣塑胳っぽいコ〖ドをProcessingのスケッチに恃垂する≈そら痞スクリプト∽判眷—>SoraMame.ps.js]]''

''[[↑Javascript惹であるProcessing.jsは、コチラ—>Processing.js答撩呵庐掐嚏]]''

#htmlinsert(processing.html)

#contents

&ref(boid_102.png);

∝Processing∈プロセッシング∷は、Casey Reas と Benjamin Fry によるオ〖プンソ〖スプロジェクトであり、かつてはMITメディアラボで倡券されていた。排灰ア〖トとビジュアルデザインのためのプログラミング咐胳であり、琵圭倡券茨董 (IDE) である。 浑承弄なフィ〖ドバックが篓郝に评られるため、介看荚がプログラミングを池浆するのに努しており、排灰スケッチブックの答茸としても网脱できる。Javaを帽姐步し、グラフィック怠墙に泼步した咐胳といえる。≠　- [[Wikipedia Processing:http://ja.wikipedia.org/wiki/Processing]]

Processingバ〖ジョン1.5(17 April 2011)をベ〖スに淡揭しています。

*とにかく幌める。 [#nd0c90d6]

Processingは、Windows笆嘲にもMac惹やLinux惹がありますが、Windows惹を瞥掐してみました。

**掐缄から弹瓢まで [#b22f1159]

+ダウンロ〖ド http://www.processing.org/
--Download Processingを联ぶ
--WindowsかWindows(without Java)を联ぶ。
+豺培する
--Windowsの眷圭、豺培したフォルダは≈C:∽木布においたほうがいい。
--呵介は士丹だけど、ライブラリをインポ〖トしたとき、エラ〖になる
+≈Processing.exe∽アイコンをダブルクリック

これで、Processingが弹瓢します。

&ref(IDE.png);

讳の眷圭、Javaを瞥掐貉みなので(without Java)惹でOKかと蛔ったら、うまく瓢かず。Java烧き惹に磊り仑えました。

姜位は、まあ舍奶にウィンドウを誓じるか、≈File∽-≈Quit∽を联买

Processingには、プログラムを淡揭したり悸乖するためのツ〖ルが烧掳しているので、これ笆嘲に脱罢するものは泼にありません。喇蔡を给倡するためのWebサイトとか、あれば烫球いかも。

**とりあえず敞を闪く [#o3b9d8fc]

肌のように掐蜗して、ツ〖ルバ〖の≈Run∽ボタンをクリック。

line(0,0,200,200);

これで、焊惧から宝布に木俐(Line)が闪きます。カッコ柒は、∈x1, y1, x2, y2∷を界に回年してします。≈x1, y1∽が俐の办数の眉の郝筛。≈x2, y2∽が、もう办数の眉の郝筛です。

&ref(line.png);

肌はこれ。

size(250, 250);
 ellipse(120,120,80,80);

闪茶ウィンドウのサイズ(Size)を恃构して、その边(ellipse:率边)を闪きます。

&ref(ellipse.png);

Sizeのカッコ柒は、玻升(width)と侥升(height)の界に回年します。ellipseのカッコの面は、肌の界に回年します。

ellipse(x, y, width, height);

-x=面看の玻の疤弥
-y=面看の侥の疤弥
-width=率边の玻升
-height=率边の侥升

ちなみにProcessingでは、乖琐に涩ず≈;∽を掐蜗します。コ〖ドが2乖笆惧あると惧から界戎に悸乖していきます。

プログラムができたら、ツ〖ルバ〖の≈Save∽ボタンでファイルに瘦赂します。このあたりは、ワ〖プロとかとおなじですね。

ま、ここまでは票じ敞を闪くだけなので、プログラムとしてはさほど烫球くありませんが。

**いよいよアニメ〖ション [#p434843f]

海刨は、マウスの瓢きに圭わせて、闪く敞を恃えてみましょう。マウスの疤弥を拇べて、それに圭わせて率边を闪きます。

&ref(mouse_move.png);

サンプル [[sketch_anime_ellipse:http://www.catch.jp/program/processing/sketch_anime_ellipse/]]

笆布のコ〖ドを掐蜗してみてください。

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

プログラムは络きく企つの婶尸に尸かれていて、涟染が≈void setup()∽、稿染が≈void draw()∽となっています。プログラムの塑挛は、≈{∽と≈}∽の粗に今きます。この眷圭は、≈}∽の稿ろに≈;∽をつけません。

涟染の≈void setup()∽が、アニメ〖ションの介袋肋年です。setup() 笆布の{...}の面咳は、弹瓢箕に１搀だけ悸乖されます。海搀は、闪く挝拌のサイズとフレ〖ムレ〖ト(frameRate:1擅粗に部コマ闪くか)を回年しています。

稿染の≈void draw()∽は、アニメ〖ションの帆り手し肋年です。draw()笆布の{...}の面咳が、フレ〖ムレ〖トごとに部刨も悸乖されます。海搀は、秦肥咖(background)を回年し、それから率边(ellipse)を闪いています。率边の面看疤弥は、玻升(width)の染尸と侥升(height)の染尸。つまり、闪茶エリアのちょうど面丙。率边のサイズは、マウスのX-Y郝筛を傅にしています(缄を却いていますが)。

**喇蔡を给倡する [#q698a7c8]

黎ほど棱汤したようにProcessingには、プログラムを淡揭したり悸乖するための怠墙がついています。ツ〖ルバ〖には、肌のボタンがあります。

侯喇したプログラムは、サンプル [[sketch_anime_ellipse:http://www.catch.jp/program/processing/sketch_anime_ellipse/]]のようにWebサイトに非很材墙です。これは、Javaアプレットという祷窖を蝗っています。

Javaアプレットに恃垂するには、ツ〖ルバ〖の≈Export Applet∽ボタンをクリックします。これで、涩妥なファイル办及が侯喇されます。侯喇されたファイルは、≈マイドキュメント∽->≈Processing∽->≈(プログラム叹)∽->≈Applet∽にあるはずです。これをWebサ〖バに芹弥すれば、サンプルのように戮の客も喇蔡を斧ることができます。

また、Javaアプレットではなく、帽迫のアプリケ〖ションのようにして芹邵することも材墙です。これには、≈File∽->≈Export Application∽を联买します。

**Priocessingの炭吾を拇べる [#z4a47202]

Processingは、lineやellipseなどの炭吾(コマンド)を寥み圭わせて闪いていきます。

称炭吾の蝗い数を拇べるには、Processingの≈Help∽->≈Reference∽を斧るか、Processing给及サイトの[[Reference:http://processing.org/reference/]]ペ〖ジをみます。たとえば、[[line:http://processing.org/reference/line_.html]]や[[elipse:http://processing.org/reference/ellipse_.html]]などのペ〖ジがあります。

毖胳で今いてあるので粕みにくいですが、妨及が办年なので、その妨及を拇べたりサンプルコ〖ドを活したりすれば浇尸蝗えると蛔います。

警し攫鼠が概いかも梦れませんが、泣塑胳惹リファレンスもあります。

-[[Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/index.html]]泣塑胳惹リファレンス

*郝筛の回年数恕 [#m8c6a497]

Processingのようにプログラムで敞を闪くには、２つのポイントを妄豺が稍材风です。ひとつは、敞の滦据となる敞の恶やキャンバスなどの燎亨(マテリアル)がどのようになっているのか。もうひとつは、このような敞を闪くための燎亨(マテリアル)を、どのようにプログラムから拎侯するのか。ここでは、敞を闪くための燎亨(マテリアル)について词帽に棱汤します。

さて、Processingで敞を闪くとき、その疤弥を2つの猛からなる郝筛で回绩します。たとえば、木俐を闪くには尉眉の爬を回年します。

&ref(dimension.png);

面池够あたりの眶池に判眷するグラフは、X即とY即の木蛤郝筛惧に闪いていました(承えていますか?)。
玻即をX即、侥即をY即と钙び、この企つの即が木逞に蛤わっています。
X即とY即の木蛤するところ(0,0)は、付爬と钙ばれました。
木蛤郝筛惧の、とある爬の郝筛は、付爬からX即惧の疤弥aと、付爬からY即惧の疤弥bの、企つの猛(a,b)で回年します。

Processingの郝筛も、これとほぼ票じです。ただ、X即が宝に乖くほど猛が络きくなるのに滦して、Y即は布にいくほど猛が络きくなるところだけ般っています。闪茶エリア(CANVAS:キャンバスと钙びます)の焊惧の逞が付爬(0,0)になっています。

たとえば、木俐を闪く眷圭、1つ誊の眉が郝筛(0,0)、もう办つの眉が郝筛(200,200)というように回年します。この2爬粗に俐を苞くには、≈line(0,0,200,200);∽と淡揭します。

闪茶エリアのサイズは、Size炭吾で、玻升(width)と侥升(height)の界に肋年します。

size(250, 250);

そうすると、附哼の闪茶エリアの络きさは、≈width∽と≈height∽で艰り叫せます。
肌のように淡揭すると、闪茶エリアの滦逞俐を2塑闪きます。

line(0,0,width,height);
 line(width,0,0,height);

&ref(line2.png);

*アニメ〖ションとマウス拎侯 [#ha6b873b]

盖年された敞ばかり闪いていてもつまらないので、また瓢かしてみることにしましょう。もう办刨、アニメ〖ションsketch_anime_ellipseのプログラムコ〖ドを斧てください。

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

**脚ね派りとコメント矢 [#cf8c0225]

setup() 笆布の{...}の面が弹瓢箕に办搀だけ悸乖されて、draw()笆布の{...}の面咳が、フレ〖ムレ〖トごとに部刨も悸乖されるのでした。

ここで、draw()笆布に≈background(0);∽がありますよね、backgroundは、ウィンドウを派りつぶすための炭吾です。(0)を回年しているので、辊咖で派りつぶして、それから≈ellipse()∽で率边を闪いています。そのため≈background(0);∽で派りつぶすときに、涟に闪いた率边も派りつぶされて久えてしまいます。

ここで、肌のように≈background(0);∽の乖片に≈//∽を纳裁してみてください。すると、涟に闪いた率边はぬりぶつされず、率边がどんどん脚ね派りされていきます。

&ref(mouse_move2.png);

サンプル [[sketch_anime_ellipse2:http://www.catch.jp/program/processing/sketch_anime_ellipse2/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   //background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

≈//∽は、コメント矢を山す淡规です。この淡规の宝娄から乖琐までに今かれた柒推は、プログラムとしては痰浑されます。プログラムの棱汤矢を淡揭したり、プログラムの泼年婶尸をプログラムから嘲す(でも、あとで提せるようにしておく)ために蝗われます。海搀は、≈background(0);∽の涟に≈//∽を今いたので、≈background(0);∽がプログラムとして痰浑されて、辊咖での派りつぶしがされなくなりました。その冯蔡、率边が肌」の脚ね派りされているのです。

**マウスの疤弥に闪く [#m095f625]

鲁いて、率边を闪く婶尸を肌のように恃构してみましょう。

恃构涟

ellipse(width/2, height/2, mouseX, mouseY);

恃构稿

ellipse(mouseX, mouseY, 10, 10);

恃构涟は、率边の面看をウィンドウの面看に盖年して、率边のサイズをマウスの疤弥によって恃えていました。
恃构稿は、率边の面看をマウスの疤弥によって恃えて、率边のサイズを≈10,10∽に盖年しています。
こうすると、マウスの瓢きに圭わせて、サイズ≈10,10∽の边が闪かれていきます。つまり、词帽なペイントツ〖ルのようになるのです。

&ref(mouse_move3.png);

サンプル [[sketch_anime_ellipse3:http://www.catch.jp/program/processing/sketch_anime_ellipse3/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   //background(0);
   ellipse(mouseX, mouseY, 10, 10);
 }

**クリックしたときだけ闪く [#b5fac295]

そして呵稿に、マウスのクリック箕だけ边を闪くようにしてみましょう。≈draw()∽笆布の≈{...}∽の面咳を鄂っぽにする恃わりに、≈void mousePressed()∽を纳裁して、その≈{...}∽の面咳に、率边を闪く炭吾を淡揭しています。

&ref(mouse_move4.png);

サンプル [[sketch_anime_ellipse4:http://www.catch.jp/program/processing/sketch_anime_ellipse4/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
 
 }
 void mousePressed() {
   ellipse(mouseX, mouseY, 10, 10);
 }

≈mousePressed()∽は、マウスのクリック箕の瓢侯を肋年する炭吾です。≈draw()∽笆布の≈{...}∽は、フレ〖ムレ〖トごとに钙び叫されていましたが、≈mousePressed()∽笆布の≈{...}∽は、マウスの焊ボタンを病したときだけ悸乖されます。

*咖を回年する [#ocf6eb0c]

咖の回年数恕を棱汤します。咖を恃えられると山附蜗がぐっと笼しますね。

**咖回年で秦肥咖を恃える [#l548df48]

Processingでは、眶猛で咖を回年します。

さきほどの、マウスの疤弥に圭わせて率边を闪くサンプルプログラムをもう办刨斧て布さい。

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

≈void draw() {∽のすぐ布に、肌の办乖がありますよね。

background(0);

これで秦肥(background)を辊咖で派りつぶしています。≈0∽が辊咖を山しています。

秦肥を球咖で派りつぶすには、肌のように回年します。

background(255);

&ref(color_back_white.png);

Processingでは、このように0×255の眶猛で咖を回年します。≈255∽が面庞染眉ですが、これはコンピュ〖タで借妄しやすいキリの紊い眶猛なのです。

**咖の3付咖で回年する [#nad6c624]

でも、これでは乐とか滥は回年できませんね。そこで肌のように3つの眶猛の寥み圭わせで回年します。肌の毋は、うすい乐咖で秦肥を派りつぶします。

background(200,0,0);

Processingでは、咖の3付咖つまり乐(R:Red)、涡(G:Green)、滥(B:Blue)の3つの咖の翁で山すことができます。この毋では、涟から界戎に乐(200)、涡(0)、滥(0)です。

咖の3付咖数及では、肌のように16渴山淡ができます。これは、HTMLなどWebデザインをする客には尸かりやすいでしょう。

background(#FFCC00);

では、ひとつだけ炳脱毋を斧てみましょう。肌のプログラムは、マウスの疤弥に炳じて率边の络きさを恃えると票箕に、秦肥咖も恃えています。

&ref(color_back_mouse.png);

サンプル [[マウスの疤弥で秦肥咖を恃える:http://www.catch.jp/program/processing/color_back_mouse_xy/]]

void setup() {
   size(255, 255);
   frameRate(20);
 }
 
 void draw() {
   background(mouseX, 0, mouseY);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

マウスの疤弥(mouseX, mouseY)を秦肥咖の乐と滥に回年しています。

background(mouseX, 0, mouseY);

**咖の回年数恕 [#d701b4f3]

咖の回年数恕を腊妄すると、肌のようになります。これまで棱汤してきた数恕のほかに、譬汤刨を回年することもできます。

|硷梧|毋|
|グレ〖スケ〖ル|(255)|
|グレ〖スケ〖ル,譬汤刨|(255,30)|
|RGB|(255,0,0)|
|RGB、譬汤刨|(255,0,0,30)|
|RGB¨16渴山绩|(#FF0000)|
|RGB、譬汤刨¨16渴山绩|(#FF0000, 30)|

拒嘿は、Referenceで≈color()∽を拇べて斧てください。

-[[color() \ Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/color_.html]] 泣塑胳惹
-[[color() \ Language (API) \ Processing 1.0:http://processing.org/reference/color_.html]]

**哭妨の咖を恃える [#vd518e29]

肌は、率边の呜吃や派りつぶしの咖を恃えてみましょう。率边などの哭妨の咖を恃构するには、まず咖を回年して、それから哭妨を闪くよう回绩をします。

&ref(color_line_red.png);

void setup() {
   size(250, 250);
   frameRate(20);
 }
 
 void draw() {
   background(255);
   stroke(255, 0, 0);	//呜吃俐の咖を回年
   ellipse(width/2, height/2, mouseX, mouseY);
 }

ここでは、肌のように≈stroke∽炭吾で呜吃俐に乐咖を回年しています。

stroke(255, 0, 0);

ちなみに、俐の吕さを回年するには、[[strokeWeight():http://www.technotype.net/processing/reference/strokeWeight_.html]]炭吾で肋年します。

派りつぶし咖を回年する眷圭には、肌のように≈fill∽炭吾で回年し、それから哭妨を闪きます。

fill(255, 0, 0);

炳脱毋として、マウスの疤弥に圭わせて、率边の呜吃咖が恃わるサンプルを侯ってみました。

&ref(color_line_mouse.png);

サンプル [[マウスの疤弥で呜吃咖を恃える:http://www.catch.jp/program/processing/color_line_mouse_xy/]]

**フェ〖ドアウト [#ja1544d8]

涟の毋では秦肥を派りつぶすことで、涟に闪いた哭妨も派りつぶしていました。また、派りつぶしをやめると、涟に闪いたものがずっと荒っていました。

そこで、染譬汤な球で茶烫を派りつぶすようにしてみましょう。こうすると、闪いた哭妨が警しずつフェ〖ドアウトしていくように山附できます。

肌のサンプルでは、票じ络きさの边をマウスの疤弥に闪いていきます。

&ref(color_circle_fade.png);

サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:http://www.catch.jp/program/processing/color_circle_fade/]]

秦肥を派りつぶすかわりにフェ〖ドアウトさせる≈fadeToWhite()∽炭吾を纳裁しています。

//フェ〖ドアウト
 void fadeToWhite() {
   noStroke();
   fill(255, 30);
   rectMode(CORNER);
   rect(0, 0, width, height);
 }

このテクニックは、[[Built with Processing(Ver 1.x滦炳惹)-デザイン/ア〖トのためのプログラミング掐嚏:http://www.amazon.co.jp/gp/product/4861007070/ref=as_li_ss_tl?ie=UTF8&tag=plaseboeffect-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4861007070]]を徊雇にしました。

*矢机の山绩 [#j05ae40a]

咖を恃える肌は、矢机を山绩してみましょう。

&ref(letters.png);

サンプル [[sketch_anime_letters:http://www.catch.jp/program/processing/sketch_anime_letters/]]

**答塑妨 [#xe01c874]

こんな炊じ

fill(0);		//矢机の咖
  textSize(24);		//矢机のサイズ(ピクセル眶)
  text("A",10, 10); //山绩する矢机と疤弥

矢机の咖は、fill炭吾で回年します。矢机のサイズは、ピクセル眶で回年します。

&ref(letter.png);

size(250, 250);
 background(255);
 
 fill(0);
 textSize(20);
 text("Hello",10,30);
 
 fill(255,0,0);
 textSize(40);
 text("Hello",10,100);
 
 fill(0,0,255);
 textSize(80);
 text("Hello",10,200);

**フォントを回年する [#p3dfef37]

フォントを回年するためには、Processingのエディタで、漓脱のフォントデ〖タを侯喇しておく涩妥があります。

フォントデ〖タの侯喇缄界は、

+≈Tool∽-≈Create Font∽
+≈Create Font∽ウィンドウが山绩されたら、网脱したいフォントとサイズを回年
+≈OK∽ボタンをクリック

これで、≈マイドキュメント∽->≈Processing∽->≈(プログラム叹)∽->≈data∽フォルダに、≈*.vlw∽という橙磨灰のフォントデ〖タファイルができています。このdataフォルダは、撅にプログラムファイルと票じ疤弥に弥くようにします。Appletとして给倡する眷圭も、票屯です。

プログラム面で、フォントを回年するには、肌のようにPFontクラスを蝗います。

PFont font = loadFont("Arial-Black-48.vlw"); //フォントの粕哈み
 textFont(font); //フォントの回年
 textSize(24);
 fill(0);
 text("Hello world",10,30);

&ref(letters_font.png);

サンプル [[sketch_anime_letter3:http://www.catch.jp/program/processing/sketch_anime_letters3/]]

なお、祸涟にフォントデ〖タを侯っておかなくても网脱できるcreateFont炭吾がありますが、コンピュ〖タごとに箭峡されているフォントが佰なっている眷圭があり、庙罢が涩妥です。

**徊雇攫鼠 [#z4571756]

-[[text() \ Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/text_.html]] リファレンス泣塑胳惹ベ〖タ
-[[text() \ Language (API) \ Processing 1.0:http://processing.org/reference/text_.html]]リファレンス毖胳

*プログラムによる拎侯 [#ya3ea99a]

肌は、敞を闪くための燎亨(マテリアル)を、どのようにプログラムから拎侯するのか、妄豺しておきましょう。これは、肌の徊雇获瘟を粕んでみてください。デザイン废络池の鉴度の获瘟です。

-[[Processing掐嚏怪郝:http://ap.kakoku.net/]]
-[[Processing 池浆ノ〖ト:http://www.d-improvement.jp/learning/processing/]]
-[[FrontPage - 兜镑のためのプログラミング掐嚏:http://wiki.bmoon.jp/wiki.cgi/Programming?page=FrontPage]]

*オブジェクトを蝗ったサンプルプログラム [#c04679e8]

词帽なサンプルをいくつか侯ってみました。

**1改のボ〖ルが、はねかえる [#bd38bdaa]

&ref(bounce_a_ball_fade.png);

サンプル [[bounce_ball_1:http://www.catch.jp/program/processing/bounce_ball_1/]]

1改のボ〖ルが、ウィンドウ柒をはね搀ります。Ballオブジェクトでボ〖ルを山附しています。

塑碰は、ボ〖ル１改だけならオブジェクトを侯るまでもないのですが、肌のように剩眶のボ〖ルを胺う眷圭に守网です。

**剩眶のボ〖ルが、はねかえる[#k700f4e3]

&ref(bounce_balls_fade.png);

サンプル [[bounce_ball_20:http://www.catch.jp/program/processing/bounce_ball_20/]]

剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ただし、ボ〖ル票晃は咀仆しません。ここでは、Ballオブジェクトを芹误で瓷妄しています。

Processingに烧掳のExamplesのうち、≈Topics - Motion - BounceBubbles∽が徊雇になりました。

**咀仆する剩眶のボ〖ル [#a825d5a3]

&ref(push_balls_fade.png);

サンプル [[push_balls:http://www.catch.jp/program/processing/push_balls/]]

剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ボ〖ル票晃も咀仆します。

-徊雇¨[[Bubbles:http://dokokano.com/ftlabo/applet/Bubbles/]]

**瓢湿の凡れ [#l538b340]

瓢湿の凡のような瓢きを浩附してみました。

&ref(boid_102.png);

サンプル [[boid:http://www.catch.jp/program/processing/boid/]]

鼻茶やCGˇアニメ〖ションで判眷する瓢湿の凡などは、boid(ボイド、Bird + doid 幕もどき)と钙ばれる慌寥みで瓢いています。これは、シンプルな３つのル〖ルで、称ボ〖ルの瓢きを扩告することで、瓢湿の凡のような瓢きを侯り叫しています。[[Processing Discourse - Simple Boid Sketch:http://processing.org/discourse/yabb2/YaBB.pl?board=Syntax;action=display;num=1193175897]]のコ〖ドを络いに徊雇にさせてもらいました。

-[[ボイド (客供栏炭) - Wikipedia:http://ja.wikipedia.org/wiki/%E3%83%9C%E3%82%A4%E3%83%89_(%E4%BA%BA%E5%B7%A5%E7%94%9F%E5%91%BD)]]
-[[Boids Test Built with Processing | 鄂篓困咖 | null-null.net:http://null-null.net/blog/2007/11/570.php]]
-[[Processing Discourse - Simple Boid Sketch:http://processing.org/discourse/yabb2/YaBB.pl?board=Syntax;action=display;num=1193175897]]
-[[Processing boid 垛蝶:http://www.tiu.ac.jp/~zohzemi/processing/index.html]]
-[[ほぼ泣穿イトイ糠使 - がんばれ抗李くんの颁帕灰くん:http://www.1101.com/morikawa/2001-06-25.html]]
-[[Boids (Flocks, Herds, and Schools: a Distributed Behavioral Model):http://www.red3d.com/cwr/boids/]]

*いろいろ烫球そうなこと [#o4b301b6]

**Processingでサウンド借妄 [#sa2347a7]

こちらにまとめることにしました。

-[[Processingでサウンド]]

**GUI [#cb9f6aee]

-[[Processing惧でのGUI &#187; Surf on Entropy : Nao Tokui's blog:http://www.sonasphere.com/blog/?p=471]]
-[[Processing巴赂からの忙笛≥AWTでのGUIプログラミング(1) - 秒布がりの眶及:http://d.hatena.ne.jp/afeq/20100614/1277614439]]

*フルスクリ〖ン山绩 [#ra9e0c16]

でっかいプロジェクタ〖で斧せびらかしたい箕は、Fullscreen API for Processingを蝗います。

**洁洒１¨プログラムを汾くする [#s610bc8e]

そのまま链茶烫山绩(フルスクリ〖ン)にすると、脚くて觅くなる眷圭があります。
そのために、ウィンドウサイズ 640 x 480くらいで、そこそこ瓢くように肌のよう、祸涟に拇腊しておきます。

-フレ〖ムレ〖ト(framerate)を井さくする
-山绩するオブジェクト眶を警なくする
-ル〖プ搀眶を负らす

**洁洒２¨FullscreenAPIを瞥掐する [#e10ecd35]

+笆布のサイトのDownloadからfullscreen.zipをダウンロ〖ドする
--FullScreen API For Processing v 0.98.4
--http://www.superduper.org/processing/fullscreen_api/
+豺培してできたfullscreenというフォルダを≈(processingの豺培フォルダ)\modes\java\libraries∽フォルダに摧ごと掐れる

Fullscreen APIがうまく瞥掐できていれば、Processingのエディタで≈Sketch∽-≈Import Library∽メニュ〖を斧たとき、≈Fullscreen∽が纳裁されているはず。

**プログラム塑挛を拇腊する [#j9db7ea5]

フルスクリ〖ンにしたいプログラム、肌のコ〖ドを淡揭します。

//黎片乖
 import fullscreen.*; 
 FullScreen fs;

//setupの面
 size(640, 480);
 frameRate(10);
 fs = new FullScreen(this); 
 fs.enter();
 noCursor(); //オプション¨マウスカ〖ソルを久す眷圭

これで、プログラムを≈Run∽すると、サイズ(640, 480)に圭わせて茶烫豺咙刨が恃构されて、フルスクリ〖ンで山绩されます。

フルスクリ〖ン山绩を姜位するには、[ESC]キ〖を病します。

**アプリケ〖ションとして芹邵する [#p901c792]

+≈File∽-≈Export Application∽を联买
+ ダイアログボックスが山绩されたら、肌のように肋年する
--Windows
--Fullscreen (Present mode)

これで窗喇。≈application.windows∽フォルダの面咳を摧ごと芹邵。

悸乖箕は、exeファイルをダブルクリックする。

**サンプル [#w270eda5]

Boidをフルスクリ〖ンアプリケ〖ションにしたもの。ソ〖スコ〖ド烧き。

#ref(boid_full_201.lzh);

**徊雇 [#rc7234e3]

-[[Processingでフルスクリ〖ン∈fullscreen∷山绩にする - Py:http://d.hatena.ne.jp/PyPonta/20090116/1232079453]]
-[[Processingでフルスクリ〖ン∈fullscreen∷山绩にし、なおかつマウスカ〖ソルも久す - Py:http://d.hatena.ne.jp/PyPonta/20090116/1232079944]]
-[[Karappo Interaction Lab. &#187; Processingでフルスクリ〖ン:http://labs.karappo.net/interact/index.php?itemid=135]]

-[[FullScreen API for Processing:http://www.superduper.org/processing/fullscreen_api/]]

*スクリ〖ンセ〖バ〖 [#hfb871dd]

-Windows】Linux
--[[Processing Screensaver:http://jorgecardoso.eu/processing/Screensaver/]]
-Mac OS X惹
--[[Ondra on Tumblr 〗 Processingのスケッチをスクリ〖ンセ〖バ〖にする数恕(Mac):http://tumblr.ondra.cc/post/3028064141/processing-screen-saver]]

*すごそうな侯墒たち [#oe824252]

-[[proce55ingを蝗ったGraphic礁 - NAVER まとめ:http://matome.naver.jp/odai/2124780935706570926]]

-[[ harukit - proce55ing sketchbook:http://www.harukit.com/p5skch.html]]
-[[ processing - SourceChord:http://d.hatena.ne.jp/minami_SC/searchdiary?word=%2A%5Bprocessing%5D]]
-[[LeaveBehind &#187; Proce55ing:http://gofar2.iobb.net/~htaka/wordpress/archives/category/proce55ing]]
-[[Classiclll's Proce55ing Test Page:http://www.geocities.jp/classiclll_newweb/]]

-[[Processingで头ぼう - Writing Cafe:http://cafe.eyln.com/cgi-bin/wiki/wiki.cgi?page=Processing%A4%C7%CD%B7%A4%DC%A4%A6]] ゲ〖ムとか。
-[[OpenProcessing - Share Your Sketches!:http://www.openprocessing.org/]]

*豺棱今 [#rf275806]

-[[Built with Processing(Ver 1.x滦炳惹)-デザイン/ア〖トのためのプログラミング掐嚏:http://www.amazon.co.jp/gp/product/4861007070/ref=as_li_ss_tl?ie=UTF8&tag=plaseboeffect-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4861007070]]
--润撅に介殊弄なところからデザインとかでの网脱数恕まで讨湾しています。オススメ。
-[[Processingプログラミング掐嚏〗Javaベ〖スのオ〖プンソ〖ス琵圭倡券茨董:http://www.amazon.co.jp/gp/product/4877832475/ref=as_li_ss_tl?ie=UTF8&tag=plaseboeffect-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4877832475]]
--答塑から呵糠の炳脱まで升弓い炊じ。踏粕。
-[[ビジュアライジングˇデ〖タ〗Processingによる攫鼠浑承步缄恕:http://www.amazon.co.jp/gp/product/4873113784/ref=as_li_ss_tl?ie=UTF8&tag=plaseboeffect-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4873113784]]
--オライリ〖ブックス。倡券荚塑客による豺棱。塑呈宠脱には稍材风かも。踏粕。
-[[Prototyping Lab 〗≈侯りながら雇える∽ためのArduino悸俩レシピ:http://www.amazon.co.jp/gp/product/4873114535/ref=as_li_ss_tl?ie=UTF8&tag=plaseboeffect-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4873114535]]
--ハ〖ドウェアとの息啡は、これ。踏粕

*リンク [#e9520480]

-[[Processing掐嚏≤openFrameworks | こどものもうそうblog:http://blog.lv99.com/?eid=823769]]
-[[∝ビジュアライジングˇデ〖タ≠炊鳞 | こどものもうそうblog:http://blog.lv99.com/?eid=863132]]

-[[份窖の僵にProcessingでスケッチプログラミングを幌めてみよう∈1/3∷ - △IT:http://www.atmarkit.co.jp/fwcr/design/tool/processing01/01.html]]

-[[Processing.jp:http://processing.jp/]]
-[[Processing.org:http://processing.org/]]
-[[Processing - Wikipedia:http://ja.wikipedia.org/wiki/Processing]]
-[[Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/index.html]]リファレンスの泣塑胳惹
-[[Proce55ing Tutorial for Macromedia Minds:http://www.vision.cs.chubu.ac.jp/Proce55ing/workshop.html]] チュ〖トリアルの泣塑胳惹

-[[Processing によるデ〖タ浑承步: 妈 1 搀 咐胳と茨董:http://www.ibm.com/developerworks/jp/opensource/library/os-datavis/]]
-[[Processing によるデ〖タ浑承步: 妈 2 搀 インタ〖フェ〖ス、オブジェクト、茶咙、そしてアプリケ〖ションを蝗脱した、より光刨なデ〖タ浑承步:http://www.ibm.com/developerworks/jp/opensource/library/os-datavis2/]]
-[[Processing によるデ〖タ浑承步: 妈 3 搀 2 肌傅グラフィックス、3 肌傅グラフィックス、湿妄弄な瓢き、そしてネットワ〖ク:http://www.ibm.com/developerworks/jp/opensource/library/os-datavis3/]]

-[[Tercel::Diary: Processing でイテレ〖タ:http://tercel-sakuragaoka.blogspot.jp/2011/06/processing.html]]
-[[客供咐胳掐嚏 A 2010 Processingによる光刨なモ〖ション¨バネの瓢きを侯る | yoppa org:http://yoppa.org/proga10/1271.html]]

-[[Processing脱コンソ〖ル滦厦房プログラム倡券フレ〖ムワ〖クCrowbar (クロウバ〖) - SourceForge.JP:http://sourceforge.jp/projects/crowbar/]]
-[[Java答撩矢恕呵庐マスタ〖 - いろいろ豺老泣淡:http://d.hatena.ne.jp/nattou_curry_2/20100130/1264821094]]

タイムスタンプを恃构しない

簇息¨[[泣塑胳っぽいプログラミング咐胳そら痞スクリプト>SoraMame.ps.js]]　[[HTML5+JavaScript]]

これは、ビジュアルデザイン脱プログラミング咐胳Processing(プロセッシング∷の词帽な掐嚏淡祸です。

''[[↑なんと、泣塑胳っぽいコ〖ドをProcessingのスケッチに恃垂する≈そら痞スクリプト∽判眷—>SoraMame.ps.js]]''

''[[↑Javascript惹であるProcessing.jsは、コチラ—>Processing.js答撩呵庐掐嚏]]''

#htmlinsert(processing.html)

#contents

&ref(boid_102.png);

Processingバ〖ジョン1.5(17 April 2011)をベ〖スに淡揭しています。

*とにかく幌める。 [#nd0c90d6]

Processingは、Windows笆嘲にもMac惹やLinux惹がありますが、Windows惹を瞥掐してみました。

**掐缄から弹瓢まで [#b22f1159]

これで、Processingが弹瓢します。

&ref(IDE.png);

讳の眷圭、Javaを瞥掐貉みなので(without Java)惹でOKかと蛔ったら、うまく瓢かず。Java烧き惹に磊り仑えました。

姜位は、まあ舍奶にウィンドウを誓じるか、≈File∽-≈Quit∽を联买

**とりあえず敞を闪く [#o3b9d8fc]

肌のように掐蜗して、ツ〖ルバ〖の≈Run∽ボタンをクリック。

line(0,0,200,200);

&ref(line.png);

肌はこれ。

size(250, 250);
 ellipse(120,120,80,80);

闪茶ウィンドウのサイズ(Size)を恃构して、その边(ellipse:率边)を闪きます。

&ref(ellipse.png);

Sizeのカッコ柒は、玻升(width)と侥升(height)の界に回年します。ellipseのカッコの面は、肌の界に回年します。

ellipse(x, y, width, height);

-x=面看の玻の疤弥
-y=面看の侥の疤弥
-width=率边の玻升
-height=率边の侥升

ちなみにProcessingでは、乖琐に涩ず≈;∽を掐蜗します。コ〖ドが2乖笆惧あると惧から界戎に悸乖していきます。

プログラムができたら、ツ〖ルバ〖の≈Save∽ボタンでファイルに瘦赂します。このあたりは、ワ〖プロとかとおなじですね。

ま、ここまでは票じ敞を闪くだけなので、プログラムとしてはさほど烫球くありませんが。

**いよいよアニメ〖ション [#p434843f]

海刨は、マウスの瓢きに圭わせて、闪く敞を恃えてみましょう。マウスの疤弥を拇べて、それに圭わせて率边を闪きます。

&ref(mouse_move.png);

サンプル [[sketch_anime_ellipse:http://www.catch.jp/program/processing/sketch_anime_ellipse/]]

笆布のコ〖ドを掐蜗してみてください。

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

**喇蔡を给倡する [#q698a7c8]

黎ほど棱汤したようにProcessingには、プログラムを淡揭したり悸乖するための怠墙がついています。ツ〖ルバ〖には、肌のボタンがあります。

**Priocessingの炭吾を拇べる [#z4a47202]

Processingは、lineやellipseなどの炭吾(コマンド)を寥み圭わせて闪いていきます。

毖胳で今いてあるので粕みにくいですが、妨及が办年なので、その妨及を拇べたりサンプルコ〖ドを活したりすれば浇尸蝗えると蛔います。

警し攫鼠が概いかも梦れませんが、泣塑胳惹リファレンスもあります。

-[[Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/index.html]]泣塑胳惹リファレンス

*郝筛の回年数恕 [#m8c6a497]

さて、Processingで敞を闪くとき、その疤弥を2つの猛からなる郝筛で回绩します。たとえば、木俐を闪くには尉眉の爬を回年します。

&ref(dimension.png);

闪茶エリアのサイズは、Size炭吾で、玻升(width)と侥升(height)の界に肋年します。

size(250, 250);

そうすると、附哼の闪茶エリアの络きさは、≈width∽と≈height∽で艰り叫せます。
肌のように淡揭すると、闪茶エリアの滦逞俐を2塑闪きます。

line(0,0,width,height);
 line(width,0,0,height);

&ref(line2.png);

*アニメ〖ションとマウス拎侯 [#ha6b873b]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

**脚ね派りとコメント矢 [#cf8c0225]

setup() 笆布の{...}の面が弹瓢箕に办搀だけ悸乖されて、draw()笆布の{...}の面咳が、フレ〖ムレ〖トごとに部刨も悸乖されるのでした。

&ref(mouse_move2.png);

サンプル [[sketch_anime_ellipse2:http://www.catch.jp/program/processing/sketch_anime_ellipse2/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   //background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

**マウスの疤弥に闪く [#m095f625]

鲁いて、率边を闪く婶尸を肌のように恃构してみましょう。

恃构涟

ellipse(width/2, height/2, mouseX, mouseY);

恃构稿

ellipse(mouseX, mouseY, 10, 10);

&ref(mouse_move3.png);

サンプル [[sketch_anime_ellipse3:http://www.catch.jp/program/processing/sketch_anime_ellipse3/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   //background(0);
   ellipse(mouseX, mouseY, 10, 10);
 }

**クリックしたときだけ闪く [#b5fac295]

&ref(mouse_move4.png);

サンプル [[sketch_anime_ellipse4:http://www.catch.jp/program/processing/sketch_anime_ellipse4/]]

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
 
 }
 void mousePressed() {
   ellipse(mouseX, mouseY, 10, 10);
 }

*咖を回年する [#ocf6eb0c]

咖の回年数恕を棱汤します。咖を恃えられると山附蜗がぐっと笼しますね。

**咖回年で秦肥咖を恃える [#l548df48]

Processingでは、眶猛で咖を回年します。

さきほどの、マウスの疤弥に圭わせて率边を闪くサンプルプログラムをもう办刨斧て布さい。

void setup() {
   size(250, 250);
   frameRate(20);
 }
 void draw() {
   background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

≈void draw() {∽のすぐ布に、肌の办乖がありますよね。

background(0);

これで秦肥(background)を辊咖で派りつぶしています。≈0∽が辊咖を山しています。

秦肥を球咖で派りつぶすには、肌のように回年します。

background(255);

&ref(color_back_white.png);

Processingでは、このように0×255の眶猛で咖を回年します。≈255∽が面庞染眉ですが、これはコンピュ〖タで借妄しやすいキリの紊い眶猛なのです。

**咖の3付咖で回年する [#nad6c624]

background(200,0,0);

咖の3付咖数及では、肌のように16渴山淡ができます。これは、HTMLなどWebデザインをする客には尸かりやすいでしょう。

background(#FFCC00);

では、ひとつだけ炳脱毋を斧てみましょう。肌のプログラムは、マウスの疤弥に炳じて率边の络きさを恃えると票箕に、秦肥咖も恃えています。

&ref(color_back_mouse.png);

サンプル [[マウスの疤弥で秦肥咖を恃える:http://www.catch.jp/program/processing/color_back_mouse_xy/]]

void setup() {
   size(255, 255);
   frameRate(20);
 }
 
 void draw() {
   background(mouseX, 0, mouseY);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

マウスの疤弥(mouseX, mouseY)を秦肥咖の乐と滥に回年しています。

background(mouseX, 0, mouseY);

**咖の回年数恕 [#d701b4f3]

咖の回年数恕を腊妄すると、肌のようになります。これまで棱汤してきた数恕のほかに、譬汤刨を回年することもできます。

拒嘿は、Referenceで≈color()∽を拇べて斧てください。

**哭妨の咖を恃える [#vd518e29]

&ref(color_line_red.png);

void setup() {
   size(250, 250);
   frameRate(20);
 }
 
 void draw() {
   background(255);
   stroke(255, 0, 0);	//呜吃俐の咖を回年
   ellipse(width/2, height/2, mouseX, mouseY);
 }

ここでは、肌のように≈stroke∽炭吾で呜吃俐に乐咖を回年しています。

stroke(255, 0, 0);

ちなみに、俐の吕さを回年するには、[[strokeWeight():http://www.technotype.net/processing/reference/strokeWeight_.html]]炭吾で肋年します。

派りつぶし咖を回年する眷圭には、肌のように≈fill∽炭吾で回年し、それから哭妨を闪きます。

fill(255, 0, 0);

炳脱毋として、マウスの疤弥に圭わせて、率边の呜吃咖が恃わるサンプルを侯ってみました。

&ref(color_line_mouse.png);

サンプル [[マウスの疤弥で呜吃咖を恃える:http://www.catch.jp/program/processing/color_line_mouse_xy/]]

**フェ〖ドアウト [#ja1544d8]

そこで、染譬汤な球で茶烫を派りつぶすようにしてみましょう。こうすると、闪いた哭妨が警しずつフェ〖ドアウトしていくように山附できます。

肌のサンプルでは、票じ络きさの边をマウスの疤弥に闪いていきます。

&ref(color_circle_fade.png);

サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:http://www.catch.jp/program/processing/color_circle_fade/]]

秦肥を派りつぶすかわりにフェ〖ドアウトさせる≈fadeToWhite()∽炭吾を纳裁しています。

//フェ〖ドアウト
 void fadeToWhite() {
   noStroke();
   fill(255, 30);
   rectMode(CORNER);
   rect(0, 0, width, height);
 }

*矢机の山绩 [#j05ae40a]

咖を恃える肌は、矢机を山绩してみましょう。

&ref(letters.png);

サンプル [[sketch_anime_letters:http://www.catch.jp/program/processing/sketch_anime_letters/]]

**答塑妨 [#xe01c874]

こんな炊じ

fill(0);		//矢机の咖
  textSize(24);		//矢机のサイズ(ピクセル眶)
  text("A",10, 10); //山绩する矢机と疤弥

矢机の咖は、fill炭吾で回年します。矢机のサイズは、ピクセル眶で回年します。

&ref(letter.png);

size(250, 250);
 background(255);
 
 fill(0);
 textSize(20);
 text("Hello",10,30);
 
 fill(255,0,0);
 textSize(40);
 text("Hello",10,100);
 
 fill(0,0,255);
 textSize(80);
 text("Hello",10,200);

**フォントを回年する [#p3dfef37]

フォントを回年するためには、Processingのエディタで、漓脱のフォントデ〖タを侯喇しておく涩妥があります。

フォントデ〖タの侯喇缄界は、

+≈Tool∽-≈Create Font∽
+≈Create Font∽ウィンドウが山绩されたら、网脱したいフォントとサイズを回年
+≈OK∽ボタンをクリック

プログラム面で、フォントを回年するには、肌のようにPFontクラスを蝗います。

PFont font = loadFont("Arial-Black-48.vlw"); //フォントの粕哈み
 textFont(font); //フォントの回年
 textSize(24);
 fill(0);
 text("Hello world",10,30);

&ref(letters_font.png);

サンプル [[sketch_anime_letter3:http://www.catch.jp/program/processing/sketch_anime_letters3/]]

**徊雇攫鼠 [#z4571756]

*プログラムによる拎侯 [#ya3ea99a]

*オブジェクトを蝗ったサンプルプログラム [#c04679e8]

词帽なサンプルをいくつか侯ってみました。

**1改のボ〖ルが、はねかえる [#bd38bdaa]

&ref(bounce_a_ball_fade.png);

サンプル [[bounce_ball_1:http://www.catch.jp/program/processing/bounce_ball_1/]]

1改のボ〖ルが、ウィンドウ柒をはね搀ります。Ballオブジェクトでボ〖ルを山附しています。

塑碰は、ボ〖ル１改だけならオブジェクトを侯るまでもないのですが、肌のように剩眶のボ〖ルを胺う眷圭に守网です。

**剩眶のボ〖ルが、はねかえる[#k700f4e3]

&ref(bounce_balls_fade.png);

サンプル [[bounce_ball_20:http://www.catch.jp/program/processing/bounce_ball_20/]]

剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ただし、ボ〖ル票晃は咀仆しません。ここでは、Ballオブジェクトを芹误で瓷妄しています。

Processingに烧掳のExamplesのうち、≈Topics - Motion - BounceBubbles∽が徊雇になりました。

**咀仆する剩眶のボ〖ル [#a825d5a3]

&ref(push_balls_fade.png);

サンプル [[push_balls:http://www.catch.jp/program/processing/push_balls/]]

剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ボ〖ル票晃も咀仆します。

-徊雇¨[[Bubbles:http://dokokano.com/ftlabo/applet/Bubbles/]]

**瓢湿の凡れ [#l538b340]

瓢湿の凡のような瓢きを浩附してみました。

&ref(boid_102.png);

サンプル [[boid:http://www.catch.jp/program/processing/boid/]]

*いろいろ烫球そうなこと [#o4b301b6]

**Processingでサウンド借妄 [#sa2347a7]

こちらにまとめることにしました。

-[[Processingでサウンド]]

**GUI [#cb9f6aee]

*フルスクリ〖ン山绩 [#ra9e0c16]

でっかいプロジェクタ〖で斧せびらかしたい箕は、Fullscreen API for Processingを蝗います。

**洁洒１¨プログラムを汾くする [#s610bc8e]

-フレ〖ムレ〖ト(framerate)を井さくする
-山绩するオブジェクト眶を警なくする
-ル〖プ搀眶を负らす

**洁洒２¨FullscreenAPIを瞥掐する [#e10ecd35]

Fullscreen APIがうまく瞥掐できていれば、Processingのエディタで≈Sketch∽-≈Import Library∽メニュ〖を斧たとき、≈Fullscreen∽が纳裁されているはず。

**プログラム塑挛を拇腊する [#j9db7ea5]

フルスクリ〖ンにしたいプログラム、肌のコ〖ドを淡揭します。

//黎片乖
 import fullscreen.*; 
 FullScreen fs;

//setupの面
 size(640, 480);
 frameRate(10);
 fs = new FullScreen(this); 
 fs.enter();
 noCursor(); //オプション¨マウスカ〖ソルを久す眷圭

これで、プログラムを≈Run∽すると、サイズ(640, 480)に圭わせて茶烫豺咙刨が恃构されて、フルスクリ〖ンで山绩されます。

フルスクリ〖ン山绩を姜位するには、[ESC]キ〖を病します。

**アプリケ〖ションとして芹邵する [#p901c792]

+≈File∽-≈Export Application∽を联买
+ ダイアログボックスが山绩されたら、肌のように肋年する
--Windows
--Fullscreen (Present mode)

これで窗喇。≈application.windows∽フォルダの面咳を摧ごと芹邵。

悸乖箕は、exeファイルをダブルクリックする。

**サンプル [#w270eda5]

Boidをフルスクリ〖ンアプリケ〖ションにしたもの。ソ〖スコ〖ド烧き。

#ref(boid_full_201.lzh);

**徊雇 [#rc7234e3]

-[[FullScreen API for Processing:http://www.superduper.org/processing/fullscreen_api/]]

*スクリ〖ンセ〖バ〖 [#hfb871dd]

*すごそうな侯墒たち [#oe824252]

-[[proce55ingを蝗ったGraphic礁 - NAVER まとめ:http://matome.naver.jp/odai/2124780935706570926]]

*豺棱今 [#rf275806]

*リンク [#e9520480]

-[[份窖の僵にProcessingでスケッチプログラミングを幌めてみよう∈1/3∷ - △IT:http://www.atmarkit.co.jp/fwcr/design/tool/processing01/01.html]]

テキスト腊妨のル〖ルを山绩する

Processing答撩呵庐掐嚏 の试礁

Processing答撩呵庐掐嚏の试礁