目次
はじめに
近年、プログラミングの基礎を学ぶにあたって、様々な学校でProcessingやp5.jsが扱われるようになったと聞きます。私はProcessingやp5.jsを利用して作品を制作したり、ブログを書いたり、技術同人誌を執筆したりといった活動を10年以上続けているので、「Processingやp5.jsの授業って、実際のところどんな感じなんだろう？」と気になっていました。
というわけで、インターネットで公開されている学校の授業資料を集め、内容を研究してみました。本書は、それを参考書風にまとめた本です。受験生時代にお世話になった国語や数学の参考書のように、クリエイティブコーディングにも参考書があったとしたら…というコンセプトで書いています。「授業の傾向は？」「どんな課題が出されている？」「課題の対策はポイントは？」そんなトピックを収録しています。
本書があなたのよりよいクリエイティブコーディングライフとクリエイティブコーディング学習ライフにつながれば嬉しいです！
研究対象
・Processingおよびp5.jsを扱った学校授業の資料や課題(演習問題や宿題、期末課題など)
─ProcessingについてはJava版だけでなく、Processing.pyなど派生含む
─「Processing 授業資料」等のキーワードでGoogle検索してヒットしたもの。オープンな場所に授業資料のwebページやPDFが置かれているもの。
─資料収集期間は2022年12月〜2023年10月
最終的には、35個の資料が集まりました。巻末の参考文献に一覧をまとめています。大学の授業資料が主ですが、小学校の授業資料や授業内容も参考にさせていただきました。参考文献とした授業資料のリンクについては、学校名、授業名、授業実施年度(あるいは資料掲載年度)など、わかる範囲で記載しています。また、コードの検証にはp5.js 1.9.2とProcessing 4.3を利用しています。
用語解説
本書で登場する用語を簡単に解説しておきます。
クリエイティブコーディング
プログラミング(コーディング)でグラフィックやアニメーション、サウンド、インタラクション、立体物などの楽しいものを楽しく制作する活動です。「クリエイティブコーディングをやる人」は「クリエイティブコーダー」と呼ばれます。
Processingとp5.js
Processingは、Javaベースのビジュアル表現に特化した言語および環境です。グラフィックやアニメーション、インタラクティブなビジュアルアートなどを簡易な構文で制作できます。もともとはビジュアル表現の試作を進めやすくするためのツールとして、そしてアートやデザイン系の学生にプログラミングを教えるための教材として開発された経緯を持っています。
p5.jsは、Processingをルーツに持つJavaScriptライブラリーです。Processingの構文が受け継がれているため、シンプルな記述でアニメーションやインタラクションなど幅広い表現をWebブラウザー上で展開できます。ブラウザー上で動作するエディターp5.js Web Editor・https://editor.p5js.org/ もあるので、ぜひ試してみてください。
Processingやp5.jsで制作された作品は「スケッチ」と呼ばれます。また、Processingやp5.jsで生成された画面を「キャンバス」と呼びます。
第1章 授業の傾向
クリエイティブコーディングの授業とは、いったいどのようなものなのでしょうか？Processingやp5.jsが扱われている授業について、まずは内容の傾向をざっくり分類してみました。
1.1 プログラミングの基礎を学ぶ
一番多いのが、プログラミングの基礎を学ぶためにクリエイティブコーディングが活用されているケースです。Processingがもともと教育目的で開発された経緯から考えると、ぴったりの活用シーンですね。大学においては、工学系やデザイン系でよく利用されているようです。
工学系では、情報工学の基礎を学ぶ授業で活用されているケースが多かったです。プログラミングの第一歩として導入されているようでした。
デザイン系では、デザインのツールのひとつとして導入されているケースが多かったです。独創性を発揮してもらうため、あるいはアート的な思考を養うために利用されているようです。キャラクターの顔や人の顔など、身近でわかりやすいモチーフを描画する演習をよく見かけました。
1.2 I/Oモジュールやマイコン、電気回路への前段階として学ぶ
基盤や回路の制御の学習につなげるために、基礎をProcessingで学ぶケースです。ProcessingがArduinoなどのマイコンボードと相性がいいので、ハードウェア領域の学習にも活かされているんですね。
1.3 物理シミュレーションや数値計算など、工学的ツールとして学ぶ
コンピューターをシミュレーションや計算の「電卓」として利用するために、プログラミングを学ぶケースです。Processing.pyを利用すればPythonの学習にもつなげられるため、ハイレベルなプログラミング学習や実験に活かせるメリットもあるようです。
1.4 画像処理の原理を学ぶ
画像の拡縮・回転や色の調整などの原理を実際に、プログラミングで体験学習するケースです。Processingやp5.jsはピクセル操作にまつわる機能も多く、構文も簡単なので、ツールとしてフィットしていますね。
1.5 リテラシーを学ぶ
個人的に興味深い利用シーンとして、Processingで制作した作品に対するライセンス付与の方法や正しい引用の様式を学ぶというケースもありました。
第2章 授業の目的
集めた授業資料から、授業目的について書かれた箇所をピックアップして整理しました。「なぜプログラミングを学ぶのか」、そして「なぜProcessingやp5.jsなのか」という点についてまとめます。
2.1 なぜプログラミングを学ぶのか
まず、「なぜプログラミングを学ぶのか」というテーマで整理していきます。このテーマについては工学を学ぶ側面から見たものと、デザインやメディア表現を学ぶ側面から見たものがありました。「クリエイティブコーディング」というキーワードよりは少し抽象的になりますが、筆者が個人的に興味があるテーマなのでまとめておきます。
工学を学ぶ側面から
工学系(情報工学、計算機科学など)かつProcessingを扱う授業で「なぜプログラミングを学ぶのか」について言及された資料は、実はそこまで数がありませんでした。これについては、おそらく工学系であればプログラミングを学ぶのは、言ってしまえば「当たり前」だからかなと考えています。どちらかといえば、後述の「なぜProcessing(p5.js)なのか」が重視されている印象でした。
工学的な側面から「なぜプログラミングを学ぶのか」について言及されていた資料について触れます。
ひとつめは「コンピューターと人間それぞれの特徴を考えれば、事前にプログラムとして指示出ししておくのが効率的だから」という理由です。(大阪大学 理学部数学科2年生 実験数学1, 2011・http://www.cas.cmc.osaka-u.ac.jp/~paoon/Lectures/2011-3Semester-ExperimentalMathematics1/index.php?%BC%F8%B6%C8%BB%F1%CE%C1%2F01)
コンピューターには、高速に演算できる長所があります。人間がコンピューターのそばについて随時指示すると、高速性が活かしきれません。そのため、事前にプログラムとして指示書を与えてやれば時間的に無駄なく作業を進められるから、という考え方が述べられています。
ふたつめは「既存プログラムを利用する際に正しく使いこなせるようになるため」という理由です。(信州大学 界面物性科学, 2022・https://science.shinshu-u.ac.jp/~tiiyama/?page_id=195324)
シミュレーションなどの実験をするにあたり、たいていの場合は既存のプログラムに各人の実験に合わせたデータを与えながら計算することになります。プログラミングの基礎を知っておけば、そういったシーンで理解の助けになるから、という考え方が述べられています。
デザインやメディア表現を学ぶ側面から
プログラミングと離れた領域のように思えるデザインの分野においても、クリエイティブコーディングの授業は展開されています。デザインやメディア表現を学ぶ側面から、「なぜプログラミングを学ぶのか」について言及された資料について触れます。
ひとつめは「既存ツールにとらわれない、新しい表現をするため」という理由です。(多摩美術大学統合デザイン学科 ソフトウェアデザイン, 2019・https://cocopon.me/zero-pde/introduction/ならびに 東京工業大学 インタラクティブメディア学科 メディアプログラミング演習I, 2022・https://r-dimension.xsrv.jp/classes_j/programming-1st-2022/)
既存のツールを飛び越えた斬新な表現をするために、制約の少ないものづくりをプログラミングでやっていけるようにという考え方です。メディア表現としてなんらかの入力と出力のしくみをつくる際に、そのつなぎこみの前例がなくても、プログラミングを知っておけば自分で作り上げることができると述べられています。
ふたつめは「大量生産や大量試行が可能だから」という理由です。(多摩美術大学統合デザイン学科 ソフトウェアデザイン, 2019・https://cocopon.me/zero-pde/introduction/)
大量にパターンを生成し、その中から最適解や好みのものをピックアップできるというコンピューター活用の強みについて述べられています。
3つめは「デザイナー・アーティスト・ディレクターとして働く中でもプログラマーとの協業を円滑にするため」という理由です。(東京工業大学 インタラクティブメディア学科 メディアプログラミング演習I, 2022・https://r-dimension.xsrv.jp/classes_j/programming-1st-2022/)
デザイナー・アーティスト・ディレクターとして働き、アートプロジェクトやwebサイト制作に関わる場合、プログラマーとの連携が必要になります。その際に、円滑にコミュニケーションできるように、という考え方です。
4つめは「グラフィックデザインにとどまらず、サウンド・映像・インタラクションなどのデザインも学ぶため」という理由です。(慶應義塾大学 デザインとプログラミング, 2022・https://scottallen.ws/sfc/dp2022)
サウンド・映像・インタラクションなどのメディアは時間軸が関わってきます。時間軸の中でのデザインをプログラミングによって学ぶという考え方です。
5つめは「自己表現のひとつとして活用するため」です。(甲南女子大学文学部メディア表現学科 プログラミングB, 2022・https://paper.dropbox.com/doc/B-01-9qI0ZCYvRwyvwEZrV0FNc)
機能や役に立つかどうかを気にせず、音楽やダンスのように感情の表現としてプログラミングを用いていくという考え方が述べられています。
2.2 なぜProcessing(p5.js)なのか
様々なツールやプログラミング言語がある中から、なぜProcessing(p5.js)を授業で利用するのでしょうか。その理由について整理していきます。
より汎用性の高い言語の学習の足がかりにできるため
PythonやJava、Ruby、C++、C言語など、より汎用性の高い言語の学習に踏み込む前の足がかりとして、Processingが利用されているケースが多いようです。(大阪大学 情報活用基礎, 2019・https://www.rcnp.osaka-u.ac.jp/~kobayash/IL2019/Processing-14.htmlならびに 信州大学 界面物性科学, 2022・https://science.shinshu-u.ac.jp/~tiiyama/?page_id=195324)
Processingでプログラミングの基礎的な概念を負担なく、スピーディに学び、他の言語に活かすという流れが定番ルートのようです。
「プログラミング嫌いを量産したくないから」という理由もありました。(明治大学 先端メディアサイエンス学科 プログラミング演習Ⅰ, 2022・https://lecture.nkmr.io/2022/programming1_00.pdf)
最初にJavaやC言語を学ぶと心が折れてしまったときに苦手意識が芽生えてしまい、そこからの再起が難しい……という考えが述べられています。そこで、まずはビジュアルを出しやすいProcessingで学習を進めてからJavaへステップアップするという流れが説明されています。
ビジュアル表現やインタラクティブ表現が簡単に実装できるため
JavaやC++などの汎用的な言語と比較して、ビジュアル表現やインタラクティブ表現が簡単に制作できるため利用しているケースも、いくつかありました。(玉川大学工学部ソフトウェアサイエンス学科 コンピュータグラフィックス, 2022・https://vilab.org/cg2023/CG2023-01.pdfならびに 神奈川工科大学情報学部情報メディア学科 情報メディア基盤ユニット, 2019・http://www.sato-lab.jp/imfu/all.pdf)
2Dの表現だけでなく3Dの表現も扱えるため、OpenGL学習にもつなげられる点にもフォーカスされています。
Arduinoなどのマイコン活用に連携できるため
p5.jsの授業で見られたケースとして、ArduinoやProcessingの学習の敷居を下げるためという考え方もありました。(東京電機大学理工学部情報デザイン学系 情報学基礎実習, 2022・https://scrapbox.io/tduyk/%E6%83%85%E5%A0%B1%E5%AD%A6%E5%9F%BA%E7%A4%8E%E5%AE%9F%E7%BF%92_%E3%80%8Cp5.js%E3%80%8D(2022))
Processingで考えてみても、Arduinoと相性がいいので、ハードウェア学習に発展させやすそうです。
複数のOSで利用できるため
ProcessingについてWindows、Mac、Linuxで実行できるメリットが述べられているところもありました。(神奈川工科大学情報学部情報メディア学科 情報メディア基盤ユニット, 2019・http://www.sato-lab.jp/imfu/all.pdf)
Processingやp5.jsは複数のOSで利用でき、多くの場合ではどのOSでも同じビジュアル出力が得られます。
学校での授業という点を考えると、授業用のPCと自宅学習用の環境が異なっても、シームレスに学習を進めることができるのもメリットですね。