はてなブックマーク

こちらでは、pdfで配布されるプログラミングガイド「コードとデザイン」 の、プログラミング実習の部分を公開しています。 全てのページをご覧になりたい方は、pdfをダウンロードしてください。 タイトル デザイナー、アーティストのためのプログラミングガイド 野口靖 ダウンロード 先日ver.0.9を公開しましたが、現在ver.1.0を校正中です。pdf版は少々お待ちください。 サンプルコードはダウンロードできます。 code_design_samples 学生作品ページ https://r-dimension.xsrv.jp/classes_j/p5_study/ はじめに 本書は、デザイン、アート、情報学関連の大学に在籍する学生や、プログラミングに興味はあるけれどもちょっと敷居が高いなと感じているデザイナーやアーティストのみなさんに、プログラミングによる造形表現の楽しさを実感していただくこと

このページではカメラを設置して、空間の見え方を設定します。 技術的な用語では、透視法射影といいます。 標準のカメラ 標準のカメラはcamera()を使います。 視点と中心点、天地がどの方向か（通常はYが天）、を指定します。 camera(視点X, 視点Y, 視点Z, 中心点X, 中心点Y, 中心点Z, 天地X, 天地Y, 天地Z); コードは以下の通りになります。いろいろcamera関数の中の値を変えて、試してみましょう。 void setup() { size(400, 300, P3D); noFill(); stroke(0); } void draw() { background(255); pushMatrix(); translate(width/2, height/2, 0); //基準点を画面中央。z軸方向には-100 camera(90.0, -100.0, 300.0,

注意!!! Xcode5から登録手順がかなり簡単になりました。僕は以下のサイトを参考にしました。 旧来の方法でも登録できますが、新しい方法をおすすめします。 http://dev.classmethod.jp/references/generate-provisioning-ios7/ iOSデバイスの実機テストは意外に結構めんどうな手続きが必要になりますが、一度覚えてしまえば後は問題ないと思います。 基本的に以下の流れになります。 1. iOS Developer Programへの登録 2. キーチェーンアクセスでの証明書要求 3. Appleメンバーセンターでの証明書の発行 4. キーチェーンアクセスでの証明書の登録 5. App ID登録 6. デバイス登録 7. Provisioning Profileの作成・登録 1. iOS Developer Programへの登録 まずは

次はオブジェクト指向言語プログラミングObject Oriented Programming (以下OOP)です。オブジェクト指向プログラミングとは、「オブジェクト単位によって設計された」プログラム、という意味です。 オブジェクト単位について、もう少し説明しましょう。例えば、人間は「呼吸する」、「食べる」、「寝る」などの機能を備えたオブジェクトです。また、車は「走る」、「止まる」、「曲がる」などの機能を備えたオブジェクトだといえます。また、これらの機能を「メソッド」といいます。 この考え方をプログラミングで設計することが、オブジェクト指向言語プログラミングの考え方です。 5.3.1　クラス、インスタンス、メソッド クラスとは「ひな型」です。例えば、人間は必ずDNAの情報を引き継ぎ、親と似た形で生まれてきます。しかし、個性はそれぞれ兄弟で違いますね。プログラミングの場合には、まず人クラスを設

この節では、オブジェクトを動かしてみます。 ここで必ず使う機能はsetup()とdraw()です。このモードはProcessingプログラミングの中で一番よく使われるものです。 setup()で初期化し、draw()を繰り返し実行することでアニメーションやインタラクションを実現します。次の点を理解しておきましょう。 ・setup()は一度だけ実行される ・draw()はプログラムが動いている間は常に繰り返される 3.1.1　簡単な運動 まずは、ともかく動くものを作ってみましょう。第一歩は、左から右に円が移動するだけの簡単な動きです。 int eSize = 20; //オブジェクトのサイズ int velocity = 5; //オブジェクトのスピード int x = 0; //オブジェクトのx座標 //初期化 void setup() { size(400, 400); backgrou

5.3.5　クラスファイルの作成 ここでは、他のプログラムにも再利用できるようにCircleクラス用のファイルを作成します。コードは【リスト5.3-b】をコピーし、そこからCircleクラスの部分だけを別ファイル（Circle.pde）にします。 Processingの画面右上のボタンから「New Tab」をクリックします【図5.3-g】。

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

minimはProcessing1.0以降のバージョンで標準のサウンドライブラリです。 それまでのライブラリが、ステレオ再生できなかったのに対して、minimはステレオになっています。 短いコードでオーディオのコントロールができます。 Processingをダウンロードした時点で、いくつかのサンプルは入っているのですが、以下のサイトのMinimをダウンロードすると、かなりの数のサンプルが入手できます。 https://github.com/ddf/Minim また、上記のサイトはminimの全ての情報が載っています。英語なので大変かもしれませんが、もしminimを使っていて分からないことがあったら、まずはこのサイトを覗いてみましょう。 音楽ファイルの再生 さて、まずは基本中の基本である音声ファイルの再生です。再生自体は短いコードで済みますが、最後にサウンドデータをプログラムの中で終了させる

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

これまでのプログラムは静止画を表示するだけでしたが、次はアニメーションやインタラクションに必要なプログラムの説明をします。 ここで必ず使う機能はsetup()とdraw()です。 このモードはProcessingプログラミングの中で一番よく使われるものでしょう。 setup()で初期化し、draw()を繰り返し実行することでアニメーションなどが出来ます。 setup()は一度だけしか使えません。以下にその例を挙げます。 繰り返し 点が左から右に動き、右端まで行くとまた左端から始まるアニメーションです。 int eSize = 5; //オブジェクトのサイズ int speed = 5; //オブジェクトのスピード int x = 0; //オブジェクトのx座標 void setup() { size(400, 400); noStroke(); //輪郭を描かない frameRate(30

まずは立体を描画してみる まずは、基本的な3Dモデルである立方体（cube）を表示、コントロールするところから始めてみましょう。 ここでは、processingの環境で一番一般的な、P3Dというライブラリを使います。これは、特別な準備をしなくても初めから使えるようになっています。 下図のように、立方体を表示します。 まず先に、全体のコードを見てみましょう。 //Y軸を中心に60度回転した立方体を描画 void setup(){ size(400, 400, P3D); //P3Dと書くことによって、3D空間であることを明示する } void draw(){ background(0); translate(width/2, height/2); //立体の中心を画面中央に移動 rotateY(radians(60)); //Y軸に対して60度回転 box(150, 150, 150); /

座標保存の基礎 この項では、3Dグラフィックスにおける重要な概念である、座標の保存（pushMatrix, popMatrix）を解説します。 まず、以下のグラフィックを書いてみてください。 size(400, 400, P3D); background(0); //赤い直方体 fill(255, 0, 0); translate(100, 100, 0); box(50, 50, 1); //直方体を描く //緑の直方体 fill(0, 255, 0); translate(200, 200, 0); box(100, 100, 1); //直方体を描く ここで、translateが2回使われています。 結果を見てみると分かりますが、座標が足されていて、2つ目のboxの中心点は、x = 300, y = 300です。 これは、つまり相対座標になるので、絶対座標で指定したい場合もあるでしょ

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

同一のPC内でのネットワーク 今回は、processingを使ったネットワークについて実習を行いながらドローイングチャットを制作します。 processingのネットワーク機能は他の言語に比べるとかなり簡単ですが、それでも少し複雑なので、順を追って書いていきます。 なお、ネットワークの接続方法はいくつかありますが、ここではoscP5OpenSound Control for Processingというライブラリを使用します。上記のサイトでライブラリをダウンロード、インストールしてください。 OpenSound Controlは様々なプラットフォーム間とのデータ通信を可能にする非常に便利な規格です。Processing, Flash, Max/MSPなどの間での通信が代表的です。 まず、ライブラリをインポートします。

Quartz Composerによるビジュアルプログラミング演習（Quartz Composer入門及びiTunesビジュアライザ作成） 2009年度前期　テクニカルワークショップ Quartz Composerを利用したビジュアルプログラミングワークショップ ●Quartz Composerという、Macに標準で添付されているソフトウェアを使い、音楽にリアルタイムで2D/3Dグラフィックスが反応するiTunesビジュアライザを作成します。 ●Quartz Composerは、使用方法がMax/MSPに似たビジュアルプログラミング環境です。 この実習を通して、2D/3Dグラフィックスプログラミングの基礎と、サウンドの基礎を学びます。 ●Quarts Composerの画面 スケジュール ●第1回（5/19） 1. Quartz Composer入門１ 1-1. Quartz Compose

さて、次はオープンソースの画像処理ライブラリである、OpenCVを使ってみます。 元のOpenCVはC++用に書かれていて、ここで使うものはProcessing用に機能を限定したものです。 ですが、それでも使いようによっては便利な機能があるので、ある程度の細かい画像処理ができます。 インストール まずは、OpenCVをインストールします。以下のページを開いてください。ここには、processingで使える機能も全て出ています。 http://ubaa.net/shared/processing/opencv/ このページの上の方にある、opencv-framework-1.1.dmgをダウンロードし、インストールします。 ミラーサーバ 次に、OpenCV Processing Libraryをダウンロードし、ProcessingのLibrariesフォルダに入れましょう（下図を参照して下さ

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

さて、プログラムによって図形を描く場合に避けて通れないのが三角関数（サイン、コサイン）です。円などに代表される曲線を描く際によく使われます。タンジェントは使用頻度が低いので、ここでは省略します。 多少公式的なものが出てくるがゆえに苦手意識が生じる人もいるかもしれませんが、冷静にゆっくり実習してみましょう。公式は覚えなくても使う時に参考書を確認すればいいので、安心してください。 それでは、サイン（sin）、コサイン（cos）を使って曲線を描いてみましょう。 4.2.1　円運動（極座標） まずは円を描いてみます。もちろんellipse(x, y, width, height)でも円が描けますが、このサイン、コサインは円だけでなく様々な曲線運動に使えます。 【図4.2-a】を見てください。円を描く際には、図のθ（シータ）の角度からx, yの座標を求める必要があります。

今回は画像処理の2回目です。 前の画像処理1の内容は、原理的なことに触れているので、結構難しかった人もいるかと思います。 今回は、インタラクティブアート作品に利用するためのより実践的な方法を学びます。 本当はできれば露出を固定することができるビデオカメラがいいのですが、最近はwebカメラやkinectなど、様々なカメラがあるので、まずは自分で持っているカメラでいいでしょう。ノートパソコンについているカメラでも問題ありません。 1. フレーム差分 まずは、カメラの前で対象物（人など）が動いた場合に、その変化量を計算するプログラムです。 これを画像処理の用語で「フレーム差分」と言います。 movementSumに動いたピクセルの総数が代入されます。 この場合は640 x 480の画面なので、フレームごとのピクセルは307200ピクセルとなります。 ですから、動作量は0 ~ 307200の値を取

ProcessingとJavaの関係は少し面白いものです。 一見、Processingは一つのプログラミング言語のようですが、実はJavaによって書かれたソフトウェアなのです。 Processing上で書かれたコードは、一度Javaに翻訳され、最終的にはJavaアプレットやアプリケーションとしてコンパイルされます。 当然、それだったらなぜJavaを勉強しないのか？という疑問が出てくるでしょう。 しかし、ProcessingとJavaはその記述する量にまず違いがあります。例えば、下のコードを見比べてみて下さい。下のコードは、それぞれ同じグラフィックを表示するコードです。

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

Processing Development Environment (PDE) Processing Development Environmentは、コードを書くための簡単なエディタ、メッセージエリア、テキストコンソール、ファイルの管理のためのタブ、よく使う機能をボタンにしたツールバー、メニューによって構成されます。 プログラムが実行された際には、ディスプレイウィンドウと呼ばれる新しいウィンドウが開きます。 Processingを使って作られたソフトウェアはスケッチといいます。スケッチはテキストエディタの中で記述されます。その中でテキストに対しカット／ペースト、検索／置き換えなどができます。 メッセージエリアは、保存、書き出し、エラーの結果を表示します。 コンソールは、エラーメッセージ、print()、println()といった関数といったProcessingのプログラムのメッセージを