Embed Size (px)
Citation preview
Processingについて
@reona396
@reona396 情報電気電子工学専攻修士1年 Processingについて研究中 ブログ:だらっと学習帳
http://blog.livedoor.jp/reona396/
BNN新社「[普及版]ジェネラティブ・アート」日本語版編集協力
2
プログラミング初心者の方へ
Processingとはどのようなものか
どうしてProcessingがオススメなのか
プログラミング経験者の方へ
近年のProcessingの進化
プログラミング教育とProcessing
3
そもそもProcessingとは
4
Javaベースのプログラミング言語および環境 コンピュータグラフィック作成に特化 もちろんオープンソース&無料！
5
6
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
16
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 Noguchi Class
size(200, 200);background(255);
// Draw a dotpoint(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 Noguchi Class
文法が簡単 環境を整えるのが簡単 プログラムの結果がすぐにわかる プログラムの結果が楽しくわかる 応用が利く 充実の制作サポート
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
まとめ
49
プログラミング初心者の方へ
Processingとはどのようなものか
どうしてProcessingがオススメなのか
プログラミング経験者の方へ
近年のProcessingの進化
プログラミング教育とProcessing
50
ご意見、ご感想はこちらへお願いします
Twitter : @reona396
ご覧いただきありがとうございました！
解説記事もぜひご覧ください！オープンソースカンファレンス2014福岡に
参加しました : だらっと学習帳
51
