授業内容・計画(詳細)の情報


ページを読み終えましたら、ブラウザを終了させてください。

【基本情報】
2018年度 春学期  
授業科目名 マルチメディアコンピューティング
曜日 時限 金-4
テーマ プログラミング言語Processingによるビジュアルデザイン
キーワード Processing ビジュアルデザイン インタラクティブ


【授業要旨または授業概要】
 
ProcessingはJavaをベースにした開発環境です。Processingに内蔵されているエディタで

プログラムを書き、実行するだけで、Windows、Mac、Linuxで動作するグラフィカルなソ

フトウェアを作成できます。映像や音、またペンなどの入力インターフェースを使いこな

すことで、インタラクティブなソフトウェア、ゲーム、スクリーンセーバーなどを作成す

ることができます。

Processingが登場する以前は、JavaやC++などの高度なプログラミング言語を十分に学習

した後でないとイメージや音を扱うことができませんでした。しかしProcessingを利用す

ることで、イメージや音を操作するソフトウェアを作りながら、プログラミングに関する

基礎知識を学習することができます。

Processingには主に以下のような特徴があります。

・Javaをベースにした手軽なプログラミング環境

・エディタが内蔵され、すぐに作り始めることができる

・作ったソースコードはクリックひとつですぐに動作

・作品をWeb用に出力し、手軽に公開できる

・Windows、Mac、Linuxのクロスプラットフォームで動作

・オープンソースソフトウェアで無償で使える

・マウスだけでなく、マイク、カメラ、ペンなどのさまざまな入力機器を扱える

Processingはこれらの特徴により、インタラクティブアートやインタラクションデザイン

で試作品を作るために使われることも多くあります。また、美術館でのインスタレーショ

ン、広告などにも使われています。


このようにProcessingは多様な分野で扱われているオープンソースソフトウェアであり、

今、最も注目されているソフトウェアの1つにも挙げられる。


本授業では、ICT社会におけるUIなどのインタフェースデザインの概念を学びProcessing 

によるWeb、グラフィック、インタラクティブコンテンツの制作を通じ、ビジュアルデザ

インの基本的な作成方法の習得を目指している。


【学修の到達目標】
◆授業で育成する力スキル

全学共通:自ら考える力

センター:創造と表現力


◆学修の到達目標

1.インターフェースデザインの概念を理解している

2.プログラミング言語によるビジュアルデザインの原理を理解している

3.図形描画における座標空間のイメージができる

4. インタラクティブな動きの仕組みを理解している

5. 習得した知識や技術を基に、イメージしたビジュアルデザインの作品を作成できる
添付ファイル:インターフェースデザイン学修の到達目標.xlsx

【授業計画】
◆スケジュール
1.【ガイダンス】 インターフェースデザインとは
インターフェースデザインの例 
フラットデザインとは 
プロセッシングとは 公式サイト

2.プロセッシングの起動と使い方 
画面構成について ツールバー 実行ボタン エディターエリア 
スケッチについて 1つのプログラムの呼称 
タブについて メッセージエリア
実行と表示について 
コンソールについて 
グラフィック表示について 
保存について 
リファレンスの参照について

3.グラフィックの描画 
描画領域について 背景色の指定 四角形の描画 始点の指定引数の設定 
定数について 
コメント表示への切り替えについて 描画モードの切り替え 
rectModeについて 座標指定の設定


4.グラフィックの描画2 
色の指定方法 塗りの設定 色の設定 RGBについて 透明度の指定 
HSBによる色の指定 塗りなしの設定 
線の設定 線の色の指定 枠線の太さの指定 枠線の非表示設定

5.グラフィックの描画3 
点の指定 
直線の指定 
円の指定 
円弧の指定 
任意の形体の描写 beginShape、vertex、endShape

6.グラフィックの描画4  
画像ファイルの扱い方 幅と高さの指定 塗りの指定 
グレイスケールの設定 
ぼかしの設定

7.テキストの描画 
変数の宣言 
フォントの指定 
テキストサイズの指定 
テキストカラーの指定 
テキスト表示の位置の指定


8.図形の変形 
図形の変形の考え方 
座標空間の設定について 移動の設定 回転の設定 縮小・拡大の設定 

9.立体オブジェクトの描画 
引数の設定について 
座標空間の変形 
立方体の描画(box) 
球体の描画(sphere)

10.アニメーションの基本設定 
setup、draw 
形体と速度の設定 
インタラクティブな動きの設定 
マウスの情報を取り込む mouseX, mouseY、mousePressed、mousePressed()

11.ライブラリの導入 
ライブラリとは 
インストールと利用方法

12.コンテンツ課題制作

13.コンテンツ課題制作

14.コンテンツ課題発表
◆予習・復習
本授業では、授業前、授業後に各自が予習、復習を行うことを推奨する。具体的には、予
習と復習の合計時間が4時間以上になるよう構成をする。例えば、授業前に教科書を2時
間程度読んで予習を行い、授業後に教科書やプリント等の配布資料を用いて2時間程度復
習する。

1.【ガイダンス】 インターフェースデザインとは
事前学習:シラバスを事前に確認する
事後学習:身近にあるインターフェースデザインやUI、ビジュアルデザインを調べる

2.プロセッシングの起動と使い方
事前学習:Processingの基本操作について調べる
事後学習:画面構成や各ツールの役割を確認する

3.グラフィックの描画
事前学習:Processingグラフィック描画にはどのような種類があるのか調べる
事後学習:座標指定の設定などグラフィック描画の基本操作を確認する

4.グラフィックの描画2
事前学習:グラフィック描画における色の指定方法はどのように行うのか調べる
事後学習:色の指定方法におけるRGBとHSB、カラーコードの違いを確認する

5.グラフィックの描画3
事前学習:点や線の描画方法について調べる
事後学習:任意の形体の描写における注意点を確認する

6.グラフィックの描画4
事前学習:グラフィックの描画における画像ファイルの扱い方について調べる
事後学習:画像ファイルの扱い方における適切な方法の選択について確認する

7.テキストの描画
15.	事前学習:テキストの描画とグラフィックの描画の違いについて調べる
事後学習:テキスト描画の操作方法について確認する

8.図形の変形
事前学習:座標空間の設定について確認する
事後学習:図形の変形における移動・回転の設定の相違点を確認する

9.立体オブジェクトの描画
事前学習:立体オブジェクトの描画にはどのような種類があるか調べる
事後学習:立方体と球体の描画の相違点について確認する

10.アニメーションの基本設定
事前学習:動作設定の方法について調べる
事後学習:インタラクティブな動作設定について確認する

11.ライブラリの導入
事前学習:ライブラリという考え方について調べる
事後学習:ライブラリの活用方法について確認する

12.コンテンツ課題制作
事前学習:コンテンツ課題を構想する
事後学習:コンテンツ課題のラフスケッチを確認する

13.コンテンツ課題制作
事前学習:コンテンツ課題のソースコードの確認を行う
事後学習:コンテンツ課題の動作確認を行う

14.コンテンツ課題発表
事前学習:コンテンツ課題のプレゼンテーションの準備をする
事後学習:自分以外の作品との相違点を確認し作品の評価を行う
◆集中授業の期間
2018/04/13から2018/07/20まで

【履修上の注意点】
本授業を履修する際には、初回ガイダンスの出席が必須である。初回の授業を欠席し、履

修エントリーに未登録の学生は、履修対象とならないので注意すること。なお、初回ガイ

ダンスに出席する際には、筆記用具を必ず持参すること。

【成績評価の基準および方法】
出席(授業態度を含む)[25%]、レポート課題 [25%]、コンテンツ課題 [50%]

の総合評価で行います。

なお、出席回数が全体の2/3以上の学生が評価の対象となります。


【教科書・参考書】
区分 書名 著者名 発行元 定価
教科書 ガイダンス時にお話しします。      
参考書 ガイダンス時にお話しします。      


【その他の教材】
資料、プリント、データは適宜、配布します。


【担当教員への連絡方法】
質問は、授業時および下記の電子メールアドレスで受け付ける。 


【担当教員のメールアドレス】

 kohei◎tokai-u.jp (◎を@に変えてください)

 
メール本文先頭に,学生証番号・氏名・授業名を明記すること。 

PAGE TOP