この授業は、デザインやアートの分野の学生にプログラミングを楽しく学習してもらうために組み立てられたものです。
現在のデザインやアートにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。
よって、この授業ではプログラミングによってグラフィックの描画やサウンドのエフェクト、動画のエフェクト、ネットワークなどの、直接表現に結びつく実践的な方法を学びます。
開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。
非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。
位置づけとしては1年メディアプログラミング演習Iの応用編です。ですから、引き続き勉強したい人はもちろんのこと、これまでプログラミングに挫折してしまった人もやり直すことができます。
何故、デザインやアートにプログラミングが必要なのか
学生と話をしていてプログラミングの話をすると、急に暗い顔になり、「ああ、苦手」という言葉がよく返ってきます。おそらくその学生たちは、プログラミングの学習の仕方がいまいち分からないのと、その深遠な可能性がまだ見えて来ていないのでしょう。それは、教える側の責任もあると思います。実際、自分も独学でJavaを勉強しようとした時、一度挫折しました。しかし、何年か後にもう一度勉強し直してプログラミングができるようになったのです。
ですから、現時点でプログラミングに対する苦手意識がある学生でもいつでもやり直せると考えています。要は、なぜ勉強しなくてはならないのかと、どうやって勉強するのかをもう一度見直せばいいのです。
あともう一つ、プログラミング=数学だと思っている学生も多いでしょう。確かにそうなのですが、数学が苦手でもプログラミングが苦手だとは限りません。実際私も数学は得意ではありません。しかしプログラミングは楽しいと思いました。自身の数学の苦手意識を超える面白さがプログラミングにはあったのだと思います。
ですから、数学が苦手だから無理だ、などという先入観は捨てて、新たな気持ちで臨んでもらえればいいと思います。
カリキュラム構成のキーワード
【表現的側面】
点、線、図形、色彩、アニメーション、インタラクション（キーボード入力、マウス入力）、サウンド、ビデオ入力、ネットワークコミュニケーション
【アルゴリズム的側面】
変数、変数の型、if、else、for、while、switch、配列（1次元配列 〜 n次元配列）、sine、cosine
授業内ルール
- 大前提は、他人に迷惑をかけないこと。
- 他人のコードを盗用したことが明らかな場合には、その作品の点数は0点にする。
- 遠隔授業の際は、マイクは基本的にオフにしておく。ビデオは基本的にオンにする。自分の顔を映したくないという人はオフでも構わない。
評価
出席率 50%、小課題 15%、中間課題 15%、 最終課題 20%
みなさんの理解度を見ながら小課題の数が増減することがあります。上記の配点はあくまで目安です。
備考
この授業は、Processingのバージョン3.5.3を使用して行います。3.5.4が最新バージョンなので、自宅での作業には最新版で問題ないでしょう。
スケジュール
基本的には1年のメディアプログラミング演習Iの続きなのですが、最初の2週はメディアプログラミング演習Iの復習を行ないます。その後、画像処理エフェクト、サウンド、ネットワークなどの応用実習を行ないます。
■4/14 プログラミングの基礎を復習
■4/21 プログラミングの基礎を復習
■4/28 配列
■5/12 3Dプログラミングの基礎
■5/19 ランダム、ノイズ
■5/26 三角関数
■6/2 中間課題発表
■6/9 現実世界を変換する（画像処理）1
■6/23 現実世界を変換する（画像処理）2
■6/30 サウンド1
■7/7 サウンド2、ネットワーク
■7/14 最終課題制作
参考：
■7/21 最終講評
課題
小課題1
配列を使って面白いグラフィックを作ってください。アニメーションをいれること。インタラクションがあってもいい。
小課題2：ノイズのスタディ
ノイズを使った表現を行う。
- 図形は線のみを使用。色彩はグレースケールのみ。線幅は1ピクセル。数は自由
- すでに学習した内容はすべて使っていい（配列、座標変換、ランダムなど）
- 画面は400×400ピクセル
- 静止画を作成する
- クリックごとにグラフィックが更新されるようにプログラムする
以下のリンクでは5パターンの作成を課していますが、この実習では1パターンのみの提出です。
https://r-dimension.xsrv.jp/classes_j/noise_study/
中間課題
以下の相反する2つの言葉をそれぞれイメージしてプログラムによってグラフィックを作成しなさい。
「硬化」と「軟化」
- 点・線・円・四角形・三角形などを用いること。
- 画面は幅750 x 高さ400ピクセル。
- 左側の300 x 300ピクセルの中に「硬化」、右側の300 x 300ピクセル中に「軟化」をイメージしてプログラムすること。
- グラフィックは抽象的なものでも、具象的なものでもかまわないが、それぞれの言葉のイメージが的確に第三者に伝わるようにすること。
- 両方の画面にアニメーションを入れ、どちらかの画面にはマウスインタラクションを入れること。両方の画面にインタラクションを入れても構わない。
- 色彩自由。
テンプレート
void setup() {
size(750, 400);
noStroke();
}
void draw() {
background(0);
/*
ここにコードを書く
*/
//縁
fill(255);
rect(0, 0, 750, 50);
rect(0, 350, 750, 50);
rect(0, 0, 50, 400);
rect(350, 0, 50, 400);
rect(700, 0, 50, 400);
}小課題3
独創的で面白いキャプチャ映像のエフェクトを作ってください。
- 画面は幅640x 高さ480ピクセル。
- 極力サンプルとは違うものを作ること。
最終課題：
サウンドビジュアライザを作成してください。
- 曲は自分で好きなものを選ぶ
- 画面は800 x 800 pix以内
- アニメーションが単調にならないように工夫してください。1分ぐらいは飽きない（変化がある）アニメーション、インタラクションを目指す
- 時間管理のプログラムは、3.1.7のタイマーが参考になる。