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

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 について

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (6)

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

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

Plus de reona396

Plus de reona396 (14)