SoraMame.ps.js/掐嚏/introduction のバックアップの附哼との汗尸(No.1)

バックアップ办枉
汗尸を山绩
ソ〖スを山绩
SoraMame.ps.js/掐嚏/introduction へ乖く。
- 1 (2012-12-07 (垛) 09:25:42)
纳裁された乖はこの咖です。
猴近された乖はこの咖です。
#title(Processingのスケッチを、泣塑胳っぽいプログラミング咐胳で侯る)

''この淡祸は、[[Processing Advent Calendar 2012:http://atnd.org/events/33755]]の7泣誊の徊裁淡祸です—''

[[http://farm3.staticflickr.com/2417/2113974300_44cd054732.jpg:http://www.flickr.com/photos/alicepopkorn/2113974300/]]
[[http://farm3.staticflickr.com/2417/2113974300_44cd054732.jpg]]

[[By AlicePopkorn CC BY 2.0:http://www.flickr.com/photos/alicepopkorn/2113974300/]]

&color(white){line};

Processing(プロセッシング)を蝗ったプログラミングは、とっても弛しいですよね—

だけど、たまにしか蝗わないホビ〖プログラマ〖には、脚络な啼玛があります。

それは、すぐに炭吾とか撕れてしまうこと。

髓搀、マニュアルや豺棱今を粕まないとプログラムを侯れない、

そういう客もけっこういると蛔うのです。

&color(white){line};

''じつは、讳もそうなんです。''

&color(white){line};

Processingは、兜伴やビジュアルア〖トの尸填で坤肠面で蝗われていて、

とっても词帽にプログラムを幌めることができるヨ、と

まわりにすすめてみても

コンピュ〖タに捶れていない客からは、

≈プログラムなんて—∽と雕冷されたり

好擂されてしてしまった客もいるんじゃないかな。

&color(white){line};

そこで海搀、疽拆したいのが、

''泣塑胳っぽいプログラミング咐胳≈[[そら痞スクリプト>SoraMame.ps.js]]∽''です。

泣塑胳っぽいコ〖ドを、Processing.jsに恃垂して悸乖します。

&color(white){line};

というわけで、この淡祸では、

この泣塑胳っぽいプログラミング咐胳≈そら痞スクリプト∽を词帽に疽拆します。

&color(white){line};

#contents

*そら痞スクリプトとは [#q20cd6d1]

泣塑胳っぽいプログラミング咐胳で今いたコ〖ドは、とっても粕みやすい。

だから、髓搀、マニュアルを粕み木さなくても、

炭吾の罢蹋やコ〖ドの罢哭を蛔い叫すことができます。

ほかの客のコ〖ドを浩网脱したり、

极尸极咳で猖紊するときにも守网ですよ。

&color(white){line};

≈そら痞スクリプト∽は、

泣塑胳っぽいコトバでプログラムを今いて、

それをProcessing.jsに恃垂して悸乖します。

だから、パソコンだけじゃなくスマ〖トフォンやタブレットで、

Webブラウザがあれば瓢かすことができます。

それに、恃垂されたコ〖ドは、Processing茨董惧にコピペしても瓢侯します。

&color(white){line};

经丸は、ArudinoやKinectのような

ハ〖ドウェア扩告もできるようになる(かもしれません)。

*そら痞スクリプトを活してみよう [#vbad3030]

まずは、そら痞スクリプトを悸狠に活してみましょう。

**デモプログラム [#p2d88d1e]

&color(white){line};

脱罢するのは、パソコンかスマ〖トフォンˇタブレットだけ。

パソコンの眷圭は、呵糠のWebブラウザを脱罢してね。

そしたら、そら痞スクリプトのデモプログラムをいくつか活してみましょう。

肌のような、玻スクロ〖ル房シュ〖ティングもどきや、瓢湿の凡れをシミュレ〖ション、3Dデモなどがあります。

斧てみたいデモプログラムのペ〖ジに败瓢したら、≈うごかす∽ボタンを病してみましょう。

-[[玻スクロ〖ルシュ〖ティングもどき:http://www.catch.jp/program/soramame/sample/demos/space_tunnel.html]]∈あたり冉年なし∷

[[http://www.catch.jp/program/soramame/sample/images/demo_space_tunnel.png:http://www.catch.jp/program/soramame/sample/demos/space_tunnel.html]]

-[[瓢湿シミュレ〖ション(ボイド):http://www.catch.jp/program/soramame/sample/demos/boid.html]]

[[http://www.catch.jp/program/soramame/sample/images/sample_20.png:http://www.catch.jp/program/soramame/sample/demos/boid.html]]

-[[デモ¨ちょっとスタイリッシュになった概诺弄なスペ〖スワ〖プ:http://www.catch.jp/program/soramame/sample/demos/space_warp.html]]

[[http://www.catch.jp/program/soramame/sample/images/demo_space_warp.png>http://www.catch.jp/program/soramame/sample/demos/space_warp.html]]

-[[デモ¨3Dでハコがグルグルまわります:http://www.catch.jp/program/soramame/sample/demos/matrix_box.html]]∈WebGL茨董か、いいグラフィックカ〖ドが涩妥です∷

[[http://www.catch.jp/program/soramame/sample/images/demo_matrix_box.png>http://www.catch.jp/program/soramame/sample/demos/matrix_box.html]]


このほか、サンプル礁ペ〖ジもあるので、のぞいてみてください。

-[[そら痞スクリプト サンプル礁ペ〖ジ>SoraMame.ps.js/Samples]]

&color(white){line};

≈うごかす∽ボタンを病したら、ほら、プログラムがうごきだしたでしょ。

&color(white){line};

宝に山绩されている泣塑胳っぽい矢が、そら痞スクリプトの"コ〖ド"です。

プログラムは、このコ〖ドどおりに瓢侯します。

茶烫の布には、恃垂されたProcessingコ〖ドが山绩されています。

これをコピ〖□ペ〖ストすれば、Processing茨董でも、コ〖ドを瓢かすことができます。

#ref(soramame_s.png)

**そら痞スクリプトのコ〖ドを斧てみよう [#vf11c894]

そら痞スクリプトの矢恕の史跋丹を炊じるために、

すこしだけプログラムを猖紊してみましょう。

まず、猖紊する涟のプログラムを斧てみましょう。

-[[サンプルコ〖ド:http://www.catch.jp/program/soramame/SoraMame_Script.html]]

[[http://www.catch.jp/wiki/index.php?plugin=ref&page=SoraMame.ps.js&src=mouse_move.png:http://www.catch.jp/program/soramame/SoraMame_Script.html]]

これは、マウスの瓢きにあわせて、マルを闪くプログラムです。

&color(white){line};

さきほどと票じように≈うごかす∽ボタンをクリックしたら、

悸乖エリアでマウスを瓢かしてみましょう。

ちょっとしたお敞かきソフトみたいですね。

&color(white){line};

さて、このプログラムの悸狠のコ〖ドは、たったこれだけ。

すごく没いでしょ。

 //マウスの疤弥にマルを闪く
 ---介袋肋年する{
   {升:250, 光さ:250}のサイズ
 }
 
 ---くり手し闪茶する{
   {x:@マウスX, y:@マウスY}に{升:50, 光さ:50}のマル
 }

泣塑胳っぽく今いてあるので、

どこで部をしているか、

なんとなく词帽にわかりそうな丹がしませんか。

それによく斧ると、Processingのコ〖ドとほとんど菇喇が票じなのがわかるでしょ。

**プログラムを猖紊しよう [#nfe066f9]

じゃあ、このプログラムを猖紊してみましょう。

&color(white){line};

ずばり、肌のように今いてある乖が、マルを闪くところ。

 {x:@マウスX, y:@マウスY}に{升:50, 光さ:50}のマル

これを、こんなふうに恃えてみましょう。

 {x:@マウスX, y:@マウスY}に{升:50, 光さ:50}のシカク

乖琐にある≈マル∽を、≈シカク∽に恃えただけだ。

&color(white){line};

これで、もう办刨≈うごかす∽ボタンを病すと、

ほら、マウスの瓢きにあわせてシカクが闪かれるようになりました。

#ref(http://www.catch.jp/wiki/index.php?plugin=ref&page=SoraMame.ps.js&src=mouse_move2.png)

さらに、肌のように今きなおすと、シカクのサイズを恃えることができます。

 {x:@マウスX, y:@マウスY}に{升:100, 光さ:100}のシカク

これも、ぜひ悸狠に、活してみてください—

コ〖ドが泣塑胳っぽくなっていると、どこをどのように木すか、悄爱するも词帽じゃないかな。

*そら痞スクリプトの泼魔弄なところ [#ic790549]

では、≈そら痞スクリプト∽の泼魔弄なところを、いくつか疽拆しましょう。

**泣塑胳っぽいコ〖ドは、塑碰に粕みやすいの々 [#z87604f8]

泣塑胳っぽいコ〖ドは、塑碰に粕みやすんでしょうか々

坤の面には、泣塑胳及のプログラミング咐胳はあまり舍第していないし。

そんな悼啼を积つもの、もっともですね。

&color(white){line};

そこで、肌の2つのコ〖ドを斧くらべてみましょう。

どちらも、マウスの疤弥にマルを闪くコ〖ドです。

 ellipse(mouseX,mouseY,50,50); 
 
 {x:@マウスX, y:@マウスY}に{升:50, 光さ:50}のマル  

惧が、≈Processing∽≈Processing.js∽のコ〖ド。

布が、そら痞スクリプトのコ〖ドです。

&color(white){line};

≈Processing∽を梦らない客でも、≈そら痞スクリプト∽のほうは、

なんとなく罢蹋が尸かると蛔うんですがいかがでしょう。

&color(white){line};

Processingになれている客でも、泣塑胳寒じりのコ〖ドの数が、

パッと誊に若び哈んできて、罢蹋が悄爱できる炊じがしないかな。

**そら痞スクリプトは、苞眶に叹涟がついています [#e6238720]

じつは、≈そら痞スクリプト∽とProcessingにはもうひとつ般いがあります。

コ〖ドが泣塑胳っぽくなっているだけじゃなく、苞眶に叹涟がついていること。

&color(white){line};

Processingは、苞眶の界戎で、その舔充が疯まっていますよね。

たとえば、1戎誊がX郝筛、2戎誊がY郝筛、3戎誊がマルの玻升、という恶圭です。

だから、苞眶の界戎まで梦らないと、コ〖ドの罢蹋がわかりません。

コ〖ドを粕んだだけでは、その苞眶がどんな舔充をするのか妄豺できないのです。

でも、苞眶界なんて、なかなか承えられないから、

やっぱりマニュアルを粕んだり、コ〖ド输窗に完ることになるんです。

&color(white){line};

これに滦して≈そら痞スクリプト∽では、

≈{x:   , y:     }∽とか≈升:   , 光さ:     }∽というように

苞眶に叹涟をつけるので、その罢蹋するところは汤谗でしょ。

**泣塑胳だと、コマンドもわかりやすい承えやすい [#pb86ee02]

ちなみに、惧のコ〖ドで叫てくる≈ellipse∽とは、

毖胳で≈率边∽のこと。

みんな、そんな毖帽胳、梦ってました々

&color(white){line};

''讳は梦らなかったし、どうしても承えられない。''

&color(white){line};

Processingを蝗っている粗は、しばらく承えていられるけど

蝗うのをやめると、やっぱり撕れてしまいます。

&color(white){line};

といっても、こういうのはProcessingだけの厦じゃなくて、

毖帽胳をベ〖スにするプログラミング咐胳のほとんどすべてが、こんなふうだと蛔う。

&color(white){line};

それに、承えられないといっても、Processingは、

とてもシンプルで蝗いやすい庭れたプログラミング咐胳だと蛔います。

すぐに蝗い幌められて、インパクトのある跟蔡を评られるからね。

はじめてプログラミングを承えるには、呵努な数恕のひとつだと蛔います。

悸狠に、泣塑でも坤肠でも络池のプログラミング悸浆に、升弓く蝗われているみたいだし。

&color(white){line};

だけど、毖胳になれている客がProcessingを蝗い幌めるのと、

毖胳になれていない驴くの泣塑客がProcessingを蝗うのは、

ちょっと炊承が般うんじゃないかと讳は蛔います。

なぜなら、毖胳になれていない客は、

Processingなどのプログラミング咐胳を、

ほとんど罢蹋のない淡规として千急してしまうからです。

これは、黎ほどProcessingとそら痞スクリプトのコ〖ドを斧孺べたとき、

极尸でも悸炊できたんんじゃないかと蛔います。

&color(white){line};

そら痞スクリプトは、はじめて斧た客でも粕んですぐに罢蹋がわかるけど、

Processingは、そんな炊じはしないでしょ。

だから、泣塑胳っぽいプログラミング咐胳になっているProcessingがあれば、

もっとプログラミングは承えやすくなるはずです。

**そら痞スクリプトの矢恕 [#gc85df5c]

ちなみに、そら痞スクリプトの炭吾矢は、こんな菇喇になっています。

 {苞眶叹:苞眶猛1, 苞眶叹:苞眶猛2,ˇˇˇ}(锦混){苞眶叹:苞眶猛3, ˇˇˇ}(锦混)炭吾胳

これが、Processingでは、肌のように滦炳する炭吾矢に恃垂されます。

 炭吾胳(苞眶1, 苞眶2, 苞眶3ˇˇˇ)

&color(white){line};

そら痞スクリプトの苞眶の界戎は、Processingと票じになっています。

じつのところ、苞眶叹は、矢恕弄には泼に年盗されていません。

锦混も、回年のひらがな办矢机であれば、ほとんどの眷圭なにを蝗ってもいいんです。

苞眶叹と锦混の攫鼠は、恃垂箕に嘉ててしまいます。

だから、苞眶叹も锦混も、コ〖ドに虽めこまれたコメントみたいなもの

だと雇えると紊いかもしれません。

&color(white){line};

えっ々 コ〖ドが鹃墓すぎて、掐蜗するのが烫泡だって。

それは、サンプルコ〖ドをコピペすれば豺疯すると蛔うんだけど、どうでしょう。

プログラミングするとき、まずは缄ごろなサンプルコ〖ドを

ひろってくることが驴いんじゃないかな。

とくに、介看荚の眷圭は、そうだよね。

&color(white){line};

そら痞スクリプトのように、苞眶に叹涟がついていれば、

いちいちマニュアルを拇べなくても、

コ〖ドの罢蹋するところは、ずっとわかりやすくなります。

コピペしたいサンプルコ〖ドの舔充も、すばやく悄爱できるんです。

プログラムを今く娄も、コ〖ドの玻に、泣塑胳でコメントを烧けるなんてことは

もう涩妥ありません—

*そら痞スクリプトの呵络の煎爬は [#df9e75a0]

2012钳の5奉に≈そら痞スクリプト∽の倡券をはじめて、

ようやく、それらしいデモプログラムを疽拆できるようになってきました。

とりあえず、いまは词帽なプログラムを侯ることができる觉轮です。

&color(white){line};

草玛は、いろいろあるけれど、

&color(white){line};

''办戎の啼玛は、讳笆嘲にユ〖ザ〖がいないこと(拘)。''

&color(white){line};

''これは、マズイ。''

&color(white){line};

''ひじょうにマズイ。''

&color(white){line};

だから、そら痞スクリプトを活しに蝗ってくれる客を、冷豢ダイダイ淑礁面です—

&color(white){line};

ほかにも、まだProcessingの炭吾を链婶サポ〖トしていないとか

ドキュメントが今きかけとか、

いくつかバグもあるとか、

いろいろ啼玛はあるけれど、

ユ〖ザ〖が赂哼しないのが办戎络きなハ〖ドルです。

&color(white){line};

''まずは、そこをクリアしなくちゃいけません。''

&color(white){line};

ご督蹋をお积ちでしたら、ぜひ、チュ〖トリアルを粕んでみてください。

そして、なにか侯ってみてください。

海までに侯ったProcessingのスケッチを、

そら痞スクリプトで今き木してみるというのもいいかも梦れません。

そうすれば、泣塑胳っぽいプログラミング咐胳の耙蜗を删擦できるでしょう。

&color(white){line};

もしよろしければ、どんなものを侯ったか兜えてください。

おもしろそうなプログラムは、どんどんデモに非很したいと蛔っています。

もしも、まだ≈そら痞スクリプト∽が涩妥な炭吾をサポ〖トしていなくても、

1乖今き垂えるだけで纳裁できます。

拒しくは、[[矢恕と今き数>SoraMame.ps.js/Syntax_Style]]を徊救ください。

&color(white){line};

-[[泣塑胳っぽいプログラミング咐胳 そら痞スクリプト 给及ペ〖ジ>SoraMame.ps.js]]

-[[そら痞スクリプト掐嚏>SoraMame.ps.js/掐嚏]]
-[[矢恕と今き数>SoraMame.ps.js/Syntax_Style]]
-[[コマンドリファレンス:https://github.com/ycatch/SoraMame.ps.js/wiki]]

ちなみに、そら痞スクリプト极挛は、Javascriptで倡券している、

オ〖プンソ〖スソフトウェア(MITライセンス)です。

*今いた客 [#cf2e7154]

材梦 谁　[[@y_catch:https://twitter.com/y_catch]]、[[facebbook:http://www.facebook.com/yutaka.kachi]]

傅テクニカルライタ〖で、40册ぎのIT废弓桂舶。

ふつうの客よりは、泣塑胳を今くのは捶れているかも梦れないけれど

矢鞠蜗も祷窖蜗も面庞染眉です。

なのに、そら痞スクリプトなんてものを侯り幌めてしまいました。

&color(white){line};

呵夺は、コンピュ〖タ簇犯で拇べ湿をしたときは、

Wikiにそれなりの攫鼠を荒すようにしています。

笆涟に、ProcessingとProcessing.jsについて拇べたときも、豺棱矢を今いていて、

それが呵夺、Google浮瑚で惧疤に山绩されるようになって、ちょっとびびっています。

-[[Processing答撩呵庐掐嚏]]
-[[Processing.js答撩呵庐掐嚏]]