Java processing

Processingを始めてみた

投稿日:2018年11月14日 更新日:

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

Processingを始めるわけ

youtubeでArduinoを使った作品を見ているとこのような動画が出て来ました。

動画を見るとArduinoを使ったレーダーシステムのようです。
単純にこれが作りたいので「processing」と調べると、

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

出典:Wikipedia

と書いてあり、Javaを少し触ったことのある自分はラッキーだと思い、始めることにしました。

今の自分のyoutubeのオープニングやエンディングも書ければなーと思ったりも…

Processingとは

先ほども書いた通りprocessingは電子アートとビジュアルデザインのためのJavaをベースとしたプログラミング言語であり、統合開発環境です。
コードが読みやすく、プログラミング初心者にもおすすめであり、ほかの言語(CやJava)などと比べ、短いコードでもきちんと動くようになっています。
また、processingを使って絵だけでなく音も鳴らすことができ、慣れればゲームを作ることができます。
AndroidやiPhone用のアプリも作ることができます。

Processing作品例

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

映像

 

Androidアプリ

Processingのインストール

こちらにアクセスして、自分のパソコンにあったものをダウンロードしてください。→https://processing.org/download/

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

早速書いてみた

公式リファレンス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© 物を作る者 , 2019 All Rights Reserved Powered by AFFINGER5.