教育事例紹介　メディアアート（音楽、CG）

Processingを活用した数式表現図形の教育

1．はじめに

　大阪芸術大学キャラクター造形学科は、「キャラクター原論」をベースにしてマンガ制作、アニメーション制作、ゲームデザインの３領域で構成されています。Processingを活用した数式表現図形は、本学科の専門教育科目におけるIT基礎研究の教材の一つとして取り上げています。本科目では、キャラクター制作に関わる芸術活動支援のためのITを体系的・系統的に理解するとともに、これに関わる技能を実践的かつ総合的に修得することを目指しています。また両者の知識・技術によって、キャラクター制作に関わる芸術活動の道具としてコンピュータを使えることも目的としています。本稿では、数式表現図形を用いた教育事例を紹介し、教材と動機付けの関連および課題について報告します。

2．Processingを活用した教育実践

（1）数式表現図形の制作環境
　本科目では、数式表現図形の制作環境として、Processingを６授業時間において活用します。Processing は、描画機能が一式揃ったシステムで、MIT のCasey ReasとBen FryによってJava言語をベースにして開発され、現在もバージョンアップが行われています。本制作環境では、簡単な関数で2D、3D図形が描画でき、比較的簡単なソースコードでアニメーション効果なども含めた美しいアートワークが作成できるので、デザイン系学生への教育に利用されています。Processingにおける処理中のシンタックスはJava言語と類似し、視覚的な作品を通じてプログラミングの基礎も学ぶことができます。また、Processingはメディアアートの祭典として開催されるARS Electronicaにおいて最優秀賞のGolden nicaを受賞しています。
　Processingのインタフェースを図１に示します。図１中央部がテキストエディタで、一般的なエディタと同様の操作でステートメントなどのソースコードが記述できます。テキストエディタの上部に、ソースコードの実行ボタン、プログラムの停止ボタン、テキストエディタのクリアボタンが配置され、GUI環境でコーディングが行えます。また、ウィンドウ左側上部“File”のプルダウンメニューから、“Save As...”でソースコードの保存、“Export“でjar(Java archiver)ファイルが出力できます。jarファイル内のJavaアプレットを使えば、Processingで制作した数式表現図形をWebページで公開することも可能です。

図１　Processingのインタフェース

（2）教育内容と教材
　Processingによる数式表現図形の制作では能動的な学習活動が中心になりますが、そのための基礎的知識とプログラミング技能が必要になります^[1]。この観点から、数式表現図形の教育内容を以下の１）〜７）に設定しました。教材は、J.M.KellerのARCS動機付けモデル^[2]を考慮し、ベジェー曲線とフラクタル図形を用いて作成しています。
　１）数式表現図形の概念
　２）プログラミングの基本構造と技法
　３）Processingインタフェースの操作
　４）Processingの基本ステートメント
　５）数式表現の基本図形と座標
　６）ベジェー曲線、フラクタル図形の仕組み
　７）Processingによる数式表現図形の制作

（3）Processingによる数式表現図形
　本授業においてProcessingで制作した数式表現図形の一部を図２〜４に示します。
　図２（a）-（b）は、Processingのbezier関数を使い、ベジェー曲線の形状と色を変化させながら描画します。本図形では、ベジェー曲線が波のように動いて増殖し、図２（a）から（b）へと遷移していきます。図２（c）は２本の太いベジェー曲線が、その形状と色を変化させながら、微生物のように円内を動き回ります。図３はフラクタル図形を使って木を表しています。一つウィンドウ上で、木の形状と色を変化させながら、木が次々に生えるように描画していきます。木の形状と色は，Processingのround関数によって生成され、起動ごとに異なる図形が描画されます。図４は、木とその陰をフラクタル図形で表しています。図形は、マウス移動で図４上段左側から下段右側へと、mouse関数によってインタラクティブに遷移します。木と影の形状はマウスの左右移動で伸縮し、木の色はマウスの上下移動で緑から青色に変化します。

図２　ベジェー曲線による数式表現図形

図３　フラクタルによる数式表現図形（a）

図４　フラクタルによる数式表現図形（b）

3．数式表現図形と動機付けの関連

（1）動機付けの解析方法
　能動的な学習活動が中心になる数式表現図形の制作では、プログラミング学習への「動機付け」が重要であると考えられます。そこで数式表現図形と動機付けの関連を解析する一方法として、数式表現図形の美しさへの関心とプログラミング学習の動機付けに着目しました。Processingを活用した学習者への動機付けの解析は、ARCS動機付けモデルを適用しました。本モデルは学習への動機付け因子を記述した教育理論で、学習意欲に関わる因子を、注意（Attention）、関連性（Relevance）、自信（Confidence）、満足（Satisfaction）の四つであると仮定しています。それぞれの因子は、さらに三つの下位カテゴリーに分割され、これら因子に関する動機付けの方略が示されています。

（2）動機付けレベルの測定方法
　学習者の動機付けレベルの測定方法として、SIEMアセスメント尺度^[3]を使用しました。これは、学習者のプログラミング学習に対する動機付けの度合いを客観的に測定するための尺度で、上述のARCS動機付けモデルを背景理論として使用しています。この尺度を用いて学習者の動機付けレベルを測定するためには、評価要素を含んだアンケートを実施します。アンケート項目は、ARCS動機付けモデルの下位カテゴリーに基づく12項目の質問に加え、７項目が追加されて19の質問項目が設定されています。本稿では、これら質問項目に加え、“美しさへの関心”に関する二つの項目を追加しました。SIEMアセスメント尺度と追加項目を表１に示します。学習者は、それぞれの質問項目に対して５段階のリッカートスケールによって自己評価します。動機付けレベル（以下、MVと呼ぶ）は、式（１）によって算出します。
MV = （17）重要度 ×（19）期待度････（１）

表１　SIEMアセスメント尺度

（3）解析結果と考察
　SIEMアセスメント尺度を用いたアンケートを、数式表現図形に関する授業の開始時、中盤、終了時の３回実施し、動機付けレベルの評価要素を測定しました。その解析結果から学習者を、MVの上位群、中位群、下位群に分類して表２に示します。表２のMVの下位群において因子１（授業構成因子）と因子２（自発性因子）で顕著なMVの減少が見られました。この傾向を詳細に調査した結果、因子１では「項目（４）理解度」、因子２は「項目（９）向上努力度」の減少率が大きいことが判明しました。これより、これら二つの項目がMVの減少に影響したと考えられます。この要因の一つとして、学習フェーズの進行に伴い、数式表現図形を制作するためのアルゴリズムが複雑になったことが考えられます。
　次に、「（９）プログラミング学習への向上努力度」に対する「（a1_9）Processingで美しい作品のための向上努力度」の有意差を示すp値を算出しました。このp値から、学習開始時に項目（９）と項目（a2_9）に有意な差が見られなかったのが、学習フェーズの進行にともなって有意水準５％で差が生じました。本測定データに関する他の解析結果も含めて考察した結果、数式表現図形の美しさへの関心とその学習の動機付けに関連があることが統計的に確認できました。

表２　因子1-4の平均値

因子１： 授業構成因子 因子２： 自発性因子 因子３： 双方向性因子 因子４： 参加性因子 上位群 20≦MV 開始時 中盤 終了時 4.1 4.3 4.3 3.9 4.2 4.1 4.2 4.3 4.4 4.6 4.5 4.8 中位群 10≦MV＜20 開始時 中盤 終了時 3.7 3.5 3.4 3.6 3.2 3.4 3.9 4.1 4.0 4.0 4.1 4.1 下位群 MV＜10 開始時 中盤 終了時 3.6 2.4 3.0 2.8 2.4 2.6 3.5 3.4 3.8 3.8 3.4 3.5

4．まとめ

　数式表現図形を教材とした教育実践を行い、SIEMアセスメント尺度によって動機付けレベルを測定しました。さらに、数式表現図形の美しさへの関心に関する評価項目によって、動機付けとの関連を分析しました。その結果、授業開始時からMVが低い下位グループに関しては、さらに詳細な要因調査が必要であると考えられます。今後は、数式表現図形と動機付けの関連分析の領域を拡大し、SIEMアセスメント尺度に基づいた詳細な分析を行い、数式表現図形の美しさをより強く喚起できる教材開発と教授方法の改善を進めたいと考えています。