Processingをはじめてみる!ダウンロード方法【Processing入門】

Processing

Processingというプログラミング言語を使ってプログラミングを学んでみます。

参考にしたのは『Processingを始めよう』という本です。

このプログラミング言語を使えば、直感的に様々なイメージやアニメーション、インタラクションのビジュアルを生み出すソフトウェアなどを作れます。

 Processingのダウンロード

まずは、https://processing.org/download/ からProcessingをダウンロードしてください。ダウンロードしたら現れるProcesssing.appアイコンはアプリケーションフォルダに入れてください。

そしたら、早速スケッチを書いてみましょう。

Processingではプログラミングのことをスケッチと言います。

Processingのアイコンをダブルクリックして立ち上げてください。

シンプルなエディターが出てきます。

 円をかいてみる

「ファイル」メニューから「新規」を選び、エディタに書き込みましょう。

ellipse(50, 50, 80, 80);

書き込んだら、実行ボタン(Run)を押してください。

新しいウィンドウが現れそこに円が絵がかれているはずです。

できました!

嬉しいですね!!

できました!

嬉しいですね!!

ellipse(x, y, w, h)

このコードは、円を描く時のコードで、xとyは円の中心の座標を表し、wは円の幅、hは円の高さを表します。

こんな感じでProcessingでは簡単にコードをかけてしまいます。

円の生成

次は<円の生成>を書いてみましょう。

void setup() {
	size(480, 120);
}

void draw() {
	if (mousePressed) {
	fill(0);
	} else {
	fill(255);
	}
	ellipse(mouseX, mouseY, 80, 80);
}

かけたらまた実行ボタンを押してみましょう。

ウィンドウの上をマウスやトラックパッドで動かしてください。

そしてクリックしてください。マウスを押したまま動かしてみてください。

どうでしょうか?

できたでしょうか??

すごい楽しいですね!

最初の

void setuo() というのは一回だけ実行される設定のようなものです。ここでは幅480ピクセルと高さ120ピクセルのウィンドウを開くという命令です。

そのあとの、void draw() がそのウィンドウに書く内容が描かれます。

if (mousePressed) というのはもしマウスが押されたら(真ならば)、カッコ以下のことが行われるという命令です。

else は、もしそうでなければ(偽ならば=マウスが押されなければ)カッコ以下が実行されるということです。

fill(0) というのは円の中の色が黒ということです。

つまり、マウスが押されている時は円の中が黒になります。

fill(255) というのは円の中が真っ白ということです。

ellipse(mouseX, mouseY, 80, 80) というのはマウスがある箇所が円の中心の座標となり、幅と高さが80の円が描かれるという命令です。

まとめ

Processingを使うとこんなことがわりと簡単にできてしまいます。

Processingはプログラムが専門でないアートや数学の学生向けに作られているのでそこまで難しく複雑でないように作られています。

これから一緒にゆっくりじっくり学んでいきましょう。

コメント