狠狠撸

Processingについて
@reona396

? @reona396
? 情報電気電子工学専攻修士1年
? Processingについて研究中
? ブログ:だらっと学習帳
http://blog.livedoor.jp/reona396/
? BNN新社「[普及版]ジェネラティブ?アート」
日本語版編集協力
2

? プログラミング初心者の方へ
? Processingとはどのようなものか
? どうしてProcessingがオススメなのか
? プログラミング経験者の方へ
? 近年のProcessingの進化
? プログラミング教育とProcessing
3

そもそもProcessingとは
4

? Javaベースのプログラミング言語および環境
? コンピュータグラフィック作成に特化
? もちろんオープンソース&無料！
5

PDE
(Processing Develop Environment)
スケッチ
7

エディタ
PDE
(Processing Develop Environment)
実行ボタン
&
停止ボタン
コンソール
モードチェンジボタン
(Java,JavaScript,Android…)
8

PDEのモードチェンジボタンから変更可能
? Javaモード : 通常モード、実行ファイル作成
? JavaScriptモード :Webへの公開
? Androidモード : Androidアプリ作成
? Tweakモード : スケッチの気軽な編集
9

1. Processing.org からProcessingの
zipファイルをダウンロード
2. zipファイルを展開
3. PDEを起動
4. コードを書く
5. 実行ボタンを押す
10

Processingで何が作れるのか
11

“Magnetosphere”
iTunes 公式ビジュアライザ
引用元絵心がなくても簡単に絵が描けるProcessing - ＠IT 12

メジャーリーグにおける
勝率ランキングと
チーム運営費の比較
引用元
書籍「ビジュアライジング?データ」13

アメリカの郵便番号対応地図
14引用元書籍「ビジュアライジング?データ」

アメリカの郵便番号対応地図
15引用元書籍「ビジュアライジング?データ」

? ArduinoはProcessingベース
? センサーデータをProcessingでグラフ化等
18

? PDEに「Android」モード搭載
? ProcessingのスケッチをAndroid上で動作可能
19

Processingがオススメな理由
20

? 文法が簡単
? 環境を整えるのが簡単
? プログラムの結果がすぐにわかる
? プログラムの結果が楽しくわかる
? 応用が利く
? 充実の制作サポート
? Tweakモード
? デバッグとコード補完
? OpenProcessing
21

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
22

例 : 以下の条件をProcessingとJavaで描く
? 大きさは200×200
? 背景は白
? (x,y) = (100,100) の位置に黒いドットを描く
23

引用元
ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass
size(200, 200);
background(255);
// Draw a dot
point(100, 100);
Processingの場合
24

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Color;
public class GraphicsTest extends Applet{
public void paint(Graphics g){
g.setColor(Color.white);
g.fillRect(0, 0, 200, 200);
g.setColor(Color.black);
g.drawLine(100, 100, 100, 100);
}
}
Javaの場合
25
引用元
ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
26

エディタは
アレじゃないと…
まずは
コンパイラを…初心者を悩ませる壁
27

初心者を悩ませる壁
実際に「プログラミング」を始めるまでが
長い！！
28

29
1. Processing.org からProcessingの
zipファイルをダウンロード
2. zipファイルを展開
3. PDEを起動
4. コードを書く
5. 実行ボタンを押す
Processingならこの5ステップだけ！

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
30

? プログラムを書いて実行ボタンを押すだけ
? エラーもコンソールに出力
31

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
32

従来のプログラミングの演習
? 四則演算の結果を出力
? 数字のソート
33

従来のプログラミングの演習
? 四則演算の結果を出力
? 数字のソート
本当はゲームを
作りたいのに…
なんか退屈…
これでアプリとか
作れるのかな…
34

Processingを利用したプログラミング演習
? 単純なお絵描き
? ゲーム作り
? Webに展示して品評会
? Androidアプリへの応用
35

Processingを利用したプログラミング演習
? 単純なお絵描き
? ゲーム作り
? Webに展示して品評会
? Androidアプリへの応用
36
モチベーションを保ったまま
学習に取り組める

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
37

? ProcessingはJavaベース
→それほどクセは強くない
? JavaScriptモードやPythonモード等
他言語との連携の充実化
? アプリケーション作成など実践につながる
38

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
39

? スケッチを実行しながらプログラムを編集
? 変数、色を結果を見ながら変更可能
? 他の人がつくったプログラムの解析に便利
40

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
42

? デバッグ機能が搭載されたことで
リアルタイムにエラーを検出
? コード補完機能による入力補助
43

? 文法が簡単
? 応用が利く
? Tweakモード
? OpenProcessing
44

? Processingの作品投稿?共有サイト
? 多くのProcessingユーザが利用
? コード閲覧やコメント機能等
45

実際に授業をしてみて
46

? 学部二年生向け「プログラミング演習」
? 本来はC言語によるアルゴリズムの実装の学習
? 毎回冒頭でProcessingの情報を提供
? 毎回のアルゴリズム実装の課題はC言語で出題
? 学期末課題としてProcessingで自由に作品制作
? 学部一年生向け「情報リテラシー実習」
? 本来はLinuxの操作に関する授業
? 学期末にプログラミング入門として導入
47

? 二年生の授業
? C言語より興味を持って接してもらえた
? 意欲的な学生は本格的なゲームを制作
? 一年生の授業
? 「このしくみはゲームではこういう所に
利用されています」で注目度が上がった
? 導入、Processingの独自文法の解説、
プログラミングの基礎が90分に収まった
? 自分でプログラムを改造して
積極的にしくみを試している学生も多数
48

? プログラミング初心者の方へ
? Processingとはどのようなものか
? どうしてProcessingがオススメなのか
? プログラミング経験者の方へ
? 近年のProcessingの進化
? プログラミング教育とProcessing
50

ご意見、ご感想はこちらへお願いします
Twitter : @reona396
ご覧いただきありがとうございました！
解説記事もぜひご覧ください！
オープンソースカンファレンス2014福岡に
参加しました : だらっと学習帳
51

狠狠撸

プログラミング初心者さん歓迎！アートでデザインなプログラミング言語 Processing について

More Related Content

プログラミング初心者さん歓迎！アートでデザインなプログラミング言語 Processing について

狠狠撸

プログラミング初心者さん歓迎！ アートでデザインなプログラミング言語 Processing について

More Related Content

プログラミング初心者さん歓迎！ アートでデザインなプログラミング言語 Processing について

プログラミング初心者さん歓迎！アートでデザインなプログラミング言語 Processing について

プログラミング初心者さん歓迎！アートでデザインなプログラミング言語 Processing について