1. 三角関数
さて、プログラムによって図形を描く場合に避けて通れないのがsine, cosine（三角関数）です。これは、プログラムで円などに代表される曲線を描く際によく使われます。
tangentはあまり使われないようですので、ここでは省略します（僕も殆ど使ったことがない）。
多少公式的なものが出てくるが故に、ここでつまづく人も多いかもしれません。
しかし、一度公式を覚えてしまえばそんなに難しいものではありません。
ここでは、なるべく丁寧にsine, cosineがどのように使われるのか解説していきたいと思います。
まずは円を描いてみましょう。通常のellipse(x, y, width, height)のように、現在のプログラミング言語は、sine, cosineを使わなくても円が描けてしまいますが、このsine, cosineは円だけでなく様々な曲線運動への応用が利きます。

この授業は、アートやデザイン分野の学生にプログラミングを効率よく学習させるため組み立てられたものです。
現在のアートやデザインにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。
よって、この授業ではプログラミングによってグラフィックの描画やサウンドのエフェクト、動画のエフェクト、ネットワークなどの、直接表現に結びつく実践的な方法を学びます。
開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。
非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。

授業概要
野口研究室は、以下のキーワードに関連するプロジェクト／作品制作を行ないます。
ソフトウェアアート、インタラクティブアート、パブリックメディアアート、データヴィジュアライゼーション

画像をリンクしている場合、Internet Explorer等では画像に枠線が現れてしまいます。
これは、デザイン上あまり好ましくないので、消したい場合はスタイルシートに以下のコードを記述します。

1
2
3
a img {
　　border-style: none;
}

xhtmlとCSSを使ってデザインする場合によく問題になる点は、「ブラウザによって表示のされ方が違う」という点です。
特に、Internet Explorer 6.0に問題が多いと言われています。
実際にはこの上記2つのブラウザはまだまだシェアが高いので、無視はできません。
http://journal.mycom.co.jp/news/2010/10/05/047/index.html
しかし、今後Internet Explorer6.0のシェアは落ちていくと考えられるので、この授業では、IE7もしくは8、Firefox3.6で確認しましょう。

実際にトップページをデザインする際にどのようなレイアウトにするかを考えるのだが、ここではグリッドによるレイアウトを使用してみる。
グリッドとは、効率的、安定的にサイトのレイアウトをデザインをするために画面のレイアウトの基本となる部分を格子状の箱として作成することである。
ここでは、950 x 580ピクセルの画面を作ってみる。
1. まず、Photoshopで970 x 600ピクセルの画面を作成し、単位をピクセルとする。
2. グリッドの設定を、グリッド線：50ピクセル、分割数：５にする。
これで、10ピクセルのグリッドができる。
以下のサンプルを参考にして、幅70ピクセルのカラム（列）、幅10ピクセルのマージン（空き）を作成する。

サーバとクライアント
webサイトを作る際に用いられるのがhtml文書（と画像など）で、そのhtml文書を読み込み、表示するのがブラウザである。ブラウザは、ネットワーク上にあるhtml文書だけでなく、ブラウザの起動しているPC内（ローカル環境という）のハードディスクにあるhtml文書も同じように表示できる。

クライアント環境にあるhtml文書は自分しか見ることができないが、FTPやSCPという方法によってサーバーへ文書をアップロードすれば、インターネット上に公開されたウェブサイトとなる。
注；
クライアントからサーバへデータを転送することをアップロード(upload)
サーバからクライアントへデータを転送することをダウンロード(download)
という。
サーバへのアップロード
コンピュータ内でつくっていたHTMLファイルや画像ファイルなどをサーバに転送し、さらに適切なアクセス権の設定を行ってやれば、インターネット上に公開されたウェブサイトになる。
一般的にファイルの転送は「FTP」と呼ばれるサーバへの接続方法を用いる。メディアアート表現学科のサーバの場合は「SCP」というよりセキュリティの高い方法によって接続する。SCPのソフトとして、「WinSCP」というフリーウェアを用いる。
WinSCPを最初に立ち上げると下のような画面が開くので、学科のサーバの設定を登録する。

ホスト名：sandbox.media.t-kougei.ac.jp
ユーザ名：user11_000 (000の部分は自分の学籍番号の下3桁)
パスワード：授業時に説明
さらにポート番号を「20022」へ変更する（この設定はインタラクティブメディア学科のサーバのみで、一般的には必要ない）。
「ログイン」を選んで、サーバへの接続を開始する。サーバを信頼するかどうか、をたずねるダイアログがでるが、問題ないので「Yes」を選ぶ。

これで、認証がうまくいけばサーバに接続できる。左半分がローカルのファイルで、右半分がサーバのファイルを表示している。ローカルからサーバへ、ドラッグ＆ドロップすればファイルをアップロードできる。このサーバでは、ウェブサイトは「public_html」フォルダにアップロードする。

サイトで表示
次に、以下のURLにアクセスする。
http://sandbox.media.t-kougei.ac.jp/~user11_000/
（000の部分は自分の学籍番号の下3桁）
「Forbidden」というメッセージが出てきた人は、パーミッションのページを参照すること。
index.htmlファイルの必要性
サーバにデータをアップロードした時に気をつけななければいけないのは、必ず「index.html」を入れることである。
それぞれのディレクトリを読み込んだ時に、先ず最初にindex.htmlが探される。それがないと、すべてのファイルを表示してしまう。がindex.htmlが存在すれば先ずそのファイルが表示されるため、そのディレクトリの他のファイルは隠蔽される。
不正なアクセスを防ぐためにも、必ずindex.htmlファイルを入れること。

授業の目的

現在主流となっているxhtml+CSSを実習によって体験することによる、文書構造とデザインの理解
タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習

openFrameworksとは
openFrameworksは、C++で書かれたライブラリ群です。
ですがProcessingと同じように、簡単なコードのみで様々なグラフィックスやインタラクションをデザインすることができます。C++を知らなくてもプログラミングが可能になっています。
その範囲も、グラフィック、インタラクティブ表現、ネットワーク、サウンド、画像処理、フィジカルコンピューティングなど多岐にわたっています。
表現できる内容はかなりProcessingと重なりますが、C++で書かれているため、実行速度は非常に速いというのが特徴です。
この実習では、openFrameworksを使用して、実際の作品制作を体験してみます。
Processingでプログラミングをした経験がある人にとっては非常に学習しやすいです。
まずは、習うより慣れろです。さっそく始めましょう。この実習は以下の環境で行います。
OS：MacOS 10.6.4
開発環境：Xcode 3.2.3

さて、前回の授業で何となくオブジェクト指向の概念は分かってもらえたと思います。
今回は、オブジェクトに柔軟性と拡張性を与えるための機能である「継承」を学びます。