JavaDoでしょう #08　スピーカー枠にて発表した資料の修正・加筆版です。

1. Javaユーザに知ってほしい
Processing入門
JavaDoでしょう #08 （2017/01/15）

2. 自己紹介
@chicken Jr.
社会人2年目のSE
業務はJavaメイン
初LTで緊張しており大変です

3. 今日やること
Processingって？
Processingの作品紹介
Processingでプログラムを書いてみる
Processingのサンプルを見てみる

4. Processingって？
『オープンソースプロジェクトであり、
かつてはMITメディアラボで開発されていた。
電子アートとビジュアルデザインのための
プログラミング言語であり、統合開発環境で
ある。(Wikipedia)』
作者は Casey ReasとBenjamin Fry

5. Processingって？
『Java を単純化し、グラフィック機能に特化し
た言語といえる。(Wikipedia)』
Processingは
「Java」で できている

6. Processingの作品紹介
MSAFluid for processing
https://vimeo.com/groups/processing/videos/3975324
Firewall
https://vimeo.com/54882144
Magnetosphere (iTunes8のビジュアライザプラグイン)
http://hubpages.com/technology/Magnetosphere-music

7. Processingでプログラムを書いてみる
https://processing.org/のDownloadから入手
最新版は3.2.3(2016/11/7リリース)
対応OS Windows, Linux, Max OS X

8. Processingでプログラムを書いてみる
「Hello World!!」を表示させよう

9. Processingでプログラムを書いてみる
「Hello World!!」を表示させよう
void draw() {
println(“Hello World!!");
}

10. 実行結果

11. Processingでプログラムを書いてみる
「Hello World!!」を表示させよう
void draw() {
println(“Hello World!!");
}
 なぜ複数行でてくるの？

12. Processingでプログラムを書いてみる
プログラムソースの構成
void setup() {
// セットアップ
}
void draw() {
// 描画処理
}

13. Processingでプログラムを書いてみる
setup()
プログラムの開始時、一番最初に実行される
1回だけ実行される
draw()
Setup関数のあとに実行される
プログラムを実行している間、繰り返される

14. Processingでプログラムを書いてみる
「Hello World!!」を表示させよう
void setup() {
noLoop();
}
void draw() {
println(“Hello World!!");
}

15. Processingでプログラムを書いてみる
「Hello World!!」を表示させよう
void setup() {
noLoop();
}
void draw() {
println(“Hello World!!");
}

16. 実行結果

17. Processingでプログラムを書いてみる
ディスプレイウィンドウに「Hello World!!」を表示させよう
void setup() {
size(800, 400);
}
void draw() {
textSize(100);
fill(0);
text("Hello World", 0, height/2);
}

18. 実行結果

19. Processingでプログラムを書いてみる
「Hello World!!」にアンダーラインを引こう
void setup() {
size(800, 400);
}
void draw() {
textSize(100);
fill(0);
text("Hello World", 0, height/2);
rect(0, 200, width, 10);
}

20. 実行結果

21. Processingでプログラムを書いてみる
マウスクリックイベントを書いてみよう
int r = 0;
int g = 0;
int b = 0;
void setup() {
size(300,300);
}
void draw() {
background(r, g, b);
fill(255);
ellipse(mouseX, mouseY, 20, 20);
}
void mouseClicked(){
r = 0;
g = mouseX;
b = mouseY;
}

22. 実行結果
マウスの現在位置を○で表現しています。
クリック箇所のXY座標を取得して、背景色を変更します。

23. Processingでプログラムを書いてみる
画像を表示、加工してみる
PImage img;
void setup() {
size(400, 200);
img =
loadImage("icon1007.png");
}
void draw() {
tint(0, 153, 204); // Tint blue
image(img, 0, 0, 200, 200);
noTint();
image(img, 200, 0, 200, 200);
//filter(THRESHOLD);
//filter(INVERT);
}

24. 実行結果
tint関数を使用し、画像全体に指定色を合成します。

25. Processingでプログラムを書いてみる
画像を表示、加工してみる２
PImage img;
void setup() {
size(400, 200);
img =
loadImage("icon1007.png");
}
void draw() {
tint(0, 153, 204); // Tint blue
image(img, 0, 0, 200, 200);
noTint();
image(img, 200, 0, 200, 200);
filter(THRESHOLD);
//filter(INVERT);
}

26. 実行結果
THRESHOLDフィルタは画像色を2値化（白、黒）します。

27. Processingでプログラムを書いてみる
画像を表示、加工してみる３
PImage img;
void setup() {
size(400, 200);
img =
loadImage("icon1007.png");
}
void draw() {
//tint(0, 153, 204); // Tint blue
image(img, 0, 0, 200, 200);
//noTint();
image(img, 200, 0, 200, 200);
//filter(THRESHOLD);
filter(INVERT);
}

28. 実行結果
INVERTフィルタは画像色を反転します。

29. Processingのサンプルを見てみる
グラデーションで描画してみる
サンプル Basic > Color > Radial Gradient を参照

30. Processingのサンプルを見てみる
3Dオブジェクトを描画してみる
サンプル Basic > Lights > Directional を参照

31. Processingのサンプルを見てみる
もっとすごいサンプルを鑑賞してみる
→サンプルのDEMOを見る
→公式サイトのExhibition（展示）を見る
https://processing.org/exhibition/
→Processing作品集を見る
https://www.openprocessing.org/
→vimeoを見る
https://vimeo.com/groups/processing

32. おわりに・・・
業務では役立たないかもしれないけれど、
気が向いたら触ってみませんか？
需要があれば、もっと詳しい資料をつくるかも