catch.jp-wiki
プログラミング
英語学習
履歴
検索
Dropdown
一覧
Processing基礎最速入門
をテンプレートにして作成
開始行:
関連：[[日本語っぽいプログラミング言語そら豆スクリプト>So...
これは、ビジュアルデザイン用プログラミング言語Processing(...
本記事の対象読者は、基本的にまるでプログラミング体験のな...
とはいえ、解説書一冊分の情報量はないので、Webデザインとか...
''[[●なんと、日本語っぽいコードをProcessingのスケッチに変...
''[[●Javascript版であるProcessing.jsは、コチラ！>Processi...
~
#htmlinsert(processing.html)
~
#contents
&ref(boid_102.png);
『Processing（プロセッシング）は、Casey Reas と Benjamin ...
Processingバージョン1.5(17 April 2011)をベースに記述して...
*とにかく始める。 [#nd0c90d6]
Processingは、Windows以外にもMac版やLinux版がありますが、...
**入手から起動まで [#b22f1159]
+ダウンロード http://www.processing.org/
--Download Processingを選ぶ
--WindowsかWindows(without Java)を選ぶ。
+解凍する
--Windowsの場合、解凍したフォルダは「C:」直下においたほう...
--最初は平気だけど、ライブラリをインポートしたとき、エラ...
+「Processing.exe」アイコンをダブルクリック
これで、Processingが起動します。
&ref(IDE.png);
私の場合、Javaを導入済みなので(without Java)版でOKかと思...
終了は、まあ普通にウィンドウを閉じるか、「File」-「Quit」...
Processingには、プログラムを記述したり実行するためのツー...
**とりあえず絵を描く [#o3b9d8fc]
次のように入力して、ツールバーの「Run」ボタンをクリック。
line(0,0,200,200);
これで、左上から右下に直線(Line)が描きます。カッコ内は、...
&ref(line.png);
次はこれ。
size(250, 250);
ellipse(120,120,80,80);
描画ウィンドウのサイズ(Size)を変更して、その円(ellipse:楕...
&ref(ellipse.png);
Sizeのカッコ内は、横幅(width)と縦幅(height)の順に指定しま...
ellipse(x, y, width, height);
-x=中心の横の位置
-y=中心の縦の位置
-width=楕円の横幅
-height=楕円の縦幅
ちなみにProcessingでは、行末に必ず「;」を入力します。コー...
プログラムができたら、ツールバーの「Save」ボタンでファイ...
ま、ここまでは同じ絵を描くだけなので、プログラムとしては...
**いよいよアニメーション [#p434843f]
今度は、マウスの動きに合わせて、描く絵を変えてみましょう...
&ref(mouse_move.png);
サンプル [[sketch_anime_ellipse:http://www.catch.jp/progr...
以下のコードを入力してみてください。
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
プログラムは大きく二つの部分に分かれていて、前半が「void ...
前半の「void setup()」が、アニメーションの初期設定です。s...
後半の「void draw()」は、アニメーションの繰り返し設定です...
**成果を公開する [#q698a7c8]
先ほど説明したようにProcessingには、プログラムを記述した...
|ボタン名|役割|
|Run|プログラムの実行|
|Stop|プログラムの停止|
|New|プログラムの新規作成|
|Open|既存のプログラムを開く|
|Save|作成中のプログラムを保存する|
|Export Applet|Javaアプレットへの変換|
作成したプログラムは、サンプル [[sketch_anime_ellipse:htt...
Javaアプレットに変換するには、ツールバーの「Export Applet...
また、Javaアプレットではなく、単独のアプリケーションのよ...
**Priocessingの命令を調べる [#z4a47202]
Processingは、lineやellipseなどの命令(コマンド)を組み合わ...
各命令の使い方を調べるには、Processingの「Help」->「Refer...
英語で書いてあるので読みにくいですが、形式が一定なので、...
少し情報が古いかも知れませんが、日本語版リファレンスもあ...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
*座標の指定方法 [#m8c6a497]
Processingのようにプログラムで絵を描くには、２つのポイン...
さて、Processingで絵を描くとき、その位置を2つの値からなる...
&ref(dimension.png);
中学校あたりの数学に登場するグラフは、X軸とY軸の直交座標...
横軸をX軸、縦軸をY軸と呼び、この二つの軸が直角に交わって...
X軸とY軸の直交するところ(0,0)は、原点と呼ばれました。
直交座標上の、とある点の座標は、原点からX軸上の位置aと、...
Processingの座標も、これとほぼ同じです。ただ、X軸が右に行...
たとえば、直線を描く場合、1つ目の端が座標(0,0)、もう一つ...
描画エリアのサイズは、Size命令で、横幅(width)と縦幅(heigh...
size(250, 250);
そうすると、現在の描画エリアの大きさは、「width」と「heig...
次のように記述すると、描画エリアの対角線を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...
ここで、draw()以下に「background(0);」がありますよね、bac...
ここで、次のように「background(0);」の行頭に「//」を追加...
&ref(mouse_move2.png);
サンプル [[sketch_anime_ellipse2:http://www.catch.jp/prog...
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);
変更前は、楕円の中心をウィンドウの中心に固定して、楕円の...
変更後は、楕円の中心をマウスの位置によって変えて、楕円の...
こうすると、マウスの動きに合わせて、サイズ「10,10」の円が...
&ref(mouse_move3.png);
サンプル [[sketch_anime_ellipse3:http://www.catch.jp/prog...
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/prog...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
}
void mousePressed() {
ellipse(mouseX, mouseY, 10, 10);
}
「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の数値で色を指定します。...
**色の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 1.0 (BETA):http:...
-[[color() \ Language (API) \ Processing 1.0:http://proce...
**図形の色を変える [#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:/...
塗りつぶし色を指定する場合には、次のように「fill」命令で...
fill(255, 0, 0);
応用例として、マウスの位置に合わせて、楕円の輪郭色が変わ...
&ref(color_line_mouse.png);
サンプル [[マウスの位置で輪郭色を変える:http://www.catch....
**フェードアウト [#ja1544d8]
前の例では背景を塗りつぶすことで、前に描いた図形も塗りつ...
そこで、半透明な白で画面を塗りつぶすようにしてみましょう...
次のサンプルでは、同じ大きさの円をマウスの位置に描いてい...
&ref(color_circle_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(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」->「(プログラ...
プログラム中で、フォントを指定するには、次のように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/progr...
なお、事前にフォントデータを作っておかなくても利用できるc...
**参考情報 [#z4571756]
-[[text() \ Language (API) \ Processing 1.0 (BETA):http:/...
-[[text() \ Language (API) \ Processing 1.0:http://proces...
*プログラムによる操作 [#ya3ea99a]
次は、絵を描くための素材(マテリアル)を、どのようにプログ...
-[[Processing入門講座:http://ap.kakoku.net/]]
-[[Processing 学習ノート:http://www.d-improvement.jp/lear...
-[[FrontPage - 教員のためのプログラミング入門:http://wiki...
*オブジェクトを使ったサンプルプログラム [#c04679e8]
簡単なサンプルをいくつか作ってみました。
**1個のボールが、はねかえる [#bd38bdaa]
&ref(bounce_a_ball_fade.png);
サンプル [[bounce_ball_1:http://www.catch.jp/program/proc...
1個のボールが、ウィンドウ内をはね回ります。Ballオブジェク...
本当は、ボール１個だけならオブジェクトを作るまでもないの...
**複数のボールが、はねかえる[#k700f4e3]
&ref(bounce_balls_fade.png);
サンプル [[bounce_ball_20:http://www.catch.jp/program/pro...
複数のボールが、ウィンドウ内をはね回ります。ただし、ボー...
Processingに付属のExamplesのうち、「Topics - Motion - Bou...
**衝突する複数のボール [#a825d5a3]
&ref(push_balls_fade.png);
サンプル [[push_balls:http://www.catch.jp/program/process...
複数のボールが、ウィンドウ内をはね回ります。ボール同士も...
-参考：[[Bubbles:http://dokokano.com/ftlabo/applet/Bubble...
**動物の群れ [#l538b340]
動物の群のような動きを再現してみました。
&ref(boid_102.png);
サンプル [[boid:http://www.catch.jp/program/processing/bo...
映画やCG・アニメーションで登場する動物の群などは、boid(ボ...
-[[ボイド (人工生命) - 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...
*いろいろ面白そうなこと [#o4b301b6]
**Processingでサウンド処理 [#sa2347a7]
こちらにまとめることにしました。
-[[Processingでサウンド]]
**GUI [#cb9f6aee]
-[[Processing上でのGUI » Surf on Entropy : Nao Tokui...
-[[Processing依存からの脱却−AWTでのGUIプログラミング(1) -...
*フルスクリーン表示 [#ra9e0c16]
でっかいプロジェクターで見せびらかしたい時は、Fullscreen ...
**準備１：プログラムを軽くする [#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の...
Fullscreen APIがうまく導入できていれば、Processingのエデ...
**プログラム本体を調整する [#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）表示にする - P...
-[[Processingでフルスクリーン（fullscreen）表示にし、なお...
-[[Karappo Interaction Lab. » Processingでフルスクリ...
-[[FullScreen API for Processing:http://www.superduper.or...
*スクリーンセーバー [#hfb871dd]
-Windows／Linux
--[[Processing Screensaver:http://jorgecardoso.eu/process...
-Mac OS X版
--[[Ondra on Tumblr ― Processingのスケッチをスクリーンセ...
*すごそうな作品たち [#oe824252]
-[[proce55ingを使ったGraphic集 - NAVER まとめ:http://mato...
-[[ harukit - proce55ing sketchbook:http://www.harukit.co...
-[[ processing - SourceChord:http://d.hatena.ne.jp/minami...
-[[LeaveBehind » Proce55ing:http://gofar2.iobb.net/~...
-[[Classiclll's Proce55ing Test Page:http://www.geocities...
-[[Processingで遊ぼう - Writing Cafe:http://cafe.eyln.com...
-[[OpenProcessing - Share Your Sketches!:http://www.openp...
*解説書 [#rf275806]
-[[Built with Processing(Ver 1.x対応版)-デザイン/アートの...
--非常に初歩的なところからデザインとかでの利用方法まで網...
-[[Processingプログラミング入門―Javaベースのオープンソー...
--基本から最新の応用まで幅広い感じ。未読。
-[[ビジュアライジング・データ―Processingによる情報視覚化...
--オライリーブックス。開発者本人による解説。本格活用には...
-[[Prototyping Lab ―「作りながら考える」ためのArduino実践...
--ハードウェアとの連携は、これ。未読
*リンク [#e9520480]
-[[Processing入門＋openFrameworks | こどものもうそうblog:...
-[[『ビジュアライジング・データ』感想 | こどものもうそうb...
-[[芸術の秋にProcessingでスケッチプログラミングを始めてみ...
-[[Processing.jp:http://processing.jp/]]
-[[Processing.org:http://processing.org/]]
-[[Processing - Wikipedia:http://ja.wikipedia.org/wiki/Pr...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
-[[Proce55ing Tutorial for Macromedia Minds:http://www.vi...
-[[Processing によるデータ視覚化: 第 1 回 言語と環境:http...
-[[Processing によるデータ視覚化: 第 2 回 インターフェー...
-[[Processing によるデータ視覚化: 第 3 回 2 次元グラフィ...
-[[Tercel::Diary: Processing でイテレータ:http://tercel-s...
-[[人工言語入門 A 2010 Processingによる高度なモーション：...
-[[Processing用コンソール対話型プログラム開発フレームワー...
-[[Java基礎文法最速マスター - いろいろ解析日記:http://d.h...
終了行:
関連：[[日本語っぽいプログラミング言語そら豆スクリプト>So...
これは、ビジュアルデザイン用プログラミング言語Processing(...
本記事の対象読者は、基本的にまるでプログラミング体験のな...
とはいえ、解説書一冊分の情報量はないので、Webデザインとか...
''[[●なんと、日本語っぽいコードをProcessingのスケッチに変...
''[[●Javascript版であるProcessing.jsは、コチラ！>Processi...
~
#htmlinsert(processing.html)
~
#contents
&ref(boid_102.png);
『Processing（プロセッシング）は、Casey Reas と Benjamin ...
Processingバージョン1.5(17 April 2011)をベースに記述して...
*とにかく始める。 [#nd0c90d6]
Processingは、Windows以外にもMac版やLinux版がありますが、...
**入手から起動まで [#b22f1159]
+ダウンロード http://www.processing.org/
--Download Processingを選ぶ
--WindowsかWindows(without Java)を選ぶ。
+解凍する
--Windowsの場合、解凍したフォルダは「C:」直下においたほう...
--最初は平気だけど、ライブラリをインポートしたとき、エラ...
+「Processing.exe」アイコンをダブルクリック
これで、Processingが起動します。
&ref(IDE.png);
私の場合、Javaを導入済みなので(without Java)版でOKかと思...
終了は、まあ普通にウィンドウを閉じるか、「File」-「Quit」...
Processingには、プログラムを記述したり実行するためのツー...
**とりあえず絵を描く [#o3b9d8fc]
次のように入力して、ツールバーの「Run」ボタンをクリック。
line(0,0,200,200);
これで、左上から右下に直線(Line)が描きます。カッコ内は、...
&ref(line.png);
次はこれ。
size(250, 250);
ellipse(120,120,80,80);
描画ウィンドウのサイズ(Size)を変更して、その円(ellipse:楕...
&ref(ellipse.png);
Sizeのカッコ内は、横幅(width)と縦幅(height)の順に指定しま...
ellipse(x, y, width, height);
-x=中心の横の位置
-y=中心の縦の位置
-width=楕円の横幅
-height=楕円の縦幅
ちなみにProcessingでは、行末に必ず「;」を入力します。コー...
プログラムができたら、ツールバーの「Save」ボタンでファイ...
ま、ここまでは同じ絵を描くだけなので、プログラムとしては...
**いよいよアニメーション [#p434843f]
今度は、マウスの動きに合わせて、描く絵を変えてみましょう...
&ref(mouse_move.png);
サンプル [[sketch_anime_ellipse:http://www.catch.jp/progr...
以下のコードを入力してみてください。
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
ellipse(width/2, height/2, mouseX, mouseY);
}
プログラムは大きく二つの部分に分かれていて、前半が「void ...
前半の「void setup()」が、アニメーションの初期設定です。s...
後半の「void draw()」は、アニメーションの繰り返し設定です...
**成果を公開する [#q698a7c8]
先ほど説明したようにProcessingには、プログラムを記述した...
|ボタン名|役割|
|Run|プログラムの実行|
|Stop|プログラムの停止|
|New|プログラムの新規作成|
|Open|既存のプログラムを開く|
|Save|作成中のプログラムを保存する|
|Export Applet|Javaアプレットへの変換|
作成したプログラムは、サンプル [[sketch_anime_ellipse:htt...
Javaアプレットに変換するには、ツールバーの「Export Applet...
また、Javaアプレットではなく、単独のアプリケーションのよ...
**Priocessingの命令を調べる [#z4a47202]
Processingは、lineやellipseなどの命令(コマンド)を組み合わ...
各命令の使い方を調べるには、Processingの「Help」->「Refer...
英語で書いてあるので読みにくいですが、形式が一定なので、...
少し情報が古いかも知れませんが、日本語版リファレンスもあ...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
*座標の指定方法 [#m8c6a497]
Processingのようにプログラムで絵を描くには、２つのポイン...
さて、Processingで絵を描くとき、その位置を2つの値からなる...
&ref(dimension.png);
中学校あたりの数学に登場するグラフは、X軸とY軸の直交座標...
横軸をX軸、縦軸をY軸と呼び、この二つの軸が直角に交わって...
X軸とY軸の直交するところ(0,0)は、原点と呼ばれました。
直交座標上の、とある点の座標は、原点からX軸上の位置aと、...
Processingの座標も、これとほぼ同じです。ただ、X軸が右に行...
たとえば、直線を描く場合、1つ目の端が座標(0,0)、もう一つ...
描画エリアのサイズは、Size命令で、横幅(width)と縦幅(heigh...
size(250, 250);
そうすると、現在の描画エリアの大きさは、「width」と「heig...
次のように記述すると、描画エリアの対角線を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...
ここで、draw()以下に「background(0);」がありますよね、bac...
ここで、次のように「background(0);」の行頭に「//」を追加...
&ref(mouse_move2.png);
サンプル [[sketch_anime_ellipse2:http://www.catch.jp/prog...
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);
変更前は、楕円の中心をウィンドウの中心に固定して、楕円の...
変更後は、楕円の中心をマウスの位置によって変えて、楕円の...
こうすると、マウスの動きに合わせて、サイズ「10,10」の円が...
&ref(mouse_move3.png);
サンプル [[sketch_anime_ellipse3:http://www.catch.jp/prog...
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/prog...
void setup() {
size(250, 250);
frameRate(20);
}
void draw() {
}
void mousePressed() {
ellipse(mouseX, mouseY, 10, 10);
}
「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の数値で色を指定します。...
**色の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 1.0 (BETA):http:...
-[[color() \ Language (API) \ Processing 1.0:http://proce...
**図形の色を変える [#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:/...
塗りつぶし色を指定する場合には、次のように「fill」命令で...
fill(255, 0, 0);
応用例として、マウスの位置に合わせて、楕円の輪郭色が変わ...
&ref(color_line_mouse.png);
サンプル [[マウスの位置で輪郭色を変える:http://www.catch....
**フェードアウト [#ja1544d8]
前の例では背景を塗りつぶすことで、前に描いた図形も塗りつ...
そこで、半透明な白で画面を塗りつぶすようにしてみましょう...
次のサンプルでは、同じ大きさの円をマウスの位置に描いてい...
&ref(color_circle_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(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」->「(プログラ...
プログラム中で、フォントを指定するには、次のように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/progr...
なお、事前にフォントデータを作っておかなくても利用できるc...
**参考情報 [#z4571756]
-[[text() \ Language (API) \ Processing 1.0 (BETA):http:/...
-[[text() \ Language (API) \ Processing 1.0:http://proces...
*プログラムによる操作 [#ya3ea99a]
次は、絵を描くための素材(マテリアル)を、どのようにプログ...
-[[Processing入門講座:http://ap.kakoku.net/]]
-[[Processing 学習ノート:http://www.d-improvement.jp/lear...
-[[FrontPage - 教員のためのプログラミング入門:http://wiki...
*オブジェクトを使ったサンプルプログラム [#c04679e8]
簡単なサンプルをいくつか作ってみました。
**1個のボールが、はねかえる [#bd38bdaa]
&ref(bounce_a_ball_fade.png);
サンプル [[bounce_ball_1:http://www.catch.jp/program/proc...
1個のボールが、ウィンドウ内をはね回ります。Ballオブジェク...
本当は、ボール１個だけならオブジェクトを作るまでもないの...
**複数のボールが、はねかえる[#k700f4e3]
&ref(bounce_balls_fade.png);
サンプル [[bounce_ball_20:http://www.catch.jp/program/pro...
複数のボールが、ウィンドウ内をはね回ります。ただし、ボー...
Processingに付属のExamplesのうち、「Topics - Motion - Bou...
**衝突する複数のボール [#a825d5a3]
&ref(push_balls_fade.png);
サンプル [[push_balls:http://www.catch.jp/program/process...
複数のボールが、ウィンドウ内をはね回ります。ボール同士も...
-参考：[[Bubbles:http://dokokano.com/ftlabo/applet/Bubble...
**動物の群れ [#l538b340]
動物の群のような動きを再現してみました。
&ref(boid_102.png);
サンプル [[boid:http://www.catch.jp/program/processing/bo...
映画やCG・アニメーションで登場する動物の群などは、boid(ボ...
-[[ボイド (人工生命) - 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...
*いろいろ面白そうなこと [#o4b301b6]
**Processingでサウンド処理 [#sa2347a7]
こちらにまとめることにしました。
-[[Processingでサウンド]]
**GUI [#cb9f6aee]
-[[Processing上でのGUI » Surf on Entropy : Nao Tokui...
-[[Processing依存からの脱却−AWTでのGUIプログラミング(1) -...
*フルスクリーン表示 [#ra9e0c16]
でっかいプロジェクターで見せびらかしたい時は、Fullscreen ...
**準備１：プログラムを軽くする [#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の...
Fullscreen APIがうまく導入できていれば、Processingのエデ...
**プログラム本体を調整する [#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）表示にする - P...
-[[Processingでフルスクリーン（fullscreen）表示にし、なお...
-[[Karappo Interaction Lab. » Processingでフルスクリ...
-[[FullScreen API for Processing:http://www.superduper.or...
*スクリーンセーバー [#hfb871dd]
-Windows／Linux
--[[Processing Screensaver:http://jorgecardoso.eu/process...
-Mac OS X版
--[[Ondra on Tumblr ― Processingのスケッチをスクリーンセ...
*すごそうな作品たち [#oe824252]
-[[proce55ingを使ったGraphic集 - NAVER まとめ:http://mato...
-[[ harukit - proce55ing sketchbook:http://www.harukit.co...
-[[ processing - SourceChord:http://d.hatena.ne.jp/minami...
-[[LeaveBehind » Proce55ing:http://gofar2.iobb.net/~...
-[[Classiclll's Proce55ing Test Page:http://www.geocities...
-[[Processingで遊ぼう - Writing Cafe:http://cafe.eyln.com...
-[[OpenProcessing - Share Your Sketches!:http://www.openp...
*解説書 [#rf275806]
-[[Built with Processing(Ver 1.x対応版)-デザイン/アートの...
--非常に初歩的なところからデザインとかでの利用方法まで網...
-[[Processingプログラミング入門―Javaベースのオープンソー...
--基本から最新の応用まで幅広い感じ。未読。
-[[ビジュアライジング・データ―Processingによる情報視覚化...
--オライリーブックス。開発者本人による解説。本格活用には...
-[[Prototyping Lab ―「作りながら考える」ためのArduino実践...
--ハードウェアとの連携は、これ。未読
*リンク [#e9520480]
-[[Processing入門＋openFrameworks | こどものもうそうblog:...
-[[『ビジュアライジング・データ』感想 | こどものもうそうb...
-[[芸術の秋にProcessingでスケッチプログラミングを始めてみ...
-[[Processing.jp:http://processing.jp/]]
-[[Processing.org:http://processing.org/]]
-[[Processing - Wikipedia:http://ja.wikipedia.org/wiki/Pr...
-[[Language (API) \ Processing 1.0 (BETA):http://www.tech...
-[[Proce55ing Tutorial for Macromedia Minds:http://www.vi...
-[[Processing によるデータ視覚化: 第 1 回 言語と環境:http...
-[[Processing によるデータ視覚化: 第 2 回 インターフェー...
-[[Processing によるデータ視覚化: 第 3 回 2 次元グラフィ...
-[[Tercel::Diary: Processing でイテレータ:http://tercel-s...
-[[人工言語入門 A 2010 Processingによる高度なモーション：...
-[[Processing用コンソール対話型プログラム開発フレームワー...
-[[Java基礎文法最速マスター - いろいろ解析日記:http://d.h...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
