2020年度1年後期メディアプログラミング演習I

この授業は、デザインやアート分野の学生にプログラミングを効率よく学習させるため組み立てられたものです。

現在のデザインやアートにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。よって、この授業ではプログラミングによるグラフィック描画やアニメーション、インタラクションなどの、直接表現に結びつく実践的な方法を学びます。

開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。

何故、デザインやアートにプログラミングが必要なのか

学生と話をしていてプログラミングの話をすると、急に暗い顔になり、「ああ、苦手」という言葉がよく返ってきます。おそらくその学生たちは、プログラミングの学習の仕方がいまいち分からないのと、その深遠な可能性がまだ見えて来ていないのでしょう。それは、教える側の責任もあると思います。実際、自分も独学でJavaを勉強しようとした時、一度挫折しました。しかし、何年か後にもう一度勉強し直してプログラミングができるようになったのです。ですから、現時点でプログラミングに対する苦手意識がある学生でもいつでもやり直せると考えています。要は、なぜ勉強しなくてはならないのかと、どうやって勉強するのかをもう一度見直せばいいのです。

あともう一つ、プログラミング=数学だと思っている学生も多いでしょう。確かにそうなのですが、数学が苦手でもプログラミングが苦手だとは限りません。実際私も数学は得意ではありません。しかしプログラミングは楽しいと思いました。自身の数学の苦手意識を超える面白さがプログラミングにはあったのだと思います。みなさんも、数学が苦手だから無理だ、などという先入観は捨てて、新たな気持ちで臨んでもらえればと思います。

プログラミング言語の知識を持っておくということは、例えば建築家が数学の知識があるのと同じようなものだと考えてもいいでしょう。例えば、アートプロジェクトやwebサイト構築などを行なうにしても、実際の現場ではプログラマーとの共同作業という状況が多々あります。その際にプログラミング言語の知識があるのとないのでは大きな違いがあります。プログラミング言語の知識がないデザイナー／アーティストやディレクターの言うことなんて、プログラマーは聞かないでしょう。もしくは仕方なく聞いていても、内心は馬鹿にしているかもしれません。

また、このステップを避けて通ってしまうと、結局はソフトウェアの範囲内でしかものを作れず、既に何年も前に発表された作品の二番煎じ的なものしか作れないのです。自己満足的なことをしたければそれでもいいでしょう。しかし、少なくとも私のこの授業では、新しいメディアデザイン／アートの可能性を垣間見せてくれる表現者を育てたいと考えています。ですから、理想的なアプローチとしては、まずアイデアを洗練させ、そのプロジェクトに最適なメディアやプラットフォームを選ぶ。ですから、場合によってはMax/MSP、Processingでもいいかもしれません。しかし、調べてみたら、これは別の言語（Java、C、C#など）を選択しないとアイデアを実現させることが難しいと分かったとします。その際にはそれらの言語を短期間で習得するぐらいの馬力が必要になってきます。要は、様々なアイデアを実現させるために、基礎体力をつけておく必要があるのです。そのような底力のある学生の育成がこの授業の目的です。

スケジュール

変数（9/30）

while, for文の理解（10/7）

小課題1制作・講評（10/14）*対面

コードを分かりやすく書くということ

if文の理解（10/21）

if文の理解
小課題2

小課題2制作・講評（10/28）*対面

運動・中間課題の制作（11/4）

中間課題講評（11/11）*対面

座標変換（11/18）

インタラクション（11/25）

インタラクション2
小課題3

小課題3制作・講評・タイポグラフィ（12/2）*対面

最終課題制作（12/9）

最終課題発表・講評（12/16）*対面

課題

小課題1

前回の授業を元にして、ハンカチの柄をデザインしてください。画像を表示することと、点、線、円、三角形、四角形のいずれかを使うこと。

画面は400 x 400 ピクセルです。
色彩自由。
なるべく模様になるようにしてください。
画像は自分で作成する事。
プログラムで作成できるグラフィックは、プログラムで作成すること。
whileかforを必ず使うこと。

Google Classroomに提出の際には以下のサイトを参考にして、サムネイル画像（スクリーンショット）も提出する。

小課題2

点・線・円・四角形・三角形などを用いて、「グラデーションのある美しい」画面を構成しなさい。

400 x 400ピクセルの画面の中に構成する。
色彩自由。
if, else if, elseを使うこと。
for文もしくはwhile文を使うこと。

三角形や四角形（quad)を使いたい人は、以下のリンクを参照してください。
https://www.processing.org/reference/triangle_.html
https://www.processing.org/reference/quad_.html

中間課題

「簡単な形の組み合わせによる、複雑な造形」を作成してください。

400 x 400ピクセルの画面の中に構成する。
色彩自由。
必ずwhileもしくはfor文を使うこと。if文も必ず使うこと。
点、線、円、三角形、四角形などの基礎的な形を使うこと。
かならず、コメントをわかりやすく書くこと。
静止画を作成すること。アニメーションでも可。

参考：

引用元

引用元

小課題3

以下の相反する2つの言葉をそれぞれイメージしてプログラムによってグラフィックを作成しなさい。

「上昇」と「下降」

点・線・円・四角形・三角形などを用いること。
画面は幅600 x 高さ300ピクセル。
左側の300 x 300ピクセルの中に「上昇」、右側の300 x 300ピクセル中に「下降」をイメージしてプログラムすること。
グラフィックは抽象的なものでも、具象的なものでもかまわないが、それぞれの言葉のイメージが的確に第三者に伝わるようにすること。
両方の画面にアニメーションを入れ、どちらかの画面にはマウスインタラクションを入れること。両方の画面にインタラクションを入れても構わない。

最終課題

「新しいGoogleのインタラクティブ・ロゴ」を制作してください。特定のイベント用に作ってもかまわない（例：クリスマス、正月、ハロウィン、花見など？）

条件；

画像は使用してもいいが、ただ画像を貼り込んでいるだけのものは不可。
必ずマウスのインタラクションを入れること。キーボード入力は入れても入れなくてもいい。
サイズ自由
if文、for文は必ず使うこと。

参考URL

授業内ルール（対面授業の場合）

大前提は、他人に迷惑をかけないこと。
授業中に無断で携帯電話を操作していた場合、最終評価の点数から5点減点する。
飲食は厳禁。どうしても飲食しなければいけない事情がある場合は、教室から出て飲食すること。
他人のコードを盗用したことが明らかな場合には、その作品の点数は0点にする。

成績評価

【授業開始30分までは遅刻を認める。それ以降は欠席扱いとする。】
出席→50%、小課題→10%、中間課題→15%、最終課題→25%の割合で評価する。
注: 上記の評価は授業の進行状況によって変動する可能性がある