楽しくプログラミングを勉強する【Processing】

最近はプログラムに興味があったり、勉強している人が増えていますね!

今回は楽しく簡単にウィンドウアプリが作成できるプログラミング言語Processingを紹介します。

Processing(プロセッシング)?

Processing公式サイト : https://processing.org/

電子アートとビジュアルデザインのためのプログラミング言語で、Javaをベースにしています。

個人的にはとても簡単にマウス操作や画像処理、図形の描画ができるのでオススメです。

Processingをダウンロードする

早速ダウンロードしてみましょう。

https://processing.org/download/

ダウンロード後、展開するだけで準備は完了です。

簡単なペイントツールを作る

完成形はこんな感じです。

「マウスをクリックすると●が描画される」という簡単なアルゴリズムになっています。

ソースコードはこんな感じです。

/* 初期設定 */
void setup()
{
  size(600, 300);
  background(255);
}

/* 描画(繰り返し) */
void draw() 
{
  if (mousePressed == true) {
    variableEllipse(mouseX, mouseY);
  }
}

/* 丸を書く関数 */
void variableEllipse(int x, int y) {
  float size = 10;
  noStroke();
  fill(0);
  ellipse(x, y, size, size);
}

先ほど展開したフォルダの「Processing.exe」を開いてソースコードをコピー&ペーストしましょう。実行は左上にある再生マークです。

実行して出てきたウィンドウ内で線が描けるようになります。

ちなみに、早く動かすと隙間が空いたり、書いた線を消すことはできません…

プログラムの解説

簡単にソースコードの解説をします。

void setup()

主に初期設定を行います。プログラムを実行したときに一度だけ呼び出される関数です。

size(600,300)はウィンドウのサイズ(横600px,縦300px)を指定しています。

background(255)は画面の背景色(0~255 = 黒~白)を指定しています。

void draw()

主に描画処理を行います。プログラムを実行している間は何度も呼び出される関数です。

if文では「マウスが押されて(mousePressed)いるか(True)?」を常に判定しています。

押されている(True)場合は「variableEllipse(マウスのX座標,マウスのY座標)」という自作した関数を実行します。

void variableEllipse(int x, int y)

呼び出されるたびに●を描画する関数です。

size変数で描画する●の大きさを指定します。

noStroke()は図形の外枠を消す命令です。

fill(0)は図形の色(0~255 = 黒~白)を指定します。

ellipse(x, y, size, size)は●を描画します。引数は左から「描画するX座標」「描画するY座標」「●の横サイズ」「●の縦サイズ」です。

まとめ

テトリスなどのゲームも作れそうなので、チャレンジしてみたいと思います。

公式サイトには標準の関数が確認できるリファレンスもあるので、ぜひ活用してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA