Processing
の編集
https://lab.yoneyone.net/php/pukiwiki/?Processing
[
トップ
] [
編集
|
差分
|
履歴
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[11_YoshidaY]] #contents *[[Processing:http://processing.org/]]とは [#u3a572fc] Processingとは、～ｋｗｓｋは[[wikipedia:http://ja.wikipedia.org/wiki/Processing]]へ～というものです。~ 要約「こういうプログラム作りたいんだけど…いきなりガチで作る時間もないし、途中で飽きたら時間もったいないし、コンピューティング言語って難しいから楽したいよねっ。 しかもこれならアーティストとか文系の人でも使えんじゃね？」~ ってゆうノリで作られたプログラミングできる環境のことです。~ つまり、これ一本だけで、コード作成もできるし実行もできます。ややこしいことも簡略化されてます。ダウンロードして解凍したらそこからお料理を始められます。~ **ダウンロード方法 [#p330e4d1] ***①[[ProcessingのHP:http://processing.org/]]の、[[Download:http://processing.org/download/]]を開きます。 [#w24ddc5a] ***②ややこしい英語なんて読む必要ありません。ダウンロードしましょう。 [#m78a7860] 「1.5.1 | 15 May 2011」(versionが上がる度変わるけど)と書いてる所の↓、~ ↓Linux ↓Windows~ ↓Mac OSX ↓Windows[Without Java]~ のどれかを押すとzipファイルのダウンロードが始まります。~ 自分のPCに応じてどれかDLしてください。ポケモン選ぶみたいなもんです。~ とりあえずwindows[Without Java]はオススメしません。~ **使い方 [#mc902be6] ダウンロードしたら、ダウンロードフォルダにありますよね。~ zipファイルの展開のやり方は説明しなくてもいいですよね。zipを右クリックしたら書いてます。~ では展開した所から話が始まります。~ ***①Processingを起動 [#se95aa86] Processing1.5.1というフォルダの中にprocessing.exeというのがあります。ダブルクリックしましょう。~ ***②Processingで円を描画してみる [#f8b8d408] Processingの一番簡単なコードを書きましょう。（普通はHello Worldとかやるけど無視無視。~ ellipse(50, 50, 30, 30); これをコピペして再生(実行)ボタン押すと円が描画されますね。~ これは円を描くためのコードです。~ ellipse(X座標,Y座標,円の横幅,円の縦幅) となっていて、最後の~ ; は日本語でいう「。」みたいなものです。これを書き忘れるとエラーになります。よくあることです。~ ***③Processingでアニメーション [#e0d76b66] さて、さっきの書き方では一度円が描画されただけで、円が移動したりはできません。アニメーションさせるにはProcessingの特徴を知らないといけません。~ パソコン上でアニメーションするということは、アナログのそれと同じパラパラ漫画です。~ つまり何枚もの絵の中を少しずつずらして書いてくと、動いてるように見えるということです。~ では実際どうやるのか。~ 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://processing.org/reference/equality.html]]」で表します。 -background：背景の色~ background(255, 0, 0); ↑では赤色になります。基本的に何も設定しなければ[[RGB:http://ja.wikipedia.org/wiki/RGB]]で指定します。~ ここで大切なのが、backgroundがsetupの中にあるか、drawの中にあるか。~ --setupの中だと、背景の紙の上に円が何枚も上から重なっていくようになります。~ --drawの中だと、一つの円と一枚の背景の紙が常に一緒に重なっていって、円が重ならずにアニメーションされます。~ 描画したものを全て残したいならsetup、常に更新したいならdrawです。~ -変数の数字を変更する~ --足し算~ 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.wikipedia.org/wiki/Processing]]へ～というものです。~ 要約「こういうプログラム作りたいんだけど…いきなりガチで作る時間もないし、途中で飽きたら時間もったいないし、コンピューティング言語って難しいから楽したいよねっ。 しかもこれならアーティストとか文系の人でも使えんじゃね？」~ ってゆうノリで作られたプログラミングできる環境のことです。~ つまり、これ一本だけで、コード作成もできるし実行もできます。ややこしいことも簡略化されてます。ダウンロードして解凍したらそこからお料理を始められます。~ **ダウンロード方法 [#p330e4d1] ***①[[ProcessingのHP:http://processing.org/]]の、[[Download:http://processing.org/download/]]を開きます。 [#w24ddc5a] ***②ややこしい英語なんて読む必要ありません。ダウンロードしましょう。 [#m78a7860] 「1.5.1 | 15 May 2011」(versionが上がる度変わるけど)と書いてる所の↓、~ ↓Linux ↓Windows~ ↓Mac OSX ↓Windows[Without Java]~ のどれかを押すとzipファイルのダウンロードが始まります。~ 自分のPCに応じてどれかDLしてください。ポケモン選ぶみたいなもんです。~ とりあえずwindows[Without Java]はオススメしません。~ **使い方 [#mc902be6] ダウンロードしたら、ダウンロードフォルダにありますよね。~ zipファイルの展開のやり方は説明しなくてもいいですよね。zipを右クリックしたら書いてます。~ では展開した所から話が始まります。~ ***①Processingを起動 [#se95aa86] Processing1.5.1というフォルダの中にprocessing.exeというのがあります。ダブルクリックしましょう。~ ***②Processingで円を描画してみる [#f8b8d408] Processingの一番簡単なコードを書きましょう。（普通はHello Worldとかやるけど無視無視。~ ellipse(50, 50, 30, 30); これをコピペして再生(実行)ボタン押すと円が描画されますね。~ これは円を描くためのコードです。~ ellipse(X座標,Y座標,円の横幅,円の縦幅) となっていて、最後の~ ; は日本語でいう「。」みたいなものです。これを書き忘れるとエラーになります。よくあることです。~ ***③Processingでアニメーション [#e0d76b66] さて、さっきの書き方では一度円が描画されただけで、円が移動したりはできません。アニメーションさせるにはProcessingの特徴を知らないといけません。~ パソコン上でアニメーションするということは、アナログのそれと同じパラパラ漫画です。~ つまり何枚もの絵の中を少しずつずらして書いてくと、動いてるように見えるということです。~ では実際どうやるのか。~ 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://processing.org/reference/equality.html]]」で表します。 -background：背景の色~ background(255, 0, 0); ↑では赤色になります。基本的に何も設定しなければ[[RGB:http://ja.wikipedia.org/wiki/RGB]]で指定します。~ ここで大切なのが、backgroundがsetupの中にあるか、drawの中にあるか。~ --setupの中だと、背景の紙の上に円が何枚も上から重なっていくようになります。~ --drawの中だと、一つの円と一枚の背景の紙が常に一緒に重なっていって、円が重ならずにアニメーションされます。~ 描画したものを全て残したいならsetup、常に更新したいならdrawです。~ -変数の数字を変更する~ --足し算~ x++; x += 3; x++と書くとxに1ずつ足されていきます。~ x += 3と書くとxに3ずつ足されていきます。~ --引き算~ x--; x -= 3; 同じ要領です。~ --掛け算~ x *= 2; xに2をかけていきます。~ --割り算~ x /= 2; 何かを動かすにはこれを使います。~
テキスト整形のルールを表示する
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
