簇息¨[[p5.js]]、[[泣塑胳っぽいプログラミング咐胳そら痞ス...
&ref(boid.png);
Processing.jsは、ビジュアルデザイン脱プログラミング咐胳の...
この淡祸は、そんなProcessing.jsの词帽な掐嚏淡祸です。黎に...
塑淡祸の滦据粕荚は、答塑弄にまるでプログラミング挛赋のな...
2011-06-06:Processing-1.2.1.js で瓢侯澄千しています。
''[[↑なんと、泣塑胳っぽいコ〖ドをProcessingのスケッチに恃...
~
#htmlinsert(processing.html)
~
誊肌
#contents
*とりあえずサンプルを斧る [#yf2e248a]
まずは、悸狠に瓢いているところを斧てみましょう。
**瓢湿の凡シミュレ〖ション [#q4f59d84]
これは、瓢湿の凡っぽく瓢くシミュレ〖ションで、Boidと钙ば...
#ref(boid.png)
サンプルを斧る′′[[boid:http://www.catch.jp/program/proc...
processing.jsを蝗うと、こういうのを极尸で侯ることができる...
**いろいろなサンプル [#rfa0d3f7]
このほかにも、いろいろとスゴイ悸毋があります。
#ref(samples.png)
-[[Abstract01js:http://mariuswatz.com/works/abstract01js/...
-[[BallDroppings instructions:http://balldroppings.com/js...
-[[A Mouse-driven Graphic Equalizer:http://bocoup.com/pro...
-[[UI Dial with Snaps:http://bocoup.com/processing-js/doc...
-[[Processing.js给及サイトExhibition:http://processingjs....
-[[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/proc...
+≈Run∽ボタンをクリック
煌逞の面に木俐が苞かれましたね。
#ref(sandbox.png)
宝の煌逞いスペ〖スには、肌の办矢が今いてあります。
line(0, 0, 100, 100);
これが、Processing.jsのプログラムコ〖ドです(维して、コ〖...
それでは、このコ〖ドを肌のように饯赖してみてください。呵...
line(0, 0, 100, 50);
これで、木俐の疤弥が恃わりましたね。
Processing.jsなどのプログラミング咐胳の驴くは、こんな炊じ...
**とりあえず敞を闪く [#y707f687]
では、木俐笆嘲のものも闪いてみましょう。まず黎ほどの木俐...
+[[Processing.jsの锡浆眷:http://www.catch.jp/program/proc...
line(0,0,100,100);
これで、焊惧から宝布に木俐(Line)を闪きました。カッコ柒は...
では、肌はこれを闪いてみましょう。
size(250, 250);
ellipse(120,120,80,80);
闪茶ウィンドウのサイズ(Size)を恃构して、そこに边(ellipse:...
&ref(circle.png);
Sizeのカッコ柒は、闪茶挝拌のサイズを玻升(width)と侥升(hei...
ellipseのカッコの面は、闪く率边の疤弥とサイズを肌の界に回...
ellipse(x, y, width, height);
-x=面看の玻の疤弥
-y=面看の侥の疤弥
-width=率边の玻升
-height=率边の侥升
ちなみにProcessing.jsでは、コ〖ドが2乖笆惧あると惧から界...
ま、ここまでは票じ敞を闪くだけなので、プログラムとしては...
**いよいよアニメ〖ション [#vb0a7061]
海刨は、マウスの瓢きに圭わせて、闪く敞を恃えてみましょう...
&ref(elipse_anime.png);
サンプル ′ [[mouse_move:http://www.catch.jp/program/proc...
笆布のコ〖ドを掐蜗してみてください。
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
プログラムは络きく企つの婶尸に尸かれていて、涟染が≈void ...
涟染の≈void setup()∽が、アニメ〖ションの介袋肋年です。s...
稿染の≈void draw()∽は、アニメ〖ションの帆り手し肋年です...
**Priocessing.jsの炭吾を拇べる [#k3b07d22]
Processing.jsは、lineやellipseなどの炭吾(コマンド)を寥み...
称炭吾の蝗い数を拇べるには、Processing.js给及サイトの[[Re...
毖胳で今いてあるので粕みにくいですが、妨及が办年なので、...
警し攫鼠が概いかも梦れませんが、Processingの泣塑胳惹リフ...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
*郝筛の回年数恕 [#m8c6a497]
ProcessingやProcessing.jsのようにプログラムで敞を闪くには...
さて、Processing.jsで敞を闪くとき、その疤弥を2つの猛から...
&ref(Processing答撩呵庐掐嚏/dimension.png);
面池够あたりの眶池に判眷するグラフは、X即とY即の木蛤郝筛...
玻即をX即、侥即をY即と钙び、この企つの即が木逞に蛤わって...
X即とY即の木蛤するところ(0,0)は、付爬と钙ばれました。
木蛤郝筛惧の、とある爬の郝筛は、付爬からX即惧の疤弥aと、...
Processing.jsの郝筛も、これとほぼ票じです。ただ、X即が宝...
たとえば、木俐を闪く眷圭、1つ誊の眉が郝筛(0,0)、もう办つ...
闪茶エリアのサイズは、Size炭吾で、玻升(width)と侥升(heigh...
size(250, 250);
そうすると、附哼の闪茶エリアの络きさは、≈width∽と≈heig...
肌のように淡揭すると、闪茶エリアの滦逞俐を2塑闪きます。
line(0,0,width,height);
line(width,0,0,height);
&ref(lines.png);
サンプル ′ [[lines:http://www.catch.jp/program/processin...
*アニメ〖ションとマウス拎侯 [#ha6b873b]
盖年された敞ばかり闪いていてもつまらないので、また瓢かし...
サンプル ′ [[mouse_move:http://www.catch.jp/program/proc...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
**脚ね派りとコメント矢 [#cf8c0225]
setup() 笆布の{...}の面が弹瓢箕に办搀だけ悸乖されて、draw...
ここで、draw()笆布に≈background(0);∽がありますよね、bac...
ここで、肌のように≈background(0);∽の乖片に≈//∽を纳裁...
void draw() {
//background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
&ref(elipse_anime2.png);
サンプル ′ [[脚ねて闪く:http://www.catch.jp/program/proc...
≈//∽は、コメント矢を山す淡规です。この淡规の宝娄から乖...
海搀は、≈background(0);∽の涟に≈//∽を今いたので、≈bac...
**マウスの疤弥に闪く [#m095f625]
鲁いて、率边を闪く婶尸を肌のように恃构してみましょう。
恃构涟
ellipse(width/2, height/2, mouseX, mouseY);
恃构稿
ellipse(mouseX, mouseY, 10, 10);
恃构涟は、率边の面看をウィンドウの面看に盖年して、率边の...
恃构稿は、率边の面看をマウスの疤弥によって恃えて、率边の...
こうすると、マウスの瓢きに圭わせて、サイズ≈10,10∽の边が...
&ref(elipse_anime3.png);
サンプル [[マウスの疤弥に闪く:http://www.catch.jp/program...
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/p...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
}
void mousePressed() {
ellipse(mouseX, mouseY, 10, 10);
}
≈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/prog...
Processing.jsでは、このように0×255の眶猛で咖を回年します...
**咖の3付咖で回年する [#nad6c624]
でも、これでは乐とか滥は回年できませんね。そこで肌のよう...
background(200,0,0);
Processingでは、咖の3付咖つまり乐(R:Red)、涡(G:Green)、滥...
咖の3付咖数及では、肌のように16渴山淡ができます。これは、...
background(#FFCC00);
では、ひとつだけ炳脱毋を斧てみましょう。肌のプログラムは...
&ref(color_back_mouse.png);
サンプル [[マウスの疤弥で秦肥咖を恃える:http://www.catch....
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://proces...
-[[color() \ Language (API) \ Processing 1.0 (BETA):http:...
**哭妨の咖を恃える [#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:/...
派りつぶし咖を回年する眷圭には、肌のように≈fill∽炭吾で...
fill(255, 0, 0);
炳脱毋として、マウスの疤弥に圭わせて、率边の呜吃咖が恃わ...
&ref(color_line_mouse.png);
サンプル [[マウスの疤弥で呜吃咖を恃える:http://www.catch....
**フェ〖ドアウト [#ja1544d8]
これまでの毋では、秦肥を派りつぶすことで、笆涟に闪いた哭...
そこで、染譬汤な球で茶烫を派りつぶすようにしてみましょう...
肌のサンプルでは、票じ络きさの边をマウスの疤弥に闪いてい...
&ref(color_back_fade.png);
サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:h...
秦肥を派りつぶすかわりにフェ〖ドアウトさせる≈fadeToWhite...
//フェ〖ドアウト
void fadeToWhite() {
noStroke();
fill(255, 30);
rectMode(CORNER);
rect(0, 0, width, height);
}
このテクニックは、[[Built with Processing(Ver 1.x滦炳惹)-...
*矢机の山绩 [#j05ae40a]
咖を恃える肌は、矢机を山绩してみましょう。
&ref(letters.png);
サンプル [[sketch_anime_letters:http://www.catch.jp/progr...
**答塑妨 [#xe01c874]
こんな炊じ
fill(0); //矢机の咖
textSize(24); //矢机のサイズ(ピクセル眶)
text("A",10, 10); //山绩する矢机と疤弥
矢机の咖は、fill炭吾で回年します。矢机のサイズは、ピクセ...
&ref(test_letters.png);
サンプル [[test_letters:http://www.catch.jp/program/proce...
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...
//ⅷ侯喇面 - デモなど赖撅に瓢侯していません。
//フォントを回年するためには、Processingのエディタで、漓...
//フォントデ〖タの侯喇缄界は、
//+≈Tool∽-≈Create Font∽
//+≈Create Font∽ウィンドウが山绩されたら、网脱したいフ...
//+≈OK∽ボタンをクリック
//
//これで、≈マイドキュメント∽->≈Processing∽->≈(プログ...
//
//プログラム面で、フォントを回年するには、肌のように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/progr...
//なお、祸涟にフォントデ〖タを侯っておかなくても网脱でき...
*プログラムによる拎侯 [#e7972263]
肌は、敞を闪くための燎亨(マテリアル)を、どのようにプログ...
とりあえず、肌のようなProcessingの徊雇获瘟を粕んでみてく...
-[[Processing掐嚏怪郝:http://ap.kakoku.net/]]
-[[Processing 池浆ノ〖ト:http://www.d-improvement.jp/lear...
-[[FrontPage - 兜镑のためのプログラミング掐嚏:http://wiki...
ProcessingとProcessing.jsは、矢恕がほとんど票じなので、徊...
*オブジェクトを蝗ったサンプルプログラム [#b337ebe4]
词帽なサンプルをいくつか侯ってみました。
**1改のボ〖ルが、はねかえる [#rc1b5e6f]
&ref(bounce_ball_1.png);
サンプル [[bounce_ball_1:http://www.catch.jp/program/proc...
1改のボ〖ルが、ウィンドウ柒をはね搀ります。Ballオブジェク...
塑碰は、ボ〖ル１改だけならオブジェクトを侯るまでもないの...
**剩眶のボ〖ルが、はねかえる[#k700f4e3]
&ref(bounce_balls.png);
サンプル [[bounce_ball_20:http://www.catch.jp/program/pro...
剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ただし、ボ〖...
Processingに烧掳のExamplesのうち、≈Topics - Motion - Bou...
**咀仆する剩眶のボ〖ル [#a825d5a3]
&ref(push_balls.png);
サンプル [[push_balls:http://www.catch.jp/program/process...
剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ボ〖ル票晃も...
-徊雇¨[[Bubbles:http://dokokano.com/ftlabo/applet/Bubble...
**瓢湿の凡れ [#l538b340]
肆片でも疽拆したboidで、瓢湿の凡のような瓢きを浩附してみ...
&ref(boid.png);
サンプル [[boid:http://www.catch.jp/program/processing.js...
Boid(ボイド、Bird + doid 幕もどき)れは、シンプルな３つの...
-[[ボイド (客供栏炭) - Wikipedia:http://ja.wikipedia.org/...
-[[Boids Test Built with Processing | 鄂篓困咖 | null-nul...
-[[Processing Discourse - Simple Boid Sketch:http://proce...
-[[Processing boid 垛蝶:http://www.tiu.ac.jp/~zohzemi/pro...
-[[ほぼ泣穿イトイ糠使 - がんばれ抗李くんの颁帕灰くん:http...
-[[Boids (Flocks, Herds, and Schools: a Distributed Behav...
**仓残 [#x54b8158]
jsdo.itに抨蛊したもの。
-[[processing.js: yet another firework - jsdo.it - Share ...
*茶咙ファイルの山绩 [#k4a34ac4]
Processing.jsでは、茶咙ファイルを粕み哈むには、それに黎惟...
//茶咙を山绩
/* @pjs preload="sora-mame.png"; */
size(300,300);
PImage b;
b = loadImage('sora-mame.png');
image(b,0,0);
*极尸のパソコンに茨董を侯るには [#r8cd4d68]
Webブラウザから悸乖しても紊いのですが、极尸のパソコンにも...
**茨董の侯り数 [#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∽をダブルクリック
これで、インタ〖ネットに儡鲁していないときでも、Processin...
**うまく瓢かないときは [#w787d0dc]
もしもうまく乖かないときは、ダウンロ〖ドしたProcessing.js...
+≈edit.html∽を宝クリック->≈试礁∽
+HTMLファイルの面咳がテキストファイルとして山绩されたら、...
<script type="text/javascript" src="../js/processing-1.2...
*喇蔡を给倡するには [#p2c8bc3e]
Processing.jsは、JavaScriptをベ〖スにWebブラウザで瓢侯す...
Webペ〖ジに给倡するには、肌のデ〖タを脱罢します。
-Proseccing.js塑挛
-プログラムコ〖ド
-HTMLファイル
数及としては、HTMLファイルにコ〖ドを虽め哈んでしまう数恕...
**HTMLファイルにコ〖ドを虽め哈む [#r6d60959]
まず、HTMLファイルにプログラムコ〖ドを链婶虽め哈むとこん...
サンプルを斧る′′[[HTMLファイルにコ〖ドを虽め哈む:http:/...
<html>
<head>
<script src="processing-1.2.1.js">
</script>
<script>
window.onload = function(){
// canvas妥燎
var canvas = document.getElementsByTagName('c...
// Proccessingのコ〖ドが今かれたscript妥燎
var codeElm = document.getElementById('proces...
// 惧淡妥燎の柒推を艰评
var code = codeElm.textContent || codeElm.inn...
new Processing(canvas, code);
};
</script>
<script id="processing-code" type="application/pr...
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/">Proc...
</body>
</html>
このHTMLファイルをよく斧ると、<head>×</head>の面に、<scr...
+"src"掳拉でprocessing.jsの疤弥を回年する。
+≈window.onload = function()∽でWebペ〖ジ山绩箕の介袋步...
+悸狠に悸乖したいProcessing.jsのコ〖ドを淡揭
ほかの棱汤矢では、2戎誊の介袋步コ〖ドをinit.jsとして嘲婶...
また、<body>×</body>には、肌のような<canvas>タグがありま...
<canvas width="250" height="250"></canvas>
Processing.jsは、ここに悸乖冯蔡を山绩します。
喇蔡を给倡するには、このHTMLファイルとprocessing.js塑挛を...
**侍のコ〖ドファイルを钙び叫す [#he791051]
侍のコ〖ドファイルをHTMLファイルから钙び叫す眷圭はこんな...
サンプルを斧る′′[[侍のコ〖ドファイルを钙び叫す:http://w...
<html>
<head>
<script src="processing-1.2.1.js">
</script>
</head>
<body>
<canvas datasrc="sample20.pjs" width="250" height="250"...
<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/">Proc...
</body>
</html>
このHTMLファイルでは、<head>×</head>の面に、<script>×</...
そして、<body>×</body>には、肌のような<canvas>タグがあり...
<canvas datasrc="sample20.pjs" width="250" height="250">...
喇蔡を给倡するには、このHTMLファイルとコ〖ドファイル、pro...
**jsdo.it [#af2060fb]
javascriptの抨蛊サイト≈jsdo.it∽でもprocessing.jsで抨蛊...
给倡されているコ〖ドを傅に猖紊する(fork:晦尸かれ)するのも...
-[[jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo....
-[[my processing.js test - jsdo.it - Share JavaScript, HT...
-[[yet another simple boid - jsdo.it - Share JavaScript, ...
-[[processing.js - jsdo.it - Share JavaScript, HTML5 and ...
仓残络柴
-[[processing.js: yet another firework - jsdo.it - Share ...
-[[HTML5 Fireworks - jsdo.it - Share JavaScript, HTML5 an...
-[[HTML5仓残络柴をみんなで侯ろう— - jsdo.it - Share Java...
*徊雇 [#nc7b1009]
徊雇となりそうな获瘟です。
**Processing.js [#dfba4d49]
-[[wise9 › 妈１搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈２搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈３搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈４搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈５搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈６搀 Processing.js で介めてのゲ〖ムプ...
-[[ブラウザでお敞闪きプログラミング— Processing.js 判眷...
-[[Processing.jsで蝶の凡れシミュレ〖ション - もやし泣淡:h...
-[[Processing.jsの蝗い数 - Irrational Exuberance:http://l...
-[[iPadに滦炳したProcessing.js≈pjs4iPad∽ - MOONGIFT:htt...
-[[Processing.js で湿妄シミュレ〖ション - Usipedia:http:/...
-[[Processing.js:http://processingjs.org/]]
-[[光刨な山附蜗を悸附したJavaScriptフレ〖ムワ〖ク≈toxicl...
-[[Education/Projects/ProcessingForTheWeb - MozillaWiki:h...
**JavaScript [#z3e30f07]
-[[いまさら使けないJavaScript掐嚏∈1/3∷ - △IT:http://ww...
-[[糠JavaScript掐嚏:http://homepage3.nifty.com/aya_js/js2...
-[[JavaScript答塑车前呵庐マスタ〖 - TechTalkManiacs:http:...
-[[JavaScript答撩矢恕呵庐マスタ〖 - なんとなく誊淡:http:/...
-[[JavaScript掐嚏:http://www.pori2.net/js/]]
-[[とほほのJavaScriptリファレンス:http://www.tohoho-web.c...
-[[JavaScript掐嚏:http://www.ajaxtower.jp/js/]]
-[[JavaScriptの∩this∩をめぐる肆副 |:http://hdemon.net/arc...

簇息¨[[p5.js]]、[[泣塑胳っぽいプログラミング咐胳そら痞ス...
&ref(boid.png);
Processing.jsは、ビジュアルデザイン脱プログラミング咐胳の...
この淡祸は、そんなProcessing.jsの词帽な掐嚏淡祸です。黎に...
塑淡祸の滦据粕荚は、答塑弄にまるでプログラミング挛赋のな...
2011-06-06:Processing-1.2.1.js で瓢侯澄千しています。
''[[↑なんと、泣塑胳っぽいコ〖ドをProcessingのスケッチに恃...
~
#htmlinsert(processing.html)
~
誊肌
#contents
*とりあえずサンプルを斧る [#yf2e248a]
まずは、悸狠に瓢いているところを斧てみましょう。
**瓢湿の凡シミュレ〖ション [#q4f59d84]
これは、瓢湿の凡っぽく瓢くシミュレ〖ションで、Boidと钙ば...
#ref(boid.png)
サンプルを斧る′′[[boid:http://www.catch.jp/program/proc...
processing.jsを蝗うと、こういうのを极尸で侯ることができる...
**いろいろなサンプル [#rfa0d3f7]
このほかにも、いろいろとスゴイ悸毋があります。
#ref(samples.png)
-[[Abstract01js:http://mariuswatz.com/works/abstract01js/...
-[[BallDroppings instructions:http://balldroppings.com/js...
-[[A Mouse-driven Graphic Equalizer:http://bocoup.com/pro...
-[[UI Dial with Snaps:http://bocoup.com/processing-js/doc...
-[[Processing.js给及サイトExhibition:http://processingjs....
-[[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/proc...
+≈Run∽ボタンをクリック
煌逞の面に木俐が苞かれましたね。
#ref(sandbox.png)
宝の煌逞いスペ〖スには、肌の办矢が今いてあります。
line(0, 0, 100, 100);
これが、Processing.jsのプログラムコ〖ドです(维して、コ〖...
それでは、このコ〖ドを肌のように饯赖してみてください。呵...
line(0, 0, 100, 50);
これで、木俐の疤弥が恃わりましたね。
Processing.jsなどのプログラミング咐胳の驴くは、こんな炊じ...
**とりあえず敞を闪く [#y707f687]
では、木俐笆嘲のものも闪いてみましょう。まず黎ほどの木俐...
+[[Processing.jsの锡浆眷:http://www.catch.jp/program/proc...
line(0,0,100,100);
これで、焊惧から宝布に木俐(Line)を闪きました。カッコ柒は...
では、肌はこれを闪いてみましょう。
size(250, 250);
ellipse(120,120,80,80);
闪茶ウィンドウのサイズ(Size)を恃构して、そこに边(ellipse:...
&ref(circle.png);
Sizeのカッコ柒は、闪茶挝拌のサイズを玻升(width)と侥升(hei...
ellipseのカッコの面は、闪く率边の疤弥とサイズを肌の界に回...
ellipse(x, y, width, height);
-x=面看の玻の疤弥
-y=面看の侥の疤弥
-width=率边の玻升
-height=率边の侥升
ちなみにProcessing.jsでは、コ〖ドが2乖笆惧あると惧から界...
ま、ここまでは票じ敞を闪くだけなので、プログラムとしては...
**いよいよアニメ〖ション [#vb0a7061]
海刨は、マウスの瓢きに圭わせて、闪く敞を恃えてみましょう...
&ref(elipse_anime.png);
サンプル ′ [[mouse_move:http://www.catch.jp/program/proc...
笆布のコ〖ドを掐蜗してみてください。
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
プログラムは络きく企つの婶尸に尸かれていて、涟染が≈void ...
涟染の≈void setup()∽が、アニメ〖ションの介袋肋年です。s...
稿染の≈void draw()∽は、アニメ〖ションの帆り手し肋年です...
**Priocessing.jsの炭吾を拇べる [#k3b07d22]
Processing.jsは、lineやellipseなどの炭吾(コマンド)を寥み...
称炭吾の蝗い数を拇べるには、Processing.js给及サイトの[[Re...
毖胳で今いてあるので粕みにくいですが、妨及が办年なので、...
警し攫鼠が概いかも梦れませんが、Processingの泣塑胳惹リフ...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
*郝筛の回年数恕 [#m8c6a497]
ProcessingやProcessing.jsのようにプログラムで敞を闪くには...
さて、Processing.jsで敞を闪くとき、その疤弥を2つの猛から...
&ref(Processing答撩呵庐掐嚏/dimension.png);
面池够あたりの眶池に判眷するグラフは、X即とY即の木蛤郝筛...
玻即をX即、侥即をY即と钙び、この企つの即が木逞に蛤わって...
X即とY即の木蛤するところ(0,0)は、付爬と钙ばれました。
木蛤郝筛惧の、とある爬の郝筛は、付爬からX即惧の疤弥aと、...
Processing.jsの郝筛も、これとほぼ票じです。ただ、X即が宝...
たとえば、木俐を闪く眷圭、1つ誊の眉が郝筛(0,0)、もう办つ...
闪茶エリアのサイズは、Size炭吾で、玻升(width)と侥升(heigh...
size(250, 250);
そうすると、附哼の闪茶エリアの络きさは、≈width∽と≈heig...
肌のように淡揭すると、闪茶エリアの滦逞俐を2塑闪きます。
line(0,0,width,height);
line(width,0,0,height);
&ref(lines.png);
サンプル ′ [[lines:http://www.catch.jp/program/processin...
*アニメ〖ションとマウス拎侯 [#ha6b873b]
盖年された敞ばかり闪いていてもつまらないので、また瓢かし...
サンプル ′ [[mouse_move:http://www.catch.jp/program/proc...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
**脚ね派りとコメント矢 [#cf8c0225]
setup() 笆布の{...}の面が弹瓢箕に办搀だけ悸乖されて、draw...
ここで、draw()笆布に≈background(0);∽がありますよね、bac...
ここで、肌のように≈background(0);∽の乖片に≈//∽を纳裁...
void draw() {
//background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
&ref(elipse_anime2.png);
サンプル ′ [[脚ねて闪く:http://www.catch.jp/program/proc...
≈//∽は、コメント矢を山す淡规です。この淡规の宝娄から乖...
海搀は、≈background(0);∽の涟に≈//∽を今いたので、≈bac...
**マウスの疤弥に闪く [#m095f625]
鲁いて、率边を闪く婶尸を肌のように恃构してみましょう。
恃构涟
ellipse(width/2, height/2, mouseX, mouseY);
恃构稿
ellipse(mouseX, mouseY, 10, 10);
恃构涟は、率边の面看をウィンドウの面看に盖年して、率边の...
恃构稿は、率边の面看をマウスの疤弥によって恃えて、率边の...
こうすると、マウスの瓢きに圭わせて、サイズ≈10,10∽の边が...
&ref(elipse_anime3.png);
サンプル [[マウスの疤弥に闪く:http://www.catch.jp/program...
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/p...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
}
void mousePressed() {
ellipse(mouseX, mouseY, 10, 10);
}
≈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/prog...
Processing.jsでは、このように0×255の眶猛で咖を回年します...
**咖の3付咖で回年する [#nad6c624]
でも、これでは乐とか滥は回年できませんね。そこで肌のよう...
background(200,0,0);
Processingでは、咖の3付咖つまり乐(R:Red)、涡(G:Green)、滥...
咖の3付咖数及では、肌のように16渴山淡ができます。これは、...
background(#FFCC00);
では、ひとつだけ炳脱毋を斧てみましょう。肌のプログラムは...
&ref(color_back_mouse.png);
サンプル [[マウスの疤弥で秦肥咖を恃える:http://www.catch....
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://proces...
-[[color() \ Language (API) \ Processing 1.0 (BETA):http:...
**哭妨の咖を恃える [#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:/...
派りつぶし咖を回年する眷圭には、肌のように≈fill∽炭吾で...
fill(255, 0, 0);
炳脱毋として、マウスの疤弥に圭わせて、率边の呜吃咖が恃わ...
&ref(color_line_mouse.png);
サンプル [[マウスの疤弥で呜吃咖を恃える:http://www.catch....
**フェ〖ドアウト [#ja1544d8]
これまでの毋では、秦肥を派りつぶすことで、笆涟に闪いた哭...
そこで、染譬汤な球で茶烫を派りつぶすようにしてみましょう...
肌のサンプルでは、票じ络きさの边をマウスの疤弥に闪いてい...
&ref(color_back_fade.png);
サンプル [[マウスの疤弥に边を闪き、靳」にフェ〖ドアウト:h...
秦肥を派りつぶすかわりにフェ〖ドアウトさせる≈fadeToWhite...
//フェ〖ドアウト
void fadeToWhite() {
noStroke();
fill(255, 30);
rectMode(CORNER);
rect(0, 0, width, height);
}
このテクニックは、[[Built with Processing(Ver 1.x滦炳惹)-...
*矢机の山绩 [#j05ae40a]
咖を恃える肌は、矢机を山绩してみましょう。
&ref(letters.png);
サンプル [[sketch_anime_letters:http://www.catch.jp/progr...
**答塑妨 [#xe01c874]
こんな炊じ
fill(0); //矢机の咖
textSize(24); //矢机のサイズ(ピクセル眶)
text("A",10, 10); //山绩する矢机と疤弥
矢机の咖は、fill炭吾で回年します。矢机のサイズは、ピクセ...
&ref(test_letters.png);
サンプル [[test_letters:http://www.catch.jp/program/proce...
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...
//ⅷ侯喇面 - デモなど赖撅に瓢侯していません。
//フォントを回年するためには、Processingのエディタで、漓...
//フォントデ〖タの侯喇缄界は、
//+≈Tool∽-≈Create Font∽
//+≈Create Font∽ウィンドウが山绩されたら、网脱したいフ...
//+≈OK∽ボタンをクリック
//
//これで、≈マイドキュメント∽->≈Processing∽->≈(プログ...
//
//プログラム面で、フォントを回年するには、肌のように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/progr...
//なお、祸涟にフォントデ〖タを侯っておかなくても网脱でき...
*プログラムによる拎侯 [#e7972263]
肌は、敞を闪くための燎亨(マテリアル)を、どのようにプログ...
とりあえず、肌のようなProcessingの徊雇获瘟を粕んでみてく...
-[[Processing掐嚏怪郝:http://ap.kakoku.net/]]
-[[Processing 池浆ノ〖ト:http://www.d-improvement.jp/lear...
-[[FrontPage - 兜镑のためのプログラミング掐嚏:http://wiki...
ProcessingとProcessing.jsは、矢恕がほとんど票じなので、徊...
*オブジェクトを蝗ったサンプルプログラム [#b337ebe4]
词帽なサンプルをいくつか侯ってみました。
**1改のボ〖ルが、はねかえる [#rc1b5e6f]
&ref(bounce_ball_1.png);
サンプル [[bounce_ball_1:http://www.catch.jp/program/proc...
1改のボ〖ルが、ウィンドウ柒をはね搀ります。Ballオブジェク...
塑碰は、ボ〖ル１改だけならオブジェクトを侯るまでもないの...
**剩眶のボ〖ルが、はねかえる[#k700f4e3]
&ref(bounce_balls.png);
サンプル [[bounce_ball_20:http://www.catch.jp/program/pro...
剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ただし、ボ〖...
Processingに烧掳のExamplesのうち、≈Topics - Motion - Bou...
**咀仆する剩眶のボ〖ル [#a825d5a3]
&ref(push_balls.png);
サンプル [[push_balls:http://www.catch.jp/program/process...
剩眶のボ〖ルが、ウィンドウ柒をはね搀ります。ボ〖ル票晃も...
-徊雇¨[[Bubbles:http://dokokano.com/ftlabo/applet/Bubble...
**瓢湿の凡れ [#l538b340]
肆片でも疽拆したboidで、瓢湿の凡のような瓢きを浩附してみ...
&ref(boid.png);
サンプル [[boid:http://www.catch.jp/program/processing.js...
Boid(ボイド、Bird + doid 幕もどき)れは、シンプルな３つの...
-[[ボイド (客供栏炭) - Wikipedia:http://ja.wikipedia.org/...
-[[Boids Test Built with Processing | 鄂篓困咖 | null-nul...
-[[Processing Discourse - Simple Boid Sketch:http://proce...
-[[Processing boid 垛蝶:http://www.tiu.ac.jp/~zohzemi/pro...
-[[ほぼ泣穿イトイ糠使 - がんばれ抗李くんの颁帕灰くん:http...
-[[Boids (Flocks, Herds, and Schools: a Distributed Behav...
**仓残 [#x54b8158]
jsdo.itに抨蛊したもの。
-[[processing.js: yet another firework - jsdo.it - Share ...
*茶咙ファイルの山绩 [#k4a34ac4]
Processing.jsでは、茶咙ファイルを粕み哈むには、それに黎惟...
//茶咙を山绩
/* @pjs preload="sora-mame.png"; */
size(300,300);
PImage b;
b = loadImage('sora-mame.png');
image(b,0,0);
*极尸のパソコンに茨董を侯るには [#r8cd4d68]
Webブラウザから悸乖しても紊いのですが、极尸のパソコンにも...
**茨董の侯り数 [#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∽をダブルクリック
これで、インタ〖ネットに儡鲁していないときでも、Processin...
**うまく瓢かないときは [#w787d0dc]
もしもうまく乖かないときは、ダウンロ〖ドしたProcessing.js...
+≈edit.html∽を宝クリック->≈试礁∽
+HTMLファイルの面咳がテキストファイルとして山绩されたら、...
<script type="text/javascript" src="../js/processing-1.2...
*喇蔡を给倡するには [#p2c8bc3e]
Processing.jsは、JavaScriptをベ〖スにWebブラウザで瓢侯す...
Webペ〖ジに给倡するには、肌のデ〖タを脱罢します。
-Proseccing.js塑挛
-プログラムコ〖ド
-HTMLファイル
数及としては、HTMLファイルにコ〖ドを虽め哈んでしまう数恕...
**HTMLファイルにコ〖ドを虽め哈む [#r6d60959]
まず、HTMLファイルにプログラムコ〖ドを链婶虽め哈むとこん...
サンプルを斧る′′[[HTMLファイルにコ〖ドを虽め哈む:http:/...
<html>
<head>
<script src="processing-1.2.1.js">
</script>
<script>
window.onload = function(){
// canvas妥燎
var canvas = document.getElementsByTagName('c...
// Proccessingのコ〖ドが今かれたscript妥燎
var codeElm = document.getElementById('proces...
// 惧淡妥燎の柒推を艰评
var code = codeElm.textContent || codeElm.inn...
new Processing(canvas, code);
};
</script>
<script id="processing-code" type="application/pr...
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/">Proc...
</body>
</html>
このHTMLファイルをよく斧ると、<head>×</head>の面に、<scr...
+"src"掳拉でprocessing.jsの疤弥を回年する。
+≈window.onload = function()∽でWebペ〖ジ山绩箕の介袋步...
+悸狠に悸乖したいProcessing.jsのコ〖ドを淡揭
ほかの棱汤矢では、2戎誊の介袋步コ〖ドをinit.jsとして嘲婶...
また、<body>×</body>には、肌のような<canvas>タグがありま...
<canvas width="250" height="250"></canvas>
Processing.jsは、ここに悸乖冯蔡を山绩します。
喇蔡を给倡するには、このHTMLファイルとprocessing.js塑挛を...
**侍のコ〖ドファイルを钙び叫す [#he791051]
侍のコ〖ドファイルをHTMLファイルから钙び叫す眷圭はこんな...
サンプルを斧る′′[[侍のコ〖ドファイルを钙び叫す:http://w...
<html>
<head>
<script src="processing-1.2.1.js">
</script>
</head>
<body>
<canvas datasrc="sample20.pjs" width="250" height="250"...
<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/">Proc...
</body>
</html>
このHTMLファイルでは、<head>×</head>の面に、<script>×</...
そして、<body>×</body>には、肌のような<canvas>タグがあり...
<canvas datasrc="sample20.pjs" width="250" height="250">...
喇蔡を给倡するには、このHTMLファイルとコ〖ドファイル、pro...
**jsdo.it [#af2060fb]
javascriptの抨蛊サイト≈jsdo.it∽でもprocessing.jsで抨蛊...
给倡されているコ〖ドを傅に猖紊する(fork:晦尸かれ)するのも...
-[[jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo....
-[[my processing.js test - jsdo.it - Share JavaScript, HT...
-[[yet another simple boid - jsdo.it - Share JavaScript, ...
-[[processing.js - jsdo.it - Share JavaScript, HTML5 and ...
仓残络柴
-[[processing.js: yet another firework - jsdo.it - Share ...
-[[HTML5 Fireworks - jsdo.it - Share JavaScript, HTML5 an...
-[[HTML5仓残络柴をみんなで侯ろう— - jsdo.it - Share Java...
*徊雇 [#nc7b1009]
徊雇となりそうな获瘟です。
**Processing.js [#dfba4d49]
-[[wise9 › 妈１搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈２搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈３搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈４搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈５搀 Processing.js で介めてのゲ〖ムプ...
-[[wise9 › 妈６搀 Processing.js で介めてのゲ〖ムプ...
-[[ブラウザでお敞闪きプログラミング— Processing.js 判眷...
-[[Processing.jsで蝶の凡れシミュレ〖ション - もやし泣淡:h...
-[[Processing.jsの蝗い数 - Irrational Exuberance:http://l...
-[[iPadに滦炳したProcessing.js≈pjs4iPad∽ - MOONGIFT:htt...
-[[Processing.js で湿妄シミュレ〖ション - Usipedia:http:/...
-[[Processing.js:http://processingjs.org/]]
-[[光刨な山附蜗を悸附したJavaScriptフレ〖ムワ〖ク≈toxicl...
-[[Education/Projects/ProcessingForTheWeb - MozillaWiki:h...
**JavaScript [#z3e30f07]
-[[いまさら使けないJavaScript掐嚏∈1/3∷ - △IT:http://ww...
-[[糠JavaScript掐嚏:http://homepage3.nifty.com/aya_js/js2...
-[[JavaScript答塑车前呵庐マスタ〖 - TechTalkManiacs:http:...
-[[JavaScript答撩矢恕呵庐マスタ〖 - なんとなく誊淡:http:/...
-[[JavaScript掐嚏:http://www.pori2.net/js/]]
-[[とほほのJavaScriptリファレンス:http://www.tohoho-web.c...
-[[JavaScript掐嚏:http://www.ajaxtower.jp/js/]]
-[[JavaScriptの∩this∩をめぐる肆副 |:http://hdemon.net/arc...

Processing.js答撩呵庐掐嚏 をテンプレ〖トにして侯喇

Processing.js答撩呵庐掐嚏をテンプレ〖トにして侯喇