Processing
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[11_YoshidaY]]
#contents
*[[Processing:http://processing.org/]]とは [#u3a572fc]
Processingとは、～ｋｗｓｋは[[wikipedia:http://ja.wikiped...
要約「こういうプログラム作りたいんだけど…いきなりガチで作...
しかもこれならアーティストとか文系の人でも使えんじゃね？」~
ってゆうノリで作られたプログラミングできる環境のことです。~
つまり、これ一本だけで、コード作成もできるし実行もできま...
**ダウンロード方法 [#p330e4d1]
***①[[ProcessingのHP:http://processing.org/]]の、[[Downlo...
***②ややこしい英語なんて読む必要ありません。ダウンロード...
「1.5.1 | 15 May 2011」(versionが上がる度変わるけど)と書...
↓Linux ↓Windows~
↓Mac OSX ↓Windows[Without Java]~
のどれかを押すとzipファイルのダウンロードが始まります。~
自分のPCに応じてどれかDLしてください。ポケモン選ぶみたい...
とりあえずwindows[Without Java]はオススメしません。~
**使い方 [#mc902be6]
ダウンロードしたら、ダウンロードフォルダにありますよね。~
zipファイルの展開のやり方は説明しなくてもいいですよね。zi...
では展開した所から話が始まります。~
***①Processingを起動 [#se95aa86]
Processing1.5.1というフォルダの中にprocessing.exeというの...
***②Processingで円を描画してみる [#f8b8d408]
Processingの一番簡単なコードを書きましょう。（普通はHello...
ellipse(50, 50, 30, 30);
これをコピペして再生(実行)ボタン押すと円が描画されますね。~
これは円を描くためのコードです。~
ellipse(X座標,Y座標,円の横幅,円の縦幅)
となっていて、最後の~
;
は日本語でいう「。」みたいなものです。これを書き忘れると...
***③Processingでアニメーション [#e0d76b66]
さて、さっきの書き方では一度円が描画されただけで、円が移...
パソコン上でアニメーションするということは、アナログのそ...
つまり何枚もの絵の中を少しずつずらして書いてくと、動いて...
では実際どうやるのか。~
void setup() {
}
void draw() {
}
この二つのvoid、つまり関数を使います。~
Processingに慣れるには、いかにこの二つを上手く使うかがミ...
じゃあ、どういう意味なんでしょうか。~
-setup関数：一度だけ実行。~
ここでは一度だけ実行するコードを書きます。例えば、作りだ...
-draw関数：何度も何度も上から下までループして実行していく...
これは、一般に「メインループ」と言われるものです。ここで...
では、早速サンプルを見てみましょう。~
int x, y;
void setup() {
size(400, 400);
x = 0; y = 0;
}
void draw() {
background(255);
x++; y++;
ellipse(x, y, 40, 40);
}
これをコピペして実行してみてください。円が斜め下方向に動...
これが理解できれば、Processingの第一歩です。~
-int：整数型~
まずは変数の入れ物の説明です。~
数字には整数、少数などなど、色々ありますよね。~
ほとんどのプログラミング言語では、整数は整数、少数は少数...
int x, y;
ここでは、xとyっていう整数を入れるための箱を用意して下さ...
あと、変数の定義はsetupの前に書くのが基本です。~
-size~
これはウィンドウのサイズを決めるための関数です。~
size(横幅,縦幅);
Processingでは、一度指定したウィンドウのサイズを後で変更...
それは、長所であり短所なんですが、ここではあまり触れませ...
-変数へ数字を代入、初期化。~
x = 0; y = 0;
プログラミングにおいて、数字を代入するときに使う記号は、...
さらに、setupの中で最初の数字を入れておくことを「初期化」...
※ちなみにプログラミングでの「等しい」は「[[==:http://proc...
-background：背景の色~
background(255, 0, 0);
↑では赤色になります。基本的に何も設定しなければ[[RGB:http...
ここで大切なのが、backgroundがsetupの中にあるか、drawの中...
--setupの中だと、背景の紙の上に円が何枚も上から重なってい...
--drawの中だと、一つの円と一枚の背景の紙が常に一緒に重な...
描画したものを全て残したいならsetup、常に更新したいならdr...
-変数の数字を変更する~
--足し算~
x++;
x += 3;
x++と書くとxに1ずつ足されていきます。~
x += 3と書くとxに3ずつ足されていきます。~
--引き算~
x--;
x -= 3;
同じ要領です。~
--掛け算~
x *= 2;
xに2をかけていきます。~
--割り算~
x /= 2;
何かを動かすにはこれを使います。~
終了行:
[[11_YoshidaY]]
#contents
*[[Processing:http://processing.org/]]とは [#u3a572fc]
Processingとは、～ｋｗｓｋは[[wikipedia:http://ja.wikiped...
要約「こういうプログラム作りたいんだけど…いきなりガチで作...
しかもこれならアーティストとか文系の人でも使えんじゃね？」~
ってゆうノリで作られたプログラミングできる環境のことです。~
つまり、これ一本だけで、コード作成もできるし実行もできま...
**ダウンロード方法 [#p330e4d1]
***①[[ProcessingのHP:http://processing.org/]]の、[[Downlo...
***②ややこしい英語なんて読む必要ありません。ダウンロード...
「1.5.1 | 15 May 2011」(versionが上がる度変わるけど)と書...
↓Linux ↓Windows~
↓Mac OSX ↓Windows[Without Java]~
のどれかを押すとzipファイルのダウンロードが始まります。~
自分のPCに応じてどれかDLしてください。ポケモン選ぶみたい...
とりあえずwindows[Without Java]はオススメしません。~
**使い方 [#mc902be6]
ダウンロードしたら、ダウンロードフォルダにありますよね。~
zipファイルの展開のやり方は説明しなくてもいいですよね。zi...
では展開した所から話が始まります。~
***①Processingを起動 [#se95aa86]
Processing1.5.1というフォルダの中にprocessing.exeというの...
***②Processingで円を描画してみる [#f8b8d408]
Processingの一番簡単なコードを書きましょう。（普通はHello...
ellipse(50, 50, 30, 30);
これをコピペして再生(実行)ボタン押すと円が描画されますね。~
これは円を描くためのコードです。~
ellipse(X座標,Y座標,円の横幅,円の縦幅)
となっていて、最後の~
;
は日本語でいう「。」みたいなものです。これを書き忘れると...
***③Processingでアニメーション [#e0d76b66]
さて、さっきの書き方では一度円が描画されただけで、円が移...
パソコン上でアニメーションするということは、アナログのそ...
つまり何枚もの絵の中を少しずつずらして書いてくと、動いて...
では実際どうやるのか。~
void setup() {
}
void draw() {
}
この二つのvoid、つまり関数を使います。~
Processingに慣れるには、いかにこの二つを上手く使うかがミ...
じゃあ、どういう意味なんでしょうか。~
-setup関数：一度だけ実行。~
ここでは一度だけ実行するコードを書きます。例えば、作りだ...
-draw関数：何度も何度も上から下までループして実行していく...
これは、一般に「メインループ」と言われるものです。ここで...
では、早速サンプルを見てみましょう。~
int x, y;
void setup() {
size(400, 400);
x = 0; y = 0;
}
void draw() {
background(255);
x++; y++;
ellipse(x, y, 40, 40);
}
これをコピペして実行してみてください。円が斜め下方向に動...
これが理解できれば、Processingの第一歩です。~
-int：整数型~
まずは変数の入れ物の説明です。~
数字には整数、少数などなど、色々ありますよね。~
ほとんどのプログラミング言語では、整数は整数、少数は少数...
int x, y;
ここでは、xとyっていう整数を入れるための箱を用意して下さ...
あと、変数の定義はsetupの前に書くのが基本です。~
-size~
これはウィンドウのサイズを決めるための関数です。~
size(横幅,縦幅);
Processingでは、一度指定したウィンドウのサイズを後で変更...
それは、長所であり短所なんですが、ここではあまり触れませ...
-変数へ数字を代入、初期化。~
x = 0; y = 0;
プログラミングにおいて、数字を代入するときに使う記号は、...
さらに、setupの中で最初の数字を入れておくことを「初期化」...
※ちなみにプログラミングでの「等しい」は「[[==:http://proc...
-background：背景の色~
background(255, 0, 0);
↑では赤色になります。基本的に何も設定しなければ[[RGB:http...
ここで大切なのが、backgroundがsetupの中にあるか、drawの中...
--setupの中だと、背景の紙の上に円が何枚も上から重なってい...
--drawの中だと、一つの円と一枚の背景の紙が常に一緒に重な...
描画したものを全て残したいならsetup、常に更新したいならdr...
-変数の数字を変更する~
--足し算~
x++;
x += 3;
x++と書くとxに1ずつ足されていきます。~
x += 3と書くとxに3ずつ足されていきます。~
--引き算~
x--;
x -= 3;
同じ要領です。~
--掛け算~
x *= 2;
xに2をかけていきます。~
--割り算~
x /= 2;
何かを動かすにはこれを使います。~
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
