高等数学教育における Processing の活用について
中 田 文 憲
要旨: プログラミング教育の進展を見据える中で，高等数学教育において，プログラミング環境 Processing の活用 が有効と考えられることを示す。Processing の概要について紹介したのち，先行事例において注目されているソフト ウェア Scratch や GeoGebra と比較して，その長所と短所を示す。また Processing を用いて作成した具体的な教材案 として，2変数関数の値，等高線，勾配ベクトル場，勾配流をインタラクティブに表示するプログラムを紹介する。
最後に，Processing や上記の教材を大学院講義で活用した実践例について紹介する。
キーワード: Processing，高等数学教育，等高線，勾配流，Scratch，GeoGebra
1. は じ め に
初等・中等教育におけるプログラミング教育の開始が目前に迫っている。2020年度改訂となる小学 校学習指導要領［11］では，その総則編において「情報活用能力の育成」が指摘され，算数，理科，総 合的な学習の時間などにおける「コンピュータでの文字入力等の習得」および「プログラミング的思考 の育成」が求められている。
2021年度改訂となる中学校の学習指導要領［12］では，社会におけるコンピュータの役割や影響を 理解するとともに，簡単なプログラムを作成できるようにすることが求められ，特に技術・家庭科にお いてプログラミング教育が実施される。
2022年度改訂となる高等学校学習指導要領［13］では，全ての生徒が履修する「情報 I 」が新設され，
プログラミングの基礎等の内容が必修化される。具体的にはプログラミングやシミュレーションによっ て問題を発見・解決する活動を通して，事象をモデル化したり，シミュレーションを通してモデルを評 価・改善する方法について指導が行われる。
いずれの校種においても，各教科におけるコンピュータ等を活用した学習活動の充実が求められてお り（［10］），特に算数・数学・理科の各科目においては情報機器の利用の重要性が急速に増している。
実際，プログラミング教育や情報機器の教育現場での利用についての研究や実践・検証は盛んに行われ ており，先行研究には枚挙にいとまがない。
しかしこのような段階においてなお，わが国の大学数学教育におけるコンピュータの活用は極めて遅 れていると言わざるを得ない。それはなぜか。
純粋数学とコンピュータ おそらく最大の障害は，純粋数学とコンピュータの相性の悪さにある。例と して高校数学で学ぶ「数学的帰納法（いわゆるドミノ倒し論法）」を挙げよう。これは （1）最初のドミ ノが倒れ，（2）n番目のドミノが倒れたらn+1番目のドミノが倒れる，ならば無限に続くドミノが全 て倒れる，と結論づけるものである。しかしコンピュータでこの操作を実行することはできない。無限 個のドミノを有限の時間で倒しつくすことはできないからだ。従ってコンピュータは円周率πの小数展 開をいくらでも高い精度まで求めることはできるが，その作業は終わらない。
純粋数学と応用数学の境界は曖昧だが，数値計算やデータサイエンスなど，現在応用数学においては
コンピュータは必須の道具になっていると言える。しかし純粋数学ではそうは言えない。確かに，幾何 学における曲面の描画や，代数学におけるグレブナー基底の計算など，コンピュータがその能力を発揮 する場面も増えているが，その範囲は純粋数学全体からすればまだまだ限定的である。
現在，殆ど全ての数学者に普及しているソフトウェアとして数式組版ソフト LaTeX が挙げられるが，
それはあくまでも数式を活字化するための道具に過ぎない。筆者を含め多くの数学者は現在もなお，紙 と鉛筆による計算，黒板での議論によって自身の研究を進めているのである。
純粋数学と応用数学の垣根は今後一層低くなると考えられるものの，現時点での大学初期段階の数学 の講義は，解析学や線型代数学，集合論など，純粋数学に属するものが基本となっている。その講義内 容は少なくとも半世紀前には既に確立されていたと考えられるが（このことは，現在もなお教科書とし て使われる名著「線型代数学入門［5］」や「集合・位相入門［9］」の初版年からも確認できる），この ような状況で，コンピュータやプログラミングを活用した新たな講義手法を導入することはなかなか容 易ではない。
大学数学教育におけるコンピュータ活用 しかし今や使い勝手の良いソフトウェアが開発され，数学教 育の現場におけるコンピュータ利活用も広がりつつある。特にScratchやGeoGebraといった無償ソ フトウェアの活用が先行事例として注目されるが，本稿ではProcessingの活用を提案したい。次の2 つの観点から，Processingの大学数学教育への活用方法とその可能性について検討を行う。
I. プログラミングの知識・経験のない指導者も容易に扱うことができ，効果的な教材を作成するこ とができる。
II. 学習者にとって数学的内容の理解の助けとなるだけでなく，プログラミングの基礎や，ICTの利 活用について学ぶことができる。
また，具体的な教材案として筆者が作成したプログラム「Function Renderer」を紹介し，大学院の講義 での実践例について紹介する。
2. Processingとその他の環境
本節では Processing の他，数学教育・情報教育において注目されているScratch および GeoGebra の 概要について確認し，特に高等数学教育への活用の視点からこれらを比較する。
Processing 倉田・島森［4］の説明を引用しよう:
Processing はMITメディアラボでプログラミング教育を受けていないアーティストやデザイナの
ために開発された教育環境 Dsign By Numbers （DBN）に起源を持つと言われている。（中略）この DBNを基にして大きな画面でフルカラー表示や3次元処理などができるように機能を拡張して
Processing が開発された。2001年秋からMITのメディアラボの授業で使われ始め，2002年夏にα
バージョンが公開されて注目されるようになった。
Processing は Web上で無償で提供されており［16］，特別な準備は必要なく，シンプルな文法により
静的・動的な美しいグラフィックスを描くことができる。文法はJavaをベースとしているため，C言 語やJavaのプログラミング学習を行うための導入としても適している。このため，アート・デザイン 分野の教育において取り入れられている［4］のはもちろんであるが，情報教育においても有効な題材 として注目されている［6］。わが国の数学教育の場において活用されている例は筆者の知る限り殆どな いが，数学を基礎とした視覚表現を追求した著書として巴山［8］が挙げられる。
Processing の環境と文法 詳細は開発者らによる著書［14］等に譲るが，基本的な構造は以下の通り
である。図2.1が Processing の統合開発環境（IDE），図2.2 が実行画面の例である。
この例では次の2行からなるコードを実行している。
void setup（） { size（600, 420）; } //1
void draw（） { ellipse（mouseX, mouseY, 100, 100）; } //2
1行目のsetup（）関数は，実行時に1度だけ実行される。上のコードでは幅600，高さ420ピクセルの
画面を生成する。2行目のdraw（）関数は1/60秒ごとに繰り返し実行され，1秒間に60フレームの描 画を行う。上のコードではマウスカーソルの位置を中心とする，幅100，高さ100ピクセルの楕円（す なわち直径100ピクセルの円）を繰り返し描く。画面は上書きされるため，マウスの動きに合わせて円 を重ねて描いていくインタラクティブなグラフィックスが得られる。このように，簡単なコードで印象 的なグラフィックスを得ることができる。
上で紹介した楕円の他に，線分や多角形，およびそれらの回転など，基本的な図形を描くことができ る他，キーボードやマウスの操作に応じて様々に反応する描画を行うこともできる。Java の文法に従っ て変数や配列，乱数やノイズ（乱数をなだらかにしたもの）を扱うこともでき，クラス定義を行うこと もできる。特にアート・デザインに特化したProcessingでは色の指定の方法が多彩かつ容易である。3 次元のグラフィックスを座標を用いて描いたり，それを様々な方向に回転することも容易である。
このような機能は，幾何学的な教材を作成することや（観点I），数学的題材を通してプログラミン グを学ぶこと（観点II）に適していると考えられる。下の図は筆者がProcessingにより作成したグラ フィックスの例である。図2.3はスライダやボタンなどのGUI （graphical user interface）を備えた2次 元の動的なグラフィックス，図2.4はマウス操作で視点を変えたり，キーボード操作で色合いのグラデー ションを変化させたりできる3次元のグラフィックスである。ただし，このような教材を「プログラミ
図2.2 実行画面
図2.1 Processing
ングの知識・経験のない指導者も容易に扱うことができる（観点I）」かといえば，やや難しい。しかし，
筆者自身の経験からすれば，よりシンプルな教材から経験を積んでいけば，このような教材を作ること も決して高いハードルではないと考えられる。次節ではよりシンプルな内容を含む教材案を紹介する。
Scratch MITメディアラボで開発された教育用プログラム開発環境である。ブロックを組み合わせる
ことで簡単に，かつ楽しくプログラミングができ，インタラクティブストーリーやゲーム，アニメーショ ンを作ることができる。Scratch のWebサイト［17］には，8歳から16歳向けにデザインされているが 全ての年代の人々に利用されていること，150の国と地域で利用され，40以上の言語に対応しているこ となどが紹介されている。 もちろん日本語にも対応している。
上出・辰巳・村上は［3］（およびその引用文献）において，Scratchを用いた教材を中学校の授業で 生かす試みとその効果を紹介している。［3］では教材の作成（プログラミング）も教師の補助のもと生 徒が行なっている。このように，Scratchは観点I，IIの両方を満足する題材として，特に初等・中等 教育においては十分に有効であると認められる。
高等教育での利用も様々に可能であると考えられる。幾何学的なグラフィックスの描画も可能である し，文献［2］ではフラクタル図形の描画（図2.5）や，モンテカルロ法による円周率の近似的算出方 法などが紹介されている。
図2.6はProcessing のサンプルファイルにある「Tree」の実行画面。マウスカーソルの位置に
応じて枝分かれの角度が 0°から 90°まで滑らかに変化する。図2.5では角度を連続的に変化さ せる機能は実装していない。
図2.4 図2.3
図2.5 Scratchで描いた木 図2.6 Processingで描いた木
しかし高等教育においては物足りない印象は否めない。理由として，まず3次元のグラフィックスを 描くことは難しい点が挙げられる。また，ブロックによるコーディングは分かりやすい代わりに「場所」
を取るため，複雑または大規模なプログラミングを組むには向いていない。 例えば，四則演算や初等 関数を用いて複雑な計算式を入力することも可能であるが，そのような関数の定義を書くのは面倒であ る上，コードの可読性は低くなる。将来的には，学習者は中学校・高等学校で既にプログラミングの基 礎を学んでいることが想定され，その場合はより本格的なコーディングが可能なProcessingが有効に なると考えられる。
GeoGebra 創始者 Markus Hohenwarter のザルツブルグ大学卒業論文の一環として2001年に開発が始
まったソフトウェアプロジェクトであり［15］，図2.7はその実行例である。GeoGebra は Geometry（幾
何学）+ Algebra（代数学）の造語であるが，動的幾何学描画機能を中心に，グラフ描画機能，数式処理
システム，表計算機能なども備えた多機能で使いやすいソフトウェアであり，今後は小中高大のあらゆ る数学教育の現場で普及していくと期待される。高等数学教育での活用事例として，濱田［7］は，大 学初年級における解析学の教材として，GeoGebraの効果的な活用例を紹介している。阿原の教科書［1］
では，GeoGebra を用いた作図を中心的なアプローチとして，双曲幾何学の解説を試みている。
GeoGebra は数学教材を扱うのに大変優れた環境であり，3次元グラフィックスの描画なども可能で あるが，基本的にプログラミングを行うための環境ではないため実現が難しい内容もある。例えば以下 の図は Processing のサンプルファイルにある「SpaceJunk」および「Mandelbrot （マンデルブロ集合）」
の実行画像であるが，このような図を GeoGebra で実現するのは極めて難しい。
図2.8の「SpaceJunk」は100行程度のコードで書かれている（半分以上は直方体クラスの定義である）。
ランダムな大きさの500個の直方体を，3次元空間内のランダムな位置に配置しており，視点を回転す 図2.7 GeoGebra
図2.8 SpaceJunk 図2.9 Mandelbrot
るアニメーションになっている。さらに，マウスカーソルの位置によって視点の遠近を調整することが できる。
図2.9の「Mandelbrot」はコメントを除くと42行のシンプルなコードで書かれている。複素力学系 によって現れる有名なフラクタル集合であるが，画面上の640×360ピクセルの各点において数百回ず つ行った演算の結果を描画している。
確かに GeoGebraにはコーディングの機能もあり，点や線などのオブジェクトにプログラムを乗せる ことができる。この機能を用いると，より複雑な教材も作ることができるが，それでも上記のようなグ ラフィックスを作ることは難しい。またこのコーディングの機能はどちらかと言えば付随的・発展的な 機能と考えられ，GeoGebraの扱い方に慣れた上でさらに高度なことを行うための機能であると言える。
従ってGeoGebraは前節の観点IIで触れた「プログラミングの基礎」の学習に向いているとは言い難い。
もともとアートやデザインのために開発されたProcessingとGeogebraのグラフィックスの見た目は かなり異なる。GeoGebraのグラフィックスは数学的に極めて厳密で，教育的であるのに対し，Pro-
cessingを用いると数学によって作り出される「美しさ」をより芸術的に示すことができ，これは利点
として極めて大きい。
まとめ 3つのソフトウェアの長所・短所は以下のようにまとめられる。高等数学教育への Processing の 活用は，複雑なものを扱うには指導者に一定程度の経験が必要となるものの，有効であると期待される。
3. 具体的な教材案 （Function Renderer）
Processing を用いた具体的な教材案として「Function Renderer」を作成した。題材としては2変数関 数に注目し，（i）値（ii）等高線（iii）勾配ベクトル場（iv）勾配流の4点について，学習者の理解の助 けとなるインタラクティブなグラフィックスを，出来るだけ簡単なコードにより実現したものである。
3.1 設計
図2.4で示したように3次元空間内で関数のグラフを描画することも Processing では可能であるが，
ここではプログラムの簡便性のため，2次元平面内のグレイスケールによって関数の値を表すこととす る。これにより等高線や勾配流の表示はより容易になる。マウス操作によって関数をインタラクティブ に変形でき，等高線の変化などをリアルタイムで観察できる仕様とする。
（i） 関数の描画 具体的な関数として，点（X, Y）を中心とするガウス関数 f x y Ae
x X y Y
( )
, = − −( )−(− )2 2
σ （A, σ は定数） （1）
観点I 観点II
Scratch 初等・中等教育において特に有効 初等・中等プログラミング教育に有効
GeoGebra 極めて有効 コーディングの学習には向かない
Processing 一定の経験が必要だが有効 本格的なプログラミングの入門として適切
に注目する。f（x, y）は点（x, y）が（X, Y）に一致する時ピークの値Aをとり，（X, Y）から離れるに従っ て0に近づいていく，なだらかな「山型」の関数である。
描画する関数は2つのガウス関数の重ね合わせとする。一方の関数は固定し，他方はマウスによって ピークの位置を移動できるようにする。重ね合わせは和および差を考え，それらはキー操作によって切 り替えられるようにする。値は連続的なグレイスケール（256階調）によって表示する。
（ii） 等高線 同じ関数を，段階的なグレイスケール（10階調）によって表示する。等高線そのものを 描くのではなく，値の範囲に応じて領域を色分けすることで，その境界に等高線が表れるようにする。
（i）と（ii）のモードはキー操作で切り替えられるようにする。
（iii） 勾配ベクトル場 関数の勾配ベクトル場を矢印で表示する。値の大きいところから小さいところ へ矢印が向かう方が直感的には捉えやすいと考えられるため，勾配の向きは逆にして表示する。ガウス 関数（1）に関する，次の勾配の式を用いる
−∇ = − ∂
∂ − ∂
∂
= − −
f f
x f
y x X f y Y f
, ,
σ σ （2）
（iv） 勾配流 （iii）のベクトル場の積分曲線を近似的に描く。やや複雑なプログラムになるが，降っ た雨が低い方へ流れていくようなアニメーションにする。これには，指定した点をベクトル場に沿って 一定時間流して軌跡（折れ線）を描画する「Trajectoryクラス」を定義する。
3.2 実装
以上の設計に基づいて Processing での実装を行なった。以下はその実行画面である。
図3.1 図3.2 図3.3 図3.4
図3.5 図3.6 図3.7 図3.8
（i） 関数の描画 図3.1が起動時のグラフィックスである。値は200以上を白，−200以下を黒とし，
256階調のグレイスケールで表している。二つのピークがあるが，右下のピークは固定してあり，左上 のピークはマウスカーソルの位置に合わせて動かすことができる。キー「e」を押すことで図3.1（和モー
ド）と図3.2（差モード）が交互に入れ替わる。 カーソルを動かすと，白と黒で打ち消す様子などを観
察できる。
（ii） 等高線 キー「2」を押すと表示は10階調の等高線モード図3.3，図3.4に切り替わる。このモー ドでも同様に左上のピークをマウスで動かすことができる。例えば図3.3のモードにおいて，峠の点に おける等高線の変化などを詳しく観察することができる。キー「1」を押すと（i）の表示に戻る。
（iii） 勾配ベクトル場 キー「3」を押すと（逆）勾配ベクトル場が表示される（図3.5から図3.8）。
関数の状態に応じて各ベクトルの向きや大きさが変化する様子，勾配ベクトル場と等高線が直交してい る様子などを確認できる。キー「3」を押すと表示をやめ，「4」を押すと次の勾配流モードになる。
（iv） 勾配流 キー「4」を押すと勾配流がアニメーションで表示される（図3.9から図3.12）。1フレー ムごとに10個の「雨粒」を発生させ，15フレームの間ベクトル場に沿うようにして折れ線を描き，15 フレームかけて徐々に消える。勾配流が等高線に直交していることや，等高線の間隔の狭いところでは 勾配流のスピードが早いこと，峠の点での勾配流の様子など，様々なことを観察できる。キー「4」を 押すと表示をやめ，「3」を押すと勾配ベクトル場モードになる。
同様のグラフィックスはGeoGebraを用いて作ることも可能かもしれないが，少なくとも容易ではな い。また前述の通り，プログラミングによりコードとして実現できること，得られるグラフィックスが 滑らかかつ鮮明であることはProcessingならではの利点である。
3.3 期待される教育効果
大学での講義の経験上，学習者は，多変数関数の偏微分の計算や，極値を与える点の算出など，機械 的な計算は練習で比較的容易に身につけることができる。 一方で，偏微分の幾何学的な意味を理解し たり，等高線や勾配ベクトル場といった情報から関数の特徴を抽出したりする能力は，なかなか身に付 かない学習者も多い。これらの能力を身につけるためには，理論とその意義を深く理解することや，様々 な例を多角的に研究することが必要である。
「Function Renderer」による等高線や勾配ベクトル場，勾配流のインタラクティブな表示は，紙面に 描かれた動かない図に比べてはるかに印象的である。天気図を想起させる作りは，数学が身近な事柄に
図3.9 図3.10 図3.11 図3.12
応用されている実感を持たせることにも有効と期待される。学習者が「なぜこのような図が現れるのか」
「どのようにしてこの図を描いているのか」といった疑問を抱けば成功であり，数学的な理論やプログ ラミングの方法などを併せて解説すれば，その教育効果は格段に高まると期待される。
また，本プログラムは様々なアレンジが可能である。定数や関数を変更できることはもちろん，グレ イスケールをカラースケールにする，勾配ベクトル場と勾配流を同時に表示できるようにする，キー操 作によって関数をさらに多様に変形できるようにするといったことも容易である。このような変更には コードをわずかに変更すればよく，意図した動作をするように試行錯誤することも楽しい。学習者がそ のような経験を通して，数学やプログラミングに関する知識・技能と，問題を解決する実践力を同時に 養っていくことが可能であると期待される。
3.4 コード
以下に「Function Renderer」のコードを示す。コードの右側には行番号と，（i）関数の描画，（ii）等 高線，（iii）勾配ベクトル場，（iv）勾配流，のどの機能に対応するかを <1>から<4>で示した。特
に<1>と<2>の部分に限れば非常に短いコードで実現されており，プログラミングを始めて学ぶ学
習者にとっても扱いやすいと考えられる。
<1>から<3>はいずれもユーザ定義関数を用いているが，徐々に複雑になっており，学習者の状 況に応じて様々な指導が可能である。また<4>ではTrajectoryクラスを定義しており，やや発展的で あるが，プログラミングやアルゴリズムの学習の題材として有効と考えられる。
// Function Renderer
//////////////// constants ////////////////
int sigma = 40000 ; //1 <1>
int e = 1 ; // 和モード e = 1, 差モード e = −1 ; //2 <1>
float contourInterval = 40 ; // 等高線の間隔 //3 <2>
//////////////// arguments ////////////////
// 固定するガウス関数のピークの座標
float X0, Y0 ; //4 <1>
// 各種モード
boolean levelMode, vecMode, flowMode ; //5
// Trajectory の配列
ArrayList<Trajectory> tr = new ArrayList<Trajectory>（）; //6 <4>
//////////////// SET UP ////////////////
void setup（） { //7
size（800, 800）; //8 levelMode = false ; vecMode = false ; flowMode = false ; //9
X0 = 3*width/4 ; Y0 = 3*height/4 ; //10 <1>
} //11
//////////////// DRAW ////////////////
void draw（） { //12
background（0）; // 背景を黒に //13
// 各ピクセルでガウス関数の重ね合わせを計算
for （int x=0 ; x<width ; x++） { //14 <1>
for （int y=0 ; y<height ; y++） { //15 <1>
float val = f（x,y,mouseX, mouseY） + e*f（x,y,X0,Y0）; //16 <1>
// 通常モード or 等高線モード に応じて描画
if （!levelMode） { set（x,y, col（val）） ; } //17 <1>
else { set（x, y, levelCol（val））; } //18 <2>
} //19 } //20
// 勾配ベクトル場モード: 20ピクセル毎に勾配を計算して描画
if （vecMode） { //21 <3>
for （int x=5 ; x<width ; x += 20） { //22 <3>
for （int y=5 ; y<height ; y+= 20） { //23 <3>
PVector vec1 = df（x,y,mouseX,mouseY）; //24 <3>
PVector vec2 = df（x,y,X0,Y0.mult（e）; //25 <3>
arrow（x,y,vec1.add（vec2））; //26 <3>
} //27 <3>
} //28 <3>
} //29 <3>
// 勾配流モード
// 各フレームで Trajectory を 10個生成, 各 Trajectory のフェーズを進める
if （flowMode） { //30 <4>
for （int i=0 ; i<10 ; i++） { tr.add（new Trajectory（））; } //31 <4>
for （int i = tr.size（）-1 ; i>=0 ; i--） { //32 <4>
Trajectory T = tr.get（i）; //33 <4>
PVector vec = new PVector（）; //34 <4>
if （T.n < T.num） { //35 <4>
// 雨粒の位置
float x = T.xy［T.n］.x ; //36 <4>
float y = T.xy［T.n］.y ; //37 <4>
// そこでの勾配
PVector vec1 = df（x,y,mouseX,mouseY）; //38 <4>
PVector vec2 = df（x,y,X0,Y0）.mult（e）; //39 <4>
vec = vec1.add（vec2）; //40 <4>
} //41 <4>
T.flow（vec）; //42 <4>
if （T.n > 2*T.num） tr.remove（i）; //43 <4>
T.display（）; //44 <4>
} //45 <4>
} //46 <4>
} //47 <4>
//////////////// EVENT ////////////////
// モードチェンジ
void keyPressed（） { //48
if （key==’1’） { levelMode = false ; } //49 <1>
if （key==’2’） { levelMode = true ; } //50 <2>
if （key==’3’） { flowMode = false ; vecMode = !vecMode ; } //51 <3>
if （key==’4’） { vecMode = false ; flowMode = !flowMode ; } //52 <4>
if （key==’e’ || key ==’E’） { e *= -1 ; } //53 <1>
} //54
//////////////// functions ////////////////
// ガウス関数
// x, y : 座標変数 X, Y : ピークの座標
float f（float x, float y, float X, float Y） { //55 <1>
return 200* exp（−（sq（x−X）+sq（y−Y））/sigma）; //56 <1>
} //57 <1>
// 逆勾配（適当に定数倍）
PVector df（float x, float y, float X, float Y） { //58 <3>
float F = f（x,y,X,Y）; //59 <3>
return new PVector（（100*（x−X）/sigma）*F, （100*（y−Y）/sigma）*F）; //60 <3>
} //61 <3>
// グレースケール（256階調）
color col（float val） { //62 <1>
return color（map（val,-200,200,0,255））; //63 <1>
} //64 <1>
// グレースケール（10階調）
color levelCol（float val） { //65 <2>
int level = floor（val/contourInterval）; //66 <2>
return color（map（level, −5, 5, 0, 255））; //67 <2>
} //68 <2>
// 矢印
void arrow（float x, float y, PVector vec） { //69 <3>
pushMatrix（）; //70 <3>
translate（x,y）; //71 <3>
float angle = atan2（vec.y, vec.x）; //72 <3>
rotate（angle）; //73 <3>
float t = vec.mag（）; //74 <3>
stroke（255）; //75 <3>
line（0,0,t,0）; line（t−6,3,t,0）; line（t−6,−3,t,0）; //76 <3>
popMatrix（）; //77 <3>
} //78 <3>
//////////////// Trajectory class ////////////////
class Trajectory { //79 <4>
int num = 15 ; // length //80 <4>
PVector［］ xy = new PVector［num+1］; // vertices //81 <4>
int n ; // phase //82 <4>
// コンストラクタ
Trajectory（） { //83 <4>
xy［0］ = new PVector（random（0,width）, random（0,height））; //84 <4>
n = 0 ; //85 <4>
} //86 <4>
// flowメソッド （フェーズを1進める）
void flow（PVector vec） { //87 <4>
if （n < num） { //88 <4>
xy［n+1］ = xy［n］.copy（）.add（vec）; //89 <4>
} //90 <4>
n++ ; //91 <4>
} //92 <4>
// displayメソッド （表示）
void display（） { //93 <4>
stroke（255）; //94 <4>
if （n <= num） { //95 <4>
for （int k=0 ; k<n ; k++） { //96 <4>
line（xy［k］.x, xy［k］.y, xy［k+1］.x, xy［k+1］.y）; //97 <4>
} //98 <4>
} else { //99 <4>
for （int k = n − num ; k < num ; k++） { //100 <4>
line（xy［k］.x, xy［k］.y, xy［k+1］.x, xy［k+1］.y）; //101 <4>
} //102 <4>
} //103 <4>
} //104 <4>
} //105 <4>
4. 実 践 例
筆者は2019年度前期の大学院講義「多様体と構造の幾何特論演習I」（履修者3名）において，多様 体論に関連する様々な内容を可視化する方法としてProcessing を紹介し，上述の教材「Function Ren- derer」をはじめいくつかの題材を扱った。受講者は偏微分等については既に十分な知識を有していた ため，Processing の基本に関する講義を行ったのち，勾配ベクトル場などに関する簡単な復習を行い，
「Function Renderer」の設計のアイデアを説明し，実際にコードを書きながらプログラミングの指導を 行った。ただし，項目（iv）の勾配流の実装は初学者にはハードルが高いため扱わず，代わりに，グレ イスケールではなくカラースケールで表示する方法などを紹介した。この講義では他にも様々な題材に おいて Processing を利用し，幾何学の専門的な内容の紹介と同時にプログラミングの基礎について指 導を行い，専門内容のより深い理解と，関連する情報リテラシーの習得を目指した。
「Function Renderer」を扱った講義の終了後に，受講者には自由記述によるアンケートに協力いただ いた。以下にその結果を示す。数学的な内容とプログラミングの両面において，高い教育効果が得られ たことが認められる。
i） 本講義以外でのプログラムの経験
・あり 2名（Python を2ヶ月程度独習・Pythonに触れる程度）
・なし 1名
ii） Processing の印象を述べてください。
・ 自分のプログラムが視覚的にわかりやすく扱えるので楽しい。他の言語より命令が「目」で 見て伝わりやすいので間違いもわかりやすいと感じた。空白の個数等細かい部分も気にしな くていいので扱いやすいプログラムだと思う。
・ 自分で組んだプログラムが稼働して，可視化されるのは面白い。ベースは同じようなもので も，条件を変えることで出力の変化を見ることができるのもいい。その反応の速さがすぐれ ている点もいい。複雑なプログラムも小さなエッセンスの集合体であることがわかった。い くらでも複雑にすることができそう。
・ 視覚的に捉えることができるため，自分で考えたり動かしたりできるのはすごく面白くて楽
しい。今まで学んできた数学がどのように生かされ，使われているのかを感じることができ るので，教材としての有用性も高いと思う。
iii） 今回の教材（Function Renderer）の印象を述べてください。
・ 気軽にプログラムした割に大きな達成感を得られたと思う。やはり命令が視覚的に捉えやす いのが大きなメリットだと感じた。
・ 多変数関数や floor関数など，今まで学んできたことが結びついてプログラムに組み込まれ ていることを知ることができた。条件を変えた結果がすぐに出力されることで関数やプログ ラムの意味していることを把握することができた。ただ，基礎的な知識がある程度なければ 少し難しく感じてしまうとも思った。
・ 2変数関数における偏微分や極値を考える際に，等高線を考えるというものを実際に自分で 動かして体感することができ，非常に良かった。いろんな角度・視点から数学を見ることの 重要性を改めて感じられた。
5. まとめと展望
プログラミング教育を意識した上での高等数学教育への活用の観点から，主にScratchやGeoGebra との比較を通してProcessingの有効性を検討し，教材案「Function Renderer」を提示した。また，実践 例として大学院での活用事例を紹介した。本稿で紹介した教材案の他にも，筆者は，曲線と曲面の表示，
トポロジーや結び目理論，フラクタル図形，複素力学系（図2.9のマンデルブロ集合の改良版や，ジュ リア集合），グラフ理論など，様々な内容に関わる教材をProcessingにより開発中であり，これらのい くつかについては既に大学・大学院の講義への導入を始めている。将来的にはWebサイト等を通して 社会にも発信したいと考えているが，まずは大学生や高校生向けの講義・講演において実践的に用い，
その効果について検証を行いたいと考える。今後はそのような活動を通して Processing の長所・短所，
限界について，さらに検討を深めたい。また，Processing では扱いが難しい題材については，Python などのより本格的なプログラミングを用いて解決が可能かどうかなどについても，検討していきたい。
また，現時点では学習者のプログラミングの知識を仮定せずに講義・指導を行うことを想定している が，今後本格的にプログラミング教育が実施されるようになれば，より高度なプログラミングを用いる こともできて様々な可能性が広がる一方，教材作成の難易度も上がると想定される。 当面は学習者の 状況等に応じて継続して検討していくことが必要である。
引 用 文 献
［ 1 ］ 阿原一志著，「作図で身につく双曲幾何学: GeoGebraで見る非ユークリッドな世界」，共立出版（2019）
［ 2 ］ 石原純也・阿部和広，「Scratchで楽しく学ぶアート＆サイエンス」，日経BP社（2018）
［ 3 ］ 上出吉則・辰巳丈夫・村上裕子，プログラミングの算数数学教育での効果と検証―生徒の創作したScratchプログ ラム教材を授業で活かす―，情報教育シンポジウム（2017）
［ 4 ］ 倉田和夫・島森 功，Processingによるプログラミング基礎教育の試み，図学研究41巻Supplement 2号，63-68（2007）
［ 5 ］ 齊藤正彦著，「線形代数入門」，東京大学出版会（1966）
［ 6 ］ 坂田圭司・高橋隆男，ソフトウェア開発教育におけるProcessingとArduinoの活用，情報処理学会第75回全国大 会（2013）
［ 7 ］ 濱田龍義，大学初年級におけるgeogebraの教育利用，数理解析研究所講究録1674，112-119（2010）
［ 8 ］ 巴山竜来，数学から創るジェネラティブアート―Processing で学ぶかたちのデザイン―，技術評論社（2019）
［ 9 ］ 松坂和夫著，「集合・位相入門」，岩波書店（1968）
［10］ 文部科学省，幼稚園教育要領，小・中学校学習指導要領等の改訂のポイント
［11］ 文部科学省，小学校学習指導要領（平成29年告示）
［12］ 文部科学省，中学校学習指導要領（平成29年告示）
［13］ 文部科学省，高等学校学習指導要領（平成30年告示）
［14］ Cassy Reas，BenFry著，船田巧訳，「Processing をはじめよう」，オライリー・ジャパン（2011）
［15］ GeoGebra，http://www.geogebra.org
［16］ Processing，https://processing.org
［17］ Scratch，https://scratch.mit.edu
（2019年9月24日受理）
On the Practical Use of Processing in Higher Mathematics Education NAKATA Fuminori
From the perspectives of the development of programing education, we show that it is effective to use Processing for higher mathematics education. We introduce the outline of Processing, and show the strengths and weaknesses compared to the software Scratch and GeoGebra, which are already highlighted by precedents. We also introduce a program, as a concrete teaching material created by using Processing, that interactively displays the values, contour lines, gradient vector fields, and gradient flows of two-variable functions. Finally, we introduce practical examples of using Processing and the above teaching material in graduate courses.
Keywords: Processing, higher mathematics education, contour lines, gradient flow, Scratch, GeoGebra
