Processing.js答撩呵庐掐嚏の试礁

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

&ref(boid.png);

Processing.jsは、ビジュアルデザイン脱プログラミング咐胳の黎勤呈である≈Processing∽をベ〖スに、呵糠のWeb茨董(HTML5のCanvas妥燎、Javascriptあたり)で缄汾に蝗えるようにしたものです。

この淡祸は、そんなProcessing.jsの词帽な掐嚏淡祸です。黎に今いた[[Processing答撩呵庐掐嚏]]の恍隋试になります。

塑淡祸の滦据粕荚は、答塑弄にまるでプログラミング挛赋のない客。でもまあ、Webデザインとか警しでも梦っているほうが、艰り寥みやすいかも梦れません。极尸でいろいろ拇べたり玫垫するのが攻きなほうが紊いでしょう。

2011-06-06:Processing-1.2.1.js で瓢侯澄千しています。

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

#htmlinsert(processing.html)

誊肌

#contents

*とりあえずサンプルを斧る [#yf2e248a]

まずは、悸狠に瓢いているところを斧てみましょう。

**瓢湿の凡シミュレ〖ション [#q4f59d84]

これは、瓢湿の凡っぽく瓢くシミュレ〖ションで、Boidと钙ばれます。≈ピクミン∽とか鼻茶のコンピュ〖タグラフィックスとかで蝗われているテクニックです。

#ref(boid.png)

サンプルを斧る′′[[boid:http://www.catch.jp/program/processing.js/boid/]]

processing.jsを蝗うと、こういうのを极尸で侯ることができるようになります。

**いろいろなサンプル [#rfa0d3f7]

このほかにも、いろいろとスゴイ悸毋があります。

#ref(samples.png)

-[[Abstract01js:http://mariuswatz.com/works/abstract01js/index_auto.html]]
-[[BallDroppings instructions:http://balldroppings.com/js/]]ドラッグで俐を闪いて皖ちてくるボ〖ルで不弛を侯る
-[[A Mouse-driven Graphic Equalizer:http://bocoup.com/processing-js/docs/?page=A%20mouse-driven%20graphic%20equalizer]]マウスの瓢きをビジュアル步
-[[UI Dial with Snaps:http://bocoup.com/processing-js/docs/?page=UI%20Dial%20with%20Snaps]]マウス拎侯のデモ
-[[Processing.js给及サイトExhibition:http://processingjs.org/exhibition]]
-[[Processing.jsレッスン:http://processingjs.org/learning/]] このペ〖ジの稿染に、驴眶のサンプルプログラムあり。

**瓢侯茨董の澄千 [#k55b70ec]

うまく瓢かない眷圭は、瓢侯茨董を澄千しましょう。

肌のような、HTML5に滦炳しているWebブラウザが涩妥です。

-Firefox
-Safari
-Goolge Chrome
-Opera
-Internet Explorer 9

Webブラウザの硷梧とバ〖ジョンを澄千してください。

*とにかく幌める [#w6040756]

どんなものが侯れるのか尸かったら、玲庐侯ってみましょう。

**极尸でプログラムを今いてみる [#h6ef4b88]

では、呵も帽姐なプログラムで极尸なりに词帽に饯赖してみましょう。呵介は、こんな炊じです。

+[[Processing.jsの锡浆眷:http://www.catch.jp/program/processing.js/edit/]]
+≈Run∽ボタンをクリック

煌逞の面に木俐が苞かれましたね。

#ref(sandbox.png)

宝の煌逞いスペ〖スには、肌の办矢が今いてあります。

line(0, 0, 100, 100);

これが、Processing.jsのプログラムコ〖ドです(维して、コ〖ドと钙びます)。ここでは、郝筛(0,0)から郝筛(100,100)まで木俐(line)を闪きました。

それでは、このコ〖ドを肌のように饯赖してみてください。呵稿の眶猛を100から50に恃えます。

line(0, 0, 100, 50);

これで、木俐の疤弥が恃わりましたね。

Processing.jsなどのプログラミング咐胳の驴くは、こんな炊じでプログラムを今いていきます。眶猛を咖」と恃えて、どんなふうになるか活してみてください。

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

では、木俐笆嘲のものも闪いてみましょう。まず黎ほどの木俐ですが、もう办刨斧木してみましょう。

+[[Processing.jsの锡浆眷:http://www.catch.jp/program/processing.js/edit/]]

line(0,0,100,100);

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

では、肌はこれを闪いてみましょう。

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

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

&ref(circle.png);

Sizeのカッコ柒は、闪茶挝拌のサイズを玻升(width)と侥升(height)の界に回年します。

ellipseのカッコの面は、闪く率边の疤弥とサイズを肌の界に回年します。

ellipse(x, y, width, height);

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

ちなみにProcessing.jsでは、コ〖ドが2乖笆惧あると惧から界戎に悸乖していきます。それから、≈;∽で乖琐を山すことができます。これは、乖琐が汤澄に惰侍できれば、あってもなくても菇いません。Processingでは≈;∽が涩妥なので、高垂拉のために烧けておくといいかもしれません。

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

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

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

&ref(elipse_anime.png);

サンプル ′ [[mouse_move:http://www.catch.jp/program/processing.js/mouse_move/]]

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

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郝筛を傅にしています(缄を却いていますが)。

**Priocessing.jsの炭吾を拇べる [#k3b07d22]

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

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

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

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

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

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

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

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

&ref(Processing答撩呵庐掐嚏/dimension.png);

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

Processing.jsの郝筛も、これとほぼ票じです。ただ、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(lines.png);

サンプル ′ [[lines:http://www.catch.jp/program/processing.js/lines/]]

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

盖年された敞ばかり闪いていてもつまらないので、また瓢かしてみることにしましょう。黎ほどのアニメ〖ションmouse_moveのプログラムコ〖ドを警しずつ猖陇していきます。

サンプル ′ [[mouse_move:http://www.catch.jp/program/processing.js/mouse_move/]]

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);∽の乖片に≈//∽を纳裁してみてください。すると、涟に闪いた率边はぬりぶつされず、率边がどんどん脚ね派りされていきます。

void draw() {
   //background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

&ref(elipse_anime2.png);

サンプル ′ [[脚ねて闪く:http://www.catch.jp/program/processing.js/mouse_move2/]]

≈//∽は、コメント矢を山す淡规です。この淡规の宝娄から乖琐までに今かれた柒推は、プログラムとしては痰浑されます。プログラムの棱汤矢を淡揭したり、プログラムの泼年婶尸をプログラムから嘲す(でも、あとで提せるようにしておく)ために蝗われます。

海搀は、≈background(0);∽の涟に≈//∽を今いたので、≈background(0);∽がプログラムとして痰浑されて、辊咖での派りつぶしがされなくなりました。その冯蔡、率边が肌」の脚ね派りされているのです。

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

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

恃构涟

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

恃构稿

ellipse(mouseX, mouseY, 10, 10);

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

&ref(elipse_anime3.png);

サンプル [[マウスの疤弥に闪く:http://www.catch.jp/program/processing.js/mouse_move3/]]

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

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

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

&ref(elipse_anime4.png);

サンプル [[クリックしたときだけ闪く:http://www.catch.jp/program/processing.js/mouse_move4/]]

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

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

*咖を回年する [#ocf6eb0c]

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

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

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

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

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);

サンプル ′ [[秦肥咖を球咖にする:http://www.catch.jp/program/processing.js/color_back_white/]]

Processing.jsでは、このように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.js/color_back_mouse/]]

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.js:http://processingjs.org/reference/color_]]
-[[color() \ Language (API) \ Processing 1.0 (BETA):http://www.technotype.net/processing/reference/color_.html]] 泣塑胳惹

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

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

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.js/color_line_mouse/]]

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

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

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

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

&ref(color_back_fade.png);

サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:http://www.catch.jp/program/processing.js/color_back_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.js/letters/]]

**答塑妨 [#xe01c874]

こんな炊じ

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

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

&ref(test_letters.png);

サンプル [[test_letters:http://www.catch.jp/program/processing.js/letters_test/]]

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]

2012-10 泣塑胳フォントを回年する数恕を纳淡。

フォント叹は、毖胳叹で回年する。

汤墨なら≈serif∽、ゴシックなら≈sans-serif∽。

fill(0);
 
 PFont fontA = loadFont("serif");
 textFont(fontA, 18);
 text("あいうえお", 10, 30);
 
 PFont fontB = loadFont("sans-serif");
 textFont(fontB, 18);
 text("かきくけこ", 10, 60);

-[[徊雇_words-demo:http://processingjs.org/learning/basic/words/]]

//ⅷ侯喇面 - デモなど赖撅に瓢侯していません。
//フォントを回年するためには、Processingのエディタで、漓脱のフォントデ〖タを侯喇しておく涩妥があります。
//フォントデ〖タの侯喇缄界は、
//+≈Tool∽-≈Create Font∽
//+≈Create Font∽ウィンドウが山绩されたら、网脱したいフォントとサイズを回年
//+≈OK∽ボタンをクリック
//
//これで、≈マイドキュメント∽->≈Processing∽->≈(プログラム叹)∽->≈data∽フォルダに、≈*.vlw∽という橙磨灰のフォントデ〖タファイルができています。このdataフォルダは、撅にプログラムファイルと票じ疤弥に弥くようにします。
//
//プログラム面で、フォントを回年するには、肌のようにPFontクラスを蝗います。
//
// PFont font = loadFont("Arial-Black-48.vlw"); //フォントの粕哈み
// textFont(font); //フォントの回年
// textSize(24);
// fill(0);
// text("Hello world",10,30);

// &ref(letters_font.png);

//サンプル [[フォントを回年する:http://www.catch.jp/program/processing.js/letters_font/]]

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

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

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

ProcessingとProcessing.jsは、矢恕がほとんど票じなので、徊雇になると蛔います。

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

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

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

&ref(bounce_ball_1.png);

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

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

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

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

&ref(bounce_balls.png);

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

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

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

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

&ref(push_balls.png);

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

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

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

**瓢湿の凡れ [#l538b340]

肆片でも疽拆したboidで、瓢湿の凡のような瓢きを浩附してみました。

&ref(boid.png);

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

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/]]

**仓残 [#x54b8158]

jsdo.itに抨蛊したもの。

-[[processing.js: yet another firework - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/yyycatch/pn2V]]

*茶咙ファイルの山绩 [#k4a34ac4]

Processing.jsでは、茶咙ファイルを粕み哈むには、それに黎惟ってブロックコメント面に≈@pjs preload="sora-mame.png";∽と淡揭する。これで、茶咙ファイルを黎粕みする。

//茶咙を山绩
 /* @pjs preload="sora-mame.png"; */
 size(300,300);
 PImage b;
 b = loadImage('sora-mame.png');
 image(b,0,0);

*极尸のパソコンに茨董を侯るには [#r8cd4d68]

Webブラウザから悸乖しても紊いのですが、极尸のパソコンにも票じ茨董を脱罢したいですよね。そうすれば、インタ〖ネットに儡鲁しなくて、Processing.jsを弛しめます。

**茨董の侯り数 [#n6f4c143]

そこで、肌のようにしてProessing.jsをダウンロ〖ドしておきましょう。

1.笆布にアクセスして、呵糠の≈Zipped Source∽をダウンロ〖ドする

-http://processingjs.org/download
-(毋¨processing-js-1.2.0.zip)

2.ファイルを豺培する

3.布淡の试礁脱HTMLファイル(edit.html)を、宝クリック->≈叹涟を烧けてリンク黎を瘦赂∽

#ref(edit.html)

4.瘦赂した≈edit.htm∽lファイルを、Processing.jsを豺培したフォルダに庶り哈む

5.その≈edit.html∽をダブルクリック

これで、インタ〖ネットに儡鲁していないときでも、Processing.jsが弛しめるようになりました。黎ほどと票じように≈Run∽ボタンで木俐が闪けるか活してみてください。

**うまく瓢かないときは [#w787d0dc]

もしもうまく乖かないときは、ダウンロ〖ドしたProcessing.jsのバ〖ジョンを澄千してください。海搀は、≈processing-js-1.2.0.zip∽を鳞年しています。これとは般うバ〖ジョンの眷圭、htmlファイルの办婶を肌のようにして今き垂えます。

+≈edit.html∽を宝クリック->≈试礁∽
+HTMLファイルの面咳がテキストファイルとして山绩されたら、6乖誊にある≈processing-js-1.2.0.js∽を极尸の掐缄したバ〖ジョンに圭わせて今き垂える。

*喇蔡を给倡するには [#p2c8bc3e]

Processing.jsは、JavaScriptをベ〖スにWebブラウザで瓢侯するので、プログラミングの喇蔡を给倡するには、Webサイトに给倡するのが紊いでしょう。

Webペ〖ジに给倡するには、肌のデ〖タを脱罢します。

-Proseccing.js塑挛
-プログラムコ〖ド
-HTMLファイル

数及としては、HTMLファイルにコ〖ドを虽め哈んでしまう数恕と、侍のコ〖ドファイルを钙び叫す数恕があります。涟荚の≈HTMLファイルにコ〖ドを虽め哈む∽数及は、帽姐な没いコ〖ドのときに铜跟です。稿荚の≈侍のコ〖ドファイルを钙び叫す∽数及は、警しややこしいプログラムのときに舔惟ちます。肆片の≈Boid:瓢湿の凡シミュレ〖ション∽は、稿荚の数恕で侯ってあります。

**HTMLファイルにコ〖ドを虽め哈む [#r6d60959]

まず、HTMLファイルにプログラムコ〖ドを链婶虽め哈むとこんな炊じになります。Proseccing.js塑挛は、票じフォルダに芹弥します。

サンプルを斧る′′[[HTMLファイルにコ〖ドを虽め哈む:http://www.catch.jp/program/processing.js/sample10/]]

<html>
     <head>
        <script src="processing-1.2.1.js">
        </script>
        <script>
          window.onload = function(){
            // canvas妥燎
            var canvas = document.getElementsByTagName('canvas')[0];
            // Proccessingのコ〖ドが今かれたscript妥燎
            var codeElm = document.getElementById('processing-code');
            // 惧淡妥燎の柒推を艰评
            var code = codeElm.textContent || codeElm.innerText;
 
            new Processing(canvas, code);
          };
        </script>
        <script id="processing-code" type="application/processing">
 	     void setup() {
 	       size(250, 250);
 	       frameRate(20);
 	     }
 	     void draw() {
 	       background(0);
 	       ellipse(width/2, height/2, mouseX, mouseY);
 	     }
        </script>      
     </head>
     <body>
 	<canvas width="250" height="250"></canvas>
 	<p>Copyright 2011 Yutaka Kachi Licensed by MIT License<p>
 	<p>Implement by <a href="http://processingjs.org/">Processing.js</a><p>
     </body>
 </html>

このHTMLファイルをよく斧ると、<head>×</head>の面に、<script>×</script>が3つあります。称<script>の舔充は肌のとおりです。

+"src"掳拉でprocessing.jsの疤弥を回年する。
+≈window.onload = function()∽でWebペ〖ジ山绩箕の介袋步を悸乖。
+悸狠に悸乖したいProcessing.jsのコ〖ドを淡揭

ほかの棱汤矢では、2戎誊の介袋步コ〖ドをinit.jsとして嘲婶ファイルに弥いている眷圭があります。

また、<body>×</body>には、肌のような<canvas>タグがあります。

Processing.jsは、ここに悸乖冯蔡を山绩します。

喇蔡を给倡するには、このHTMLファイルとprocessing.js塑挛をWebサ〖バ〖の票办フォルダに芹弥します。

**侍のコ〖ドファイルを钙び叫す [#he791051]

侍のコ〖ドファイルをHTMLファイルから钙び叫す眷圭はこんな炊じになります。ここでもProseccing.js塑挛は、票じフォルダに芹弥します。

サンプルを斧る′′[[侍のコ〖ドファイルを钙び叫す:http://www.catch.jp/program/processing.js/sample20/]]

<html>
     <head>
 	<script src="processing-1.2.1.js">
 	</script>      
     </head>
     <body>
 	<canvas datasrc="sample20.pjs" width="250" height="250"></canvas>
 	<p>Copyright 2011 Yutaka Kachi Licensed by MIT License<p>
 	<p><a href="sample20.pjs">source code</a><p>
 	<p>Implement by <a href="http://processingjs.org/">Processing.js</a><p>
     </body>
 </html>

このHTMLファイルでは、<head>×</head>の面に、<script>×</script>が1つだけあり、ここの"src"掳拉でprocessing.jsの疤弥を回年しています。

そして、<body>×</body>には、肌のような<canvas>タグがあり、ここの"datasrc"掳拉で、钙叫したいコ〖ドファイルを回年しています。コ〖ドファイルの橙磨灰は、≈*.pde∽か≈*.pjs∽です。侯喇するには、テキストファイルとして淡揭して、橙磨灰を恃构して

喇蔡を给倡するには、このHTMLファイルとコ〖ドファイル、processing.js塑挛をWebサ〖バ〖の票办フォルダに芹弥します。

**jsdo.it [#af2060fb]

javascriptの抨蛊サイト≈jsdo.it∽でもprocessing.jsで抨蛊できました。
给倡されているコ〖ドを傅に猖紊する(fork:晦尸かれ)するのも词帽なので、いろいろ活すのに守网です。

-[[jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/]]
-[[my processing.js test - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/yyycatch/diP5]]
-[[yet another simple boid - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/yyycatch/6b4n]]
-[[processing.js - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/tag/processing.js]]

仓残络柴

-[[processing.js: yet another firework - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/yyycatch/pn2V]]
-[[HTML5 Fireworks - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/event/html5hanabi]]
-[[HTML5仓残络柴をみんなで侯ろう— - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/event/topics/2011/06/hanabi]]

*徊雇 [#nc7b1009]

徊雇となりそうな获瘟です。

**Processing.js [#dfba4d49]

-[[wise9 &#8250; 妈１搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/1743]]
-[[wise9 &#8250; 妈２搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/1878]]
-[[wise9 &#8250; 妈３搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/1925]]
-[[wise9 &#8250; 妈４搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/1943]]
-[[wise9 &#8250; 妈５搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/1992]]
-[[wise9 &#8250; 妈６搀 Processing.js で介めてのゲ〖ムプログラミング:http://wise9.jp/archives/2092]]

-[[ブラウザでお敞闪きプログラミング— Processing.js 判眷— - IT里淡:http://d.hatena.ne.jp/amachang/20080509/1210355674]]
-[[Processing.jsで蝶の凡れシミュレ〖ション - もやし泣淡:http://d.hatena.ne.jp/p4life/20080512/1210568035]]
-[[Processing.jsの蝗い数 - Irrational Exuberance:http://lethain.com/processing-js-no-tsukaikata/]]

-[[iPadに滦炳したProcessing.js≈pjs4iPad∽ - MOONGIFT:http://www.moongift.jp/2010/04/pjs4ipad/]]
-[[Processing.js で湿妄シミュレ〖ション - Usipedia:http://usi3.com/index.php?title=Processing.js_%E3%81%A7%E7%89%A9%E7%90%86%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3]]

-[[Processing.js:http://processingjs.org/]]
-[[光刨な山附蜗を悸附したJavaScriptフレ〖ムワ〖ク≈toxiclibs.js∽ - MOONGIFT:https://www.moongift.jp/2011/12/20111228-2/]]

-[[Education/Projects/ProcessingForTheWeb - MozillaWiki:https://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb]]

**JavaScript [#z3e30f07]

-[[いまさら使けないJavaScript掐嚏∈1/3∷ - △IT:http://www.atmarkit.co.jp/fwcr/rensai/imasara02/imasara02_1.html]]
-[[糠JavaScript掐嚏:http://homepage3.nifty.com/aya_js/js2/js2_frm.htm]]

-[[JavaScript答塑车前呵庐マスタ〖 - TechTalkManiacs:http://d.hatena.ne.jp/kagigotonet/20100202/1265080352]]
-[[JavaScript答撩矢恕呵庐マスタ〖 - なんとなく誊淡:http://d.hatena.ne.jp/gifnksm/20100131/1264934942]]
-[[JavaScript掐嚏:http://www.pori2.net/js/]]
-[[とほほのJavaScriptリファレンス:http://www.tohoho-web.com/js/index.htm]]
-[[JavaScript掐嚏:http://www.ajaxtower.jp/js/]]
-[[JavaScriptの∩this∩をめぐる肆副 |:http://hdemon.net/archives/727]]

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

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

&ref(boid.png);

この淡祸は、そんなProcessing.jsの词帽な掐嚏淡祸です。黎に今いた[[Processing答撩呵庐掐嚏]]の恍隋试になります。

2011-06-06:Processing-1.2.1.js で瓢侯澄千しています。

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

#htmlinsert(processing.html)

誊肌

#contents

*とりあえずサンプルを斧る [#yf2e248a]

まずは、悸狠に瓢いているところを斧てみましょう。

**瓢湿の凡シミュレ〖ション [#q4f59d84]

#ref(boid.png)

サンプルを斧る′′[[boid:http://www.catch.jp/program/processing.js/boid/]]

processing.jsを蝗うと、こういうのを极尸で侯ることができるようになります。

**いろいろなサンプル [#rfa0d3f7]

このほかにも、いろいろとスゴイ悸毋があります。

#ref(samples.png)

**瓢侯茨董の澄千 [#k55b70ec]

うまく瓢かない眷圭は、瓢侯茨董を澄千しましょう。

肌のような、HTML5に滦炳しているWebブラウザが涩妥です。

-Firefox
-Safari
-Goolge Chrome
-Opera
-Internet Explorer 9

Webブラウザの硷梧とバ〖ジョンを澄千してください。

*とにかく幌める [#w6040756]

どんなものが侯れるのか尸かったら、玲庐侯ってみましょう。

**极尸でプログラムを今いてみる [#h6ef4b88]

では、呵も帽姐なプログラムで极尸なりに词帽に饯赖してみましょう。呵介は、こんな炊じです。

+[[Processing.jsの锡浆眷:http://www.catch.jp/program/processing.js/edit/]]
+≈Run∽ボタンをクリック

煌逞の面に木俐が苞かれましたね。

#ref(sandbox.png)

宝の煌逞いスペ〖スには、肌の办矢が今いてあります。

line(0, 0, 100, 100);

これが、Processing.jsのプログラムコ〖ドです(维して、コ〖ドと钙びます)。ここでは、郝筛(0,0)から郝筛(100,100)まで木俐(line)を闪きました。

それでは、このコ〖ドを肌のように饯赖してみてください。呵稿の眶猛を100から50に恃えます。

line(0, 0, 100, 50);

これで、木俐の疤弥が恃わりましたね。

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

では、木俐笆嘲のものも闪いてみましょう。まず黎ほどの木俐ですが、もう办刨斧木してみましょう。

+[[Processing.jsの锡浆眷:http://www.catch.jp/program/processing.js/edit/]]

line(0,0,100,100);

では、肌はこれを闪いてみましょう。

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

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

&ref(circle.png);

Sizeのカッコ柒は、闪茶挝拌のサイズを玻升(width)と侥升(height)の界に回年します。

ellipseのカッコの面は、闪く率边の疤弥とサイズを肌の界に回年します。

ellipse(x, y, width, height);

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

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

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

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

&ref(elipse_anime.png);

サンプル ′ [[mouse_move:http://www.catch.jp/program/processing.js/mouse_move/]]

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

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

**Priocessing.jsの炭吾を拇べる [#k3b07d22]

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

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

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

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

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

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

&ref(Processing答撩呵庐掐嚏/dimension.png);

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

size(250, 250);

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

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

&ref(lines.png);

サンプル ′ [[lines:http://www.catch.jp/program/processing.js/lines/]]

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

サンプル ′ [[mouse_move:http://www.catch.jp/program/processing.js/mouse_move/]]

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

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

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

void draw() {
   //background(0);
   ellipse(width/2, height/2, mouseX, mouseY);
 }

&ref(elipse_anime2.png);

サンプル ′ [[脚ねて闪く:http://www.catch.jp/program/processing.js/mouse_move2/]]

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

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

恃构涟

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

恃构稿

ellipse(mouseX, mouseY, 10, 10);

&ref(elipse_anime3.png);

サンプル [[マウスの疤弥に闪く:http://www.catch.jp/program/processing.js/mouse_move3/]]

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

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

&ref(elipse_anime4.png);

サンプル [[クリックしたときだけ闪く:http://www.catch.jp/program/processing.js/mouse_move4/]]

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

*咖を回年する [#ocf6eb0c]

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

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

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

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

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);

サンプル ′ [[秦肥咖を球咖にする:http://www.catch.jp/program/processing.js/color_back_white/]]

Processing.jsでは、このように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.js/color_back_mouse/]]

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]

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.js/color_line_mouse/]]

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

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

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

&ref(color_back_fade.png);

サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:http://www.catch.jp/program/processing.js/color_back_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.js/letters/]]

**答塑妨 [#xe01c874]

こんな炊じ

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

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

&ref(test_letters.png);

サンプル [[test_letters:http://www.catch.jp/program/processing.js/letters_test/]]

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]

2012-10 泣塑胳フォントを回年する数恕を纳淡。

フォント叹は、毖胳叹で回年する。

汤墨なら≈serif∽、ゴシックなら≈sans-serif∽。

fill(0);
 
 PFont fontA = loadFont("serif");
 textFont(fontA, 18);
 text("あいうえお", 10, 30);
 
 PFont fontB = loadFont("sans-serif");
 textFont(fontB, 18);
 text("かきくけこ", 10, 60);

-[[徊雇_words-demo:http://processingjs.org/learning/basic/words/]]

// &ref(letters_font.png);

//サンプル [[フォントを回年する:http://www.catch.jp/program/processing.js/letters_font/]]

ProcessingとProcessing.jsは、矢恕がほとんど票じなので、徊雇になると蛔います。

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

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

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

&ref(bounce_ball_1.png);

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

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

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

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

&ref(bounce_balls.png);

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

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

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

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

&ref(push_balls.png);

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

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

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

**瓢湿の凡れ [#l538b340]

肆片でも疽拆したboidで、瓢湿の凡のような瓢きを浩附してみました。

&ref(boid.png);

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

**仓残 [#x54b8158]

jsdo.itに抨蛊したもの。

-[[processing.js: yet another firework - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/yyycatch/pn2V]]

*茶咙ファイルの山绩 [#k4a34ac4]

//茶咙を山绩
 /* @pjs preload="sora-mame.png"; */
 size(300,300);
 PImage b;
 b = loadImage('sora-mame.png');
 image(b,0,0);

*极尸のパソコンに茨董を侯るには [#r8cd4d68]

**茨董の侯り数 [#n6f4c143]

そこで、肌のようにしてProessing.jsをダウンロ〖ドしておきましょう。

1.笆布にアクセスして、呵糠の≈Zipped Source∽をダウンロ〖ドする

-http://processingjs.org/download
-(毋¨processing-js-1.2.0.zip)

2.ファイルを豺培する

3.布淡の试礁脱HTMLファイル(edit.html)を、宝クリック->≈叹涟を烧けてリンク黎を瘦赂∽

#ref(edit.html)

4.瘦赂した≈edit.htm∽lファイルを、Processing.jsを豺培したフォルダに庶り哈む

5.その≈edit.html∽をダブルクリック

**うまく瓢かないときは [#w787d0dc]

*喇蔡を给倡するには [#p2c8bc3e]

Processing.jsは、JavaScriptをベ〖スにWebブラウザで瓢侯するので、プログラミングの喇蔡を给倡するには、Webサイトに给倡するのが紊いでしょう。

Webペ〖ジに给倡するには、肌のデ〖タを脱罢します。

-Proseccing.js塑挛
-プログラムコ〖ド
-HTMLファイル

**HTMLファイルにコ〖ドを虽め哈む [#r6d60959]

まず、HTMLファイルにプログラムコ〖ドを链婶虽め哈むとこんな炊じになります。Proseccing.js塑挛は、票じフォルダに芹弥します。

サンプルを斧る′′[[HTMLファイルにコ〖ドを虽め哈む:http://www.catch.jp/program/processing.js/sample10/]]

このHTMLファイルをよく斧ると、<head>×</head>の面に、<script>×</script>が3つあります。称<script>の舔充は肌のとおりです。

+"src"掳拉でprocessing.jsの疤弥を回年する。
+≈window.onload = function()∽でWebペ〖ジ山绩箕の介袋步を悸乖。
+悸狠に悸乖したいProcessing.jsのコ〖ドを淡揭

ほかの棱汤矢では、2戎誊の介袋步コ〖ドをinit.jsとして嘲婶ファイルに弥いている眷圭があります。

また、<body>×</body>には、肌のような<canvas>タグがあります。

Processing.jsは、ここに悸乖冯蔡を山绩します。

喇蔡を给倡するには、このHTMLファイルとprocessing.js塑挛をWebサ〖バ〖の票办フォルダに芹弥します。

**侍のコ〖ドファイルを钙び叫す [#he791051]

侍のコ〖ドファイルをHTMLファイルから钙び叫す眷圭はこんな炊じになります。ここでもProseccing.js塑挛は、票じフォルダに芹弥します。

サンプルを斧る′′[[侍のコ〖ドファイルを钙び叫す:http://www.catch.jp/program/processing.js/sample20/]]

このHTMLファイルでは、<head>×</head>の面に、<script>×</script>が1つだけあり、ここの"src"掳拉でprocessing.jsの疤弥を回年しています。

喇蔡を给倡するには、このHTMLファイルとコ〖ドファイル、processing.js塑挛をWebサ〖バ〖の票办フォルダに芹弥します。

**jsdo.it [#af2060fb]

仓残络柴

*徊雇 [#nc7b1009]

徊雇となりそうな获瘟です。

**Processing.js [#dfba4d49]

-[[Processing.js:http://processingjs.org/]]
-[[光刨な山附蜗を悸附したJavaScriptフレ〖ムワ〖ク≈toxiclibs.js∽ - MOONGIFT:https://www.moongift.jp/2011/12/20111228-2/]]

-[[Education/Projects/ProcessingForTheWeb - MozillaWiki:https://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb]]

**JavaScript [#z3e30f07]

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

Processing.js答撩呵庐掐嚏 の试礁

Processing.js答撩呵庐掐嚏の试礁