Java processing

Processingの始め方

2018年11月14日

こんばんは!
今回は電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である「processing」というものをやっていこうと思います。

Processingとは

processingは電子アートとビジュアルデザインのためのJavaをベースとしたプログラミング言語であり、統合開発環境です。

コードが読みやすく、プログラミング初心者にもおすすめであり、ほかの言語(CやJava)などと比べ、短いコードでもきちんと動くようになっています。

また、processingを使って絵だけでなく音も鳴らすことができ、慣れればゲームを作ることができます。

AndroidやiPhone用のアプリも作ることができます。

Processing作品例

processingの作品例を少し載せておきます。
自分もここまでできるように頑張っていこうと思います。

映像

 

Androidアプリ

Processingのインストール

まずは公式サイトにアクセスしてください

 

アクセスするとこのような画面になるので「Download Processing」をクリックします

 

 

ダウンロードページでは自分のパソコンのOSとビット数にあったものをダウンロードしてください

自分のパソコンが何ビットかわからない場合は「コントロールパネル」→「システムとセキュリティ」→「システム」を選択し、”システムの種類”のところに自分のパソコンのビット数が書いてあるので確認してからダウンロードしてください

 

ダウンロード後にこのような画面になりますが、無視で大丈夫です

 

ダウンロードした後にzipファイルを展開すると「processing-3.5.4」のファイルを開いてみましょう

※バージョンによって多少名称が異なります

 

processing.exeをクリックするとソフトが立ち上がります

 

 

 

早速書いてみる

Processingの言語等の勉強は「Processingをはじめよう」がおすすめです

created by Rinker
¥2,200 (2024/03/29 05:15:50時点 Amazon調べ-詳細)

それに加えて

公式リファレンスhttps://processing.org/reference/
クイックリファレンスhttp://www.musashinodenpa.com/p5/

を参考にしつつ、ちょっとしたアニメーションを作ってみました。

void setup()内のsize(x,y)により画面の大きさを決定しています。そしてframeRate(20)より、フレームレート(1秒間に切り替わる画面の数)を定義しています。
次にvoid mousePressed()はマウスがクリックされたときの反応を定義しています。
マウスがクリックされるとtriangle(1920/2,1080-100,1920/2 + 100,1080,1920/2 - 100,1080);により画面下部に黒い三角形ができます。
次にvoid fadeToWhite()はフェードアウト(映像が次第に消えていく)処理を記述しています。
そしてvoid draw()内ではellipse(1920/2,1080/2,mouseX,mouseY);によってマウスのカーソル位置によって円の大きさが変わるように記述しています。
動かしたときの映像をyoutubeにアップしました。

まとめ

今回は「processing」というプログラミング言語、統合開発環境を初めて使ってみました。
これを使うことにより、モノづくりの幅が広がるような気がします。
これからも少しずつ学んでいこうと思います。
今回はこれで終わります。

ではまた!

-Java, processing

Copyright© 物を作る者 , 2024 All Rights Reserved.