× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】Processing入門 (全16回)

最新版のレッスンはこちらから » 【最新版】Processing入門 (全15回)

ビジュアルデザインに特化したプログラミング言語であるProcessingについて、その基本を学んでいきます。

このレッスンでは Processing 2.0b5 を使用しています。

#01 Processingとは何か?
2012年10月31日
このレッスンを作るにあたって参考にさせていただいたサイトを以下にまとめておきました。
http://www.ideaxidea.com/archives/2012/10/processing_references.html
2012年10月31日
・Processingの公式サイト
http://processing.org/
・分野別のリファレンス
http://processing.org/reference/
・A-Zのリファレンス
http://processing.org/reference/alpha.html
#02 はじめてのProcessing
2012年10月31日
Androidモードの場合、Android SDKが必要になります。
http://developer.android.com/sdk/index.html

Android SDKをインストールしたら、右上のモードで「Android」を選択して、Android SDKのあるフォルダを選択します。

PCに Android 端末を接続する前にAndroid側の「設定」-「アプリケーション」-「開発」で「USBデバッグ」をオンにします。

接続したら Play ボタンを押し、しばらく待つと端末上で Processing プログラムが実行されます。
2012年10月31日
JavaScriptモードの場合、

* Playボタンを押すとローカルサーバーが起動して、ブラウザ画面が開く
* Stopボタンを押すとローカルサーバーが終了する (ブラウザはそのまま)

となります。Stopボタンを押さない限り、ファイルを修正して保存したらブラウザをリロードするだけで修正が反映されます。

一度 Stop ボタンを押して再度 Play ボタンを押すと、127.0.0.1: のあとに続く数字(ポート番号)が変わります。
#07 線と塗りを設定してみよう
2012年11月1日
色の指定方法を変更するためのcolorModeという命令もあります。

たとえばそれぞれの範囲を0〜255ではなくて、0〜100にしたい場合は次のように設定します。
colorMode(RGB, 100);

またRGBではなくて、HSBモード(色相、彩度、明度)にしたい場合は次のようにします。
colorMode(HSB);

とにかくカラフルな色で円を描きたい場合などは次のようにするといいですよ。
size(200, 200);
colorMode(HSB);
for (int i = 0; i < 100; i++) {
  noStroke();
  fill(random(0, 255), 0, 0); // 色相だけをランダムに指定してカラフルに。
  ellipse(random(0,200), random(0,200), random(10,100), random(10,100));
}

colorModeについてより詳しくは以下を参考にしてみてください。
http://processingjs.org/reference/colorMode_/