プレゼンテーション法 http://yoppa.jpn.org/presen.php プレゼンテーション法の講義資料 ja Nucleus CMS v3.33 © Weblog http://backend.userland.com/rss http://yoppa.org/nucleus/nucleus2.gif プレゼンテーション法 http://yoppa.jpn.org/presen.php <![CDATA[第８回：既存の作品を解析・改造してみる]]> http://yoppa.jpn.org/presen.php?itemid=217 ここまでの授業で、Processingの基本をひと通り学んできました。ここからさらに高度なステップに進むために、さらに様々なコーディングのテクニックを学んでいく必要があります。

プログラミング上達の秘訣として、よくできたプログラムの実例を数多く見る、という方法があります。よくできたプログラムの実例は参考書やチュートリアルを学ぶ以上に様々な知識や知恵を得ることが可能です。

今回の講義は、参考サイトから自分の気にいった作品を選び、そのソースコードを読みとくということを行ってみたいと思います。

参考サイト

]]> General http://yoppa.jpn.org/presen.php?itemid=217 Mon, 19 Dec 2005 07:54:37 +0900 <![CDATA[第７回：オブジェクト指向プログラミング入門]]> http://yoppa.jpn.org/presen.php?itemid=209 今日の講義では、Proce55ingを通じてオブジェクト指向プログラミング(object-oriented programming, OOP)の基本について学んでいきます。

オブジェクト指向プログラミングとは、プログラムを相互にメッセージを送りあうオブジェクトの集合としてとらえ記述していく方法です。この手法を用いることで開発の効率やその容易さが格段に向上します。

オブジェクト指向の考えかたの枠組みは、プログラミングにとどまらず、システム設計やシステムが対象とする業務のモデリング、システムの分析など、複雑な現実の事象に対応していく際の重要な考えかたともなるでしょう。

オブジェクトとは

オブジェクト(object)はオブジェクト指向プログラミングの中心概念である。オブジェクトの内部は、オブジェクトの動作(メソッド、 method)とその内部に保持するデータから成りたっている。

プログラムは複数のオブジェクトの集合から成りたっている。それぞれのオブジェクトはメッセージ(message)を解して接続されている。オブジェクトは、メッセージ(message)を受け取り、その処理の過程で内部に蓄えたデータを書き換え、必要に応じて他のオブジェクトへメッセージを送るといった動作をする。

クラス

クラスとは、同じ特性を持つオブジェクトの集合に名前をつけたもの。つまりオブジェクトの雛形として、その特性を抽象化したものといえる。例えば、「車」を例に考えると、「車」という言葉自体は「私の車」や「今乗ったバス」というような具体的なオブジェクトを指し示すものではなく、概念一般をあらわしたものである。この「車」がクラスにあたる概念となる。「私の車」というように具体的な車になったもの、つまりあるクラスに属するオブジェクトをインスタンスと呼ぶ。

簡単なプログラムをオブジェクト指向に書き換える

オブジェクト指向でない書きかた

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127); 
} 

void draw() { 
  rect(20, 20, 160, 160); 
}

オブジェクト指向な書き方に変更

RectDrawer r1 = new RectDrawer();

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127);
} 

void draw() { 
  r1.drawRect();
} 

class RectDrawer {
  void drawRect() {
    rect(20, 20, 160, 160);
  }
}

オブジェクトにパラメータを渡す

RectDrawer r1 = new RectDrawer(20,20,120);
RectDrawer r2 = new RectDrawer(90,100,80);

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127);
} 

void draw() { 
  r1.drawRect();
  r2.drawRect();
} 

class RectDrawer {
  float xpos, ypos, rectsize;
  RectDrawer(float x, float y, float s){
    xpos = x;
    ypos = y;
    rectsize = s;
  }
  void drawRect() {
    rect(xpos, ypos, rectsize, rectsize);
  }
}

「車」というオブジェクトについて考える

車を例に、オブジェクト指向のプログラムについて考えます。ただし車の全ての機能を実現するのは無理ですので、非常に抽象化された車を想定します。

車をひとつのオブジェクトとして捉えた場合、その属性は「属性」と「動作」に分けてそれぞれの車を定義することができます。

属性

  • 色
  • 形
  • 場所

動作

  • 加速
  • 減速

一般的にオブジェクト指向のプログラムでは、関連する「属性」の集合とそれに対する手続「動作」を一つのまとまった単位「オブジェクト」として扱います。オブジェクトの属性をインスタンス、オブジェクトの動作をメソッドと呼びます。

こうして、様々な車の属性と動作を記述することによって、車という個々のオブジェクトの総体を表わすひとつの雛形が記述されたことになります。同じ特性を持つオブジェクトの集合に名前を付けたものをクラスと言いますです。オブジェクトの特性を抽象化したものともいえます。クラスは一般的に名詞で表現します。

車のクラスをProcessingで定義する

車をあらわすクラスを実際に書いてみます。ここでは車を以下の属性(インスタンス)と動作(メソッド)を定義しています。

属性(インスタンス)

  • 色
  • X軸上の位置
  • Y軸上の位置
  • X軸方向の速度

行為(メソッド)

  • 描画
  • 移動
class Car
{
  color c;
  int xpos;
  int ypos;
  int xvel;

  // コンストラクタ
  Car(color c_, int xp, int yp, int xv) {
    c = color(255);
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width) { xpos = 0; }
  }
}

車のクラスを使ってみる

Car myCar1;
Car myCar2;

void setup() {
  size(200,200);
  background(0);
  framerate(30);
  color tempcolor = color(255,0,0);
  myCar1 = new Car(tempcolor,0,50,1);
  tempcolor = color(0,255,0);
  myCar2 = new Car(tempcolor,0,75,2);
}

void draw() {
  background(0);
  myCar1.draw();
  myCar2.draw();
  myCar1.drive();
  myCar2.drive();
}

class Car
{

  color c;
  int xpos;
  int ypos;
  int xvel;

  Car(color c_, int xp, int yp, int xv) {
    c = c_;
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width+20) { xpos = -20; }
  }
}

複数の車を同時に操作

int MAX = 200;
Car[] myCars = new Car[MAX];

void setup() {
  size(200,200);
  framerate(30);
  for (int i = 0; i < MAX; i++) {
    color tempcolor = color(random(255),random(255),random(255), random(100));
    myCars[i] = new Car(tempcolor,random(width),random(height),random(1,5));
  }
}

void draw() {
  background(0);
  for (int i = 0; i < MAX; i++) {
    myCars[i].drive();
    myCars[i].draw();
  }
}

class Car
{
  color c;
  float xpos;
  float ypos;
  float xvel;

  Car(color c_, float xp, float yp, float xv) {
    c = c_;
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    noStroke();
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width+20) { 
      xpos = -20; 
    }
  }
}

応用：キー入力で文字が3D空間を飛んでいく

import processing.opengl.*;
int MAX = 100;
int count = 0, num = 0, updatenum = 0;
FadeText[] myFadeText = new FadeText[MAX];

void setup()
{
  size(200, 200, OPENGL);
  PFont myFont; 
  myFont = createFont("Times", 128); 
  textFont(myFont); 
  framerate(30);
}

void keyPressed() 
{ 
  count = num%MAX;
  color col = color(random(255),random(255),random(255), 100);
  myFadeText[count] = new FadeText(10, col, key, random(width), random(height), 20);
  if(updatenum<count){
    updatenum = count;
  }
  num++;
}

void draw(){
  background(0);
  for(int i=0; i<updatenum; i++){
    myFadeText[i].update();
  }
}

class FadeText{
  float speed;
  color myCol;
  char type;
  float xpos;
  float ypos;
  float zpos;

  FadeText(float sp, color cl, char ch, float xp, float yp, float zp) {
    speed = sp;
    myCol = cl;
    type = ch;
    xpos = xp;
    ypos = yp;
    zpos = zp;
  }

  void update(){
    fill(myCol);
    zpos -= speed;
    text(type, xpos, ypos, zpos);
  }
}

オブジェクトとは

オブジェクト(object)はオブジェクト指向プログラミングの中心概念である。オブジェクトの内部は、オブジェクトの動作(メソッド、 method)とその内部に保持するデータから成りたっている。

プログラムは複数のオブジェクトの集合から成りたっている。それぞれのオブジェクトはメッセージ(message)を解して接続されている。オブジェクトは、メッセージ(message)を受け取り、その処理の過程で内部に蓄えたデータを書き換え、必要に応じて他のオブジェクトへメッセージを送るといった動作をする。

クラス

クラスとは、同じ特性を持つオブジェクトの集合に名前をつけたもの。つまりオブジェクトの雛形として、その特性を抽象化したものといえる。例えば、「車」を例に考えると、「車」という言葉自体は「私の車」や「今乗ったバス」というような具体的なオブジェクトを指し示すものではなく、概念一般をあらわしたものである。この「車」がクラスにあたる概念となる。「私の車」というように具体的な車になったもの、つまりあるクラスに属するオブジェクトをインスタンスと呼ぶ。

簡単なプログラムをオブジェクト指向に書き換える

オブジェクト指向でない書きかた

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127); 
} 

void draw() { 
  rect(20, 20, 160, 160); 
}

オブジェクト指向な書き方に変更

RectDrawer r1 = new RectDrawer();

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127);
} 

void draw() { 
  r1.drawRect();
} 

class RectDrawer {
  void drawRect() {
    rect(20, 20, 160, 160);
  }
}

オブジェクトにパラメータを渡す

RectDrawer r1 = new RectDrawer(20,20,120);
RectDrawer r2 = new RectDrawer(90,100,80);

void setup() { 
  size(200, 200); 
  background(0); 
  stroke(200); 
  fill(127);
} 

void draw() { 
  r1.drawRect();
  r2.drawRect();
} 

class RectDrawer {
  float xpos, ypos, rectsize;
  RectDrawer(float x, float y, float s){
    xpos = x;
    ypos = y;
    rectsize = s;
  }
  void drawRect() {
    rect(xpos, ypos, rectsize, rectsize);
  }
}

「車」というオブジェクトについて考える

車を例に、オブジェクト指向のプログラムについて考えます。ただし車の全ての機能を実現するのは無理ですので、非常に抽象化された車を想定します。

車をひとつのオブジェクトとして捉えた場合、その属性は「属性」と「動作」に分けてそれぞれの車を定義することができます。

属性

  • 色
  • 形
  • 場所

動作

  • 加速
  • 減速

一般的にオブジェクト指向のプログラムでは、関連する「属性」の集合とそれに対する手続「動作」を一つのまとまった単位「オブジェクト」として扱います。オブジェクトの属性をインスタンス、オブジェクトの動作をメソッドと呼びます。

こうして、様々な車の属性と動作を記述することによって、車という個々のオブジェクトの総体を表わすひとつの雛形が記述されたことになります。同じ特性を持つオブジェクトの集合に名前を付けたものをクラスと言いますです。オブジェクトの特性を抽象化したものともいえます。クラスは一般的に名詞で表現します。

車のクラスをProcessingで定義する

車をあらわすクラスを実際に書いてみます。ここでは車を以下の属性(インスタンス)と動作(メソッド)を定義しています。

属性(インスタンス)

  • 色
  • X軸上の位置
  • Y軸上の位置
  • X軸方向の速度

行為(メソッド)

  • 描画
  • 移動
class Car
{
  color c;
  int xpos;
  int ypos;
  int xvel;

  // コンストラクタ
  Car(color c_, int xp, int yp, int xv) {
    c = color(255);
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width) { xpos = 0; }
  }
}

車のクラスを使ってみる

Car myCar1;
Car myCar2;

void setup() {
  size(200,200);
  background(0);
  framerate(30);
  color tempcolor = color(255,0,0);
  myCar1 = new Car(tempcolor,0,50,1);
  tempcolor = color(0,255,0);
  myCar2 = new Car(tempcolor,0,75,2);
}

void draw() {
  background(0);
  myCar1.draw();
  myCar2.draw();
  myCar1.drive();
  myCar2.drive();
}

class Car
{

  color c;
  int xpos;
  int ypos;
  int xvel;

  Car(color c_, int xp, int yp, int xv) {
    c = c_;
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width+20) { xpos = -20; }
  }
}

複数の車を同時に操作

int MAX = 200;
Car[] myCars = new Car[MAX];

void setup() {
  size(200,200);
  framerate(30);
  for (int i = 0; i < MAX; i++) {
    color tempcolor = color(random(255),random(255),random(255), random(100));
    myCars[i] = new Car(tempcolor,random(width),random(height),random(1,5));
  }
}

void draw() {
  background(0);
  for (int i = 0; i < MAX; i++) {
    myCars[i].drive();
    myCars[i].draw();
  }
}

class Car
{
  color c;
  float xpos;
  float ypos;
  float xvel;

  Car(color c_, float xp, float yp, float xv) {
    c = c_;
    xpos = xp;
    ypos = yp;
    xvel = xv;
  }

  void draw () {
    fill(c);
    noStroke();
    rect(xpos,ypos,20,10);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width+20) { 
      xpos = -20; 
    }
  }
}

応用：キー入力で文字が3D空間を飛んでいく

import processing.opengl.*;
int MAX = 100;
int count = 0, num = 0, updatenum = 0;
FadeText[] myFadeText = new FadeText[MAX];

void setup()
{
  size(200, 200, OPENGL);
  PFont myFont; 
  myFont = createFont("Times", 128); 
  textFont(myFont); 
  framerate(30);
}

void keyPressed() 
{ 
  count = num%MAX;
  color col = color(random(255),random(255),random(255), 100);
  myFadeText[count] = new FadeText(10, col, key, random(width), random(height), 20);
  if(updatenum<count){
    updatenum = count;
  }
  num++;
}

void draw(){
  background(0);
  for(int i=0; i<updatenum; i++){
    myFadeText[i].update();
  }
}

class FadeText{
  float speed;
  color myCol;
  char type;
  float xpos;
  float ypos;
  float zpos;

  FadeText(float sp, color cl, char ch, float xp, float yp, float zp) {
    speed = sp;
    myCol = cl;
    type = ch;
    xpos = xp;
    ypos = yp;
    zpos = zp;
  }

  void update(){
    fill(myCol);
    zpos -= speed;
    text(type, xpos, ypos, zpos);
  }
}
]]> General http://yoppa.jpn.org/presen.php?itemid=209 Sat, 3 Dec 2005 20:52:25 +0900 <![CDATA[第６回：Processing + Myron(JMyron)でリアルタイム映像処理]]> http://yoppa.jpn.org/presen.php?itemid=202 今日の授業は、processingでリアルタイムにビデオ映像をキャプチャーして、その情報を解析する方法を実験してきます。

今回は、オープンソースで開発が進められているビデオ解析のためのライブラリ群である、Myron(http://webcamxtra.sourceforge.net/)を利用します。

Myron(JMyron)とは

  • http://webcamxtra.sourceforge.net/
  • C++のコアライブラリーと、様々な言語で利用するためのラッパーから成る
  • Java、Processing、Macromedia Directorから利用が可能
  • オープンソースで開発が行われている、ビデオキャプチャーやコンピュータビジョン関するプラグイン

JMironサンプル(1)：ビデオ映像のキャプチャー

import JMyron.*; 
JMyron m; //カメラのオブジェクト 
void setup(){ 
    size(320,240); 
    //カメラのオブジェクトの 
    //新しいインスタンスを作成 
    m = new JMyron(); 
    //キャプチャ開始 
    m.start(width,height); 
    m.findGlobs(1); 
} 
void draw(){ 
    //カメラ映像のアップデート 
    m.update(); 
    //カメラの画像をピクセルで取得 
    int[] img = m.image(); 
    //表示画面のピクセル配列をロード 
    loadPixels(); 
    for(int i=0;i<width*height;i++){ 
	//表示画面の各ピクセル配列に、 
	//ビデオ画像のピクセルの配列を読み込み 
	pixels[i] = img[i]; 
    } 
    //表示画面のピクセル配列を更新 
    updatePixels(); 
} 
public void stop(){ 
    m.stop(); 
    super.stop(); 
}

JMyronサンプル(2)：取り込んだ映像をRGBに分解

import JMyron.*;
JMyron m;

void setup(){
    size(320*3,240);
    m = new JMyron();
    m.start(width,height);
    m.findGlobs(0);
    println("Myron " + m.version());
}
void draw(){
    background(0);
    m.update();
    int[] img = m.image();
    float[] r = new float[width*height];
    float[] g = new float[width*height];
    float[] b = new float[width*height];
    loadPixels();
    for(int i=0;i

JMyronサンプル(3)：画像の輪郭を抽出

import JMyron.*;
JMyron m;

void setup(){
    size(320,240);
    m = new JMyron();
    m.start(width,height);
    m.minDensity(100);
    m.trackColor(0,0,0,150);
    println("Myron " + m.version());
    stroke(128,128,255);
    fill(128,128,255,128);
}
void draw(){
    background(255);
    m.update();
    int[][][] list = m.globEdgePoints(10);
    for(int i=0;i

JMyronサンプル(4)：ビデオ映像をピクセレート

import JMyron.*;
JMyron m;

void setup(){
  size(640,480);
  m = new JMyron();
  m.start(width,height);
  m.findGlobs(0);
  println("Myron " + m.version());
  rectMode(CENTER);
  noStroke();
  smooth();
}
void draw(){
    background(0);
    m.update();
    int[] img = m.image();
    float r,g,b;
    for(int y=0;y

JMyronサンプル(5)：変化した部分だけを、表示する

import JMyron.*;
JMyron m;

void setup(){
    size(640,480);
    m = new JMyron();
    m.start(width,height);
    m.trackColor(255,255,255,256*3-100);
    m.update();
    m.adaptivity(10);
    m.adapt();
    println("Myron " + m.version());
    rectMode(CENTER);
    noStroke();
}
void draw(){
    m.update();
    int[] img = m.differenceImage();
    loadPixels();
    for(int i=0;i
]]> General http://yoppa.jpn.org/presen.php?itemid=202 Mon, 21 Nov 2005 05:33:46 +0900 <![CDATA[第5回：pushMatrix()とpopMatrix()、3Dのアニメーション]]> http://yoppa.jpn.org/presen.php?itemid=197 pushMatrix()とpopMatrix()は座標移動の際(rotateやtranslateなど)に組み合わせて使用されます。普通translateやrotateなどで座標を変換すると、それ以降に描かれる図形すべてにその変換が適用されます。繰り返し移動をしていくとその変換はどんどん蓄積されていくわけです。

それに対して、pushMatrix()命令を用いたあとに座標を変換し図形を描いた後にpopMatrix()命令をすると、pushMatrix命令をした際の座標に復元されます。つまり座標変換が蓄積されていきません。

より厳密にpushMatrix()とpopMatrix()を定義すると、「pushMatrix() 機能は、今の座標をスタックに保存して、popMatrix()は前の座標を復元する」と捉えることができます。

pushMatrix()とpopMatrix()を使用した移動と、そうでない移動を比較

pushMatrix()とpopMatrix()無しの場合

float angle1 = radians(30);
float angle2 = radians(60);

void setup() {
  size(200,200);
  framerate(30);
}

void draw() {
  background(0);
  stroke(255);
  translate(width/2,height/2);
  rotate(angle1);
  line(0,0,0,-width/2);
  rotate(angle2);
  line(0,0,0,-width/2);
  angle1 +=  radians(1);
  angle2 +=  radians(1);
}

pushMatrix()とpopMatrix()有りの場合

float angle1 = radians(30);
float angle2 = radians(60);

void setup() {
  size(200,200);
  framerate(30);
}

void draw() {
  background(0);
  stroke(255);
  translate(width/2,height/2);
  pushMatrix();
  rotate(angle1);
  line(0,0,0,-width/2);
  popMatrix();
  rotate(angle2);
  line(0,0,0,-width/2);
  angle1 +=  radians(1);
  angle2 +=  radians(1);
}

移動を反復する

pushMatrix()とpopMatrix()無しの場合

float angle1 = radians(30);
float angle2 = radians(60);
float offset = radians(10);
int i;

void setup() {
  size(200,200);
  framerate(30);
}

void draw() {
  background(0);
  stroke(255);
  translate(width/2,height/2);
  for(i=0; i<36; i++){
    rotate(angle1+offset*i);
    line(0,0,0,-width*0.4);
  }
  angle1 += radians(0.1);
}

pushMatrix()とpopMatrix()有りの場合

float angle1 = radians(30);
float angle2 = radians(60);
float offset = radians(10);
int i;

void setup() {
  size(200,200);
  framerate(30);
}

void draw() {
  background(0);
  stroke(255);
  translate(width/2,height/2);
  for(i=0; i<36; i++){
    pushMatrix();
    rotate(angle1+offset*i);
    line(0,0,0,-width*0.4);
    popMatrix();
  }
  angle1 += radians(0.5);
}

3D座標をpushMatrix()＆popMatrix()

float a;                          
float offset = PI/24;             
int num = 12;
                  
void setup() 
{ 
  size(320, 240, P3D);
  noStroke();  
  framerate(30);
  fill(128,128,255,64);
  lights();
} 

void draw() 
{     
  background(0, 0, 26);
  translate(width/2, height/2, -20);
  a+=0.01;
  if(a >= TWO_PI*2) { 
    a = 0.0; 
  }    
  for(int i=0; i<num; i++) {
    pushMatrix();
    rotateY(a*3+offset*i);
    rotateX(a*2+offset*i);
    translate(0,20);
    box(width/3);
    popMatrix();
  }
}

3D座標をposh()＆popMatrix() + カラーグラデーション

float a; 
float offset = PI/24;
int num = 12;
color[] colors = new color[num];
color safecolor;

void setup() 
{ 
  size(320, 240, P3D);
  noStroke();  
  framerate(30);
  for(int i=0; i<num; i++) {
    colors[i] = color(255 * (i+1)/num, 255 * (num-i)/num, 128);
  }
  lights();
} 

void draw() 
{     
  background(0, 0, 26);

  translate(width/2, height/2, -20);
  a+=0.04;
  if(a >= TWO_PI*2) { 
    a = 0.0; 
  }    
  for(int i=0; i<num; i++) {
    pushMatrix();
    fill(colors[i]);
    rotateY(a+offset*i);
    rotateX(a/2+offset*i);
    rotateZ(a+offset*i);
    box(width/3);
    popMatrix();
  }
}

3D座標をposh()＆popMatrix()：応用

float angle1 = radians(30);
float offset = radians(8);
int i, j, num = 20;
color[][] colors = new color[num+1][num+1];

void setup() {
  size(480,480,P3D);
  framerate(30);
  noStroke();
  lights();
  for(int i=0; i<num+1; i++) { 
    for(int j=0; j<num+1; j++) { 
      colors[i][j] = color(255 * (i+1)/num, 128, 255 * (j+1)/num, 200); 
    } 
  }
}
void draw() {
  background(0);

  for(i=0; i<num+1; i++){
    for(j=0; j<num+1; j++){
      pushMatrix();
      translate(width/num*i,height/num*j,0);
      fill(colors[i][j]);   
      rotateX(angle1*0.5+offset*i);
      rotateY(angle1*0.7+offset*i);
      rect(0,0,(width/num)*0.8,(height/num)*0.8);
      popMatrix();
    }
  }
  angle1 += radians(1);
}
]]> General http://yoppa.jpn.org/presen.php?itemid=197 Mon, 14 Nov 2005 08:23:42 +0900 <![CDATA[第4回：Processing入門(3)：配列、ループ、3D導入]]> http://yoppa.jpn.org/presen.php?itemid=186 今日の講義は、データの集合を扱うためのデータ構造である「配列」について学びます。また、いままでは平面(2D)の中での表現でしたが、さらに奥行を加えた3Dの表現について学びます。

配列を使う

配列(array)とは？

配列（はいれつ、Array）は、プログラミング言語の用語。 データ構造の一つ。 配列はデータの集合であり、添え字でインデックスされたものを指す。 古典的言語では、同じデータ型の集合だが、モダンなプログラミング言語では異なった型も許す。(wikipedia「配列」より抜粋)

わかりやすく表現すると、「情報を番号で整理したロッカー」のようなもの。

配列のイメージ：6つのint型データの箱(= データを格納する領域)を作成している

配列を何故使うのか？

プログラムで似たような構造や情報の型をもったデータを複数必要なケースに多く遭遇する。例えば、ボールがバウンドするプログラムを作成する場合、１つのボールであれば、今までのように個別に変数を指定すればよい。しかし、いくつものボールが同時に画面内でバウンドするプログラムを作成しようと思うと、全てに個別にパラメータを指定するのは大変になる。こうした際に、配列(Array)は活躍する。配列を使うことで似たようなタイプの変数をまとめて保存しておくことが可能となる。

Processingでの配列の生成、値の参照

初期化(最初に配列の領域を宣言する)

配列の型[] 配列の名前 = new 配列の型[配列の数];

(例) int number[] = new int[100];

配列の値の参照

配列の名前[番号];

(例) number[10] = 1;

配列のサンプル1

//箱の数を指定
int num = 8;
//箱の幅
int cellsize;

//箱のx座標のためのint型の配列(x[0],x[1],x[2]...)を箱の数だけ作成
int[] x = new int[num];

void setup() {
    size(200,200);
    noStroke();
    cellsize = width/num;
    //箱のx座標を計算
    for (int i = 0; i < num; i++) {
	x[i] = int(width/num*i);
    }
}

void draw() {
    background(64);
    for (int i = 0; i < num; i++) {
	fill(i*(255/num));
	rect(x[i],75,cellsize,50);
    }
}

配列(2)：2次元配列

2次元配列とは、縦横の2次元で配列を考えるものです。イメージ的には表のようなものだと考えられます。

2次元配列のイメージ：6 x 3のint型データの表を作成している

2次元配列を用いた表現

int num = 10;
int cellsize;

int[] x = new int[num];
int[] y = new int[num];

void setup() {
    size(200,200);
    stroke(128);
    cellsize = width / num;
    for (int i = 0; i < num; i++) {
	x[i] = int(width/num*i);
	y[i] = int(height/num*i);
    }
}

void draw() {
    background(64);
    for (int i = 0; i < num; i++) {
	for (int j = 0; j < num; j++) {
	    fill(i*(255/num), j*(255/num), 128);
	    rect(x[i],y[j],cellsize,cellsize);
	}
    }
}

配列を用いて、複数の物体を同時にアニメーションさせる

int MAX = 20;
int[] xspeed = new int[MAX];
int[] yspeed = new int[MAX];
int[] x = new int[MAX];
int[] y = new int[MAX];
int[] r = new int[MAX];

void setup() {
    size(200,200);
    framerate(30);
    smooth();
    noStroke();   
    fill(64,64,255,100);  
    //initialize all arrays
    for (int i = 0; i < MAX; i++) {
        xspeed[i] = int(random(-4,4));
        yspeed[i] = int(random(-4,4));
        x[i] = int(random(width));
        y[i] = int(random(height));
        r[i] = int(random(10,40));
    }
}

void draw() {
    background(32);
    for (int i = 0; i < MAX; i++) {
        ellipse(x[i],y[i],r[i],r[i]);               
        x[i] = x[i] + xspeed[i];
        y[i] = y[i] + yspeed[i];
        if ((x[i] > width) || (x[i] < 0)) {
            xspeed[i] = xspeed[i] * -1;
        }
        if ((y[i] > height) || (y[i] < 0)) {
            yspeed[i] = yspeed[i] * -1;
        }
    }
}

配列を用いて、複数の物体を同時にアニメーションさせる(2)

int MAX = 20;
int[] xspeed = new int[MAX];
int[] x = new int[MAX];
int[] w = new int[MAX];
color[] col = new color[MAX];
void setup() {
    size(200,200);
    noStroke();
    framerate(30);
    //initialize all arrays
    for (int i = 0; i < MAX; i++) {
        xspeed[i] = int(random(-4,4));
        w[i] = int(random(width/4,width));
        x[i] = int(random(-w[i],width));
        col[i] = color(random(255),random(255),random(255),50);
    }
}
void draw() {
    background(0);                 
    for (int i = 0; i < MAX; i++) {
        fill(col[i]);  
        rect(x[i],0,w[i],height);               
        x[i] = x[i] + xspeed[i];
        if ((x[i] > width) || (x[i]+w[i] < 0)) {
            xspeed[i] = xspeed[i] * -1;
        }
    }
}

3Dの描画イントロダクション

3次元空間の座標

奥行を表現する座標軸zが加わる。

先週の復習、2D形状の回転と移動

float i = 0.0;

void setup() {
    size(200,200);
    framerate(30);
    smooth();
    stroke(128);
    fill(98);
    rectMode(CENTER); 
}
void draw() {
    background(32);
    translate(width/2,height/2);
    rotate(i);
    rect(0,0,width/2,height/2);
    i += 0.05;
}
  • rectMode関数で四角形の中心を描画の原点に
  • translate関数で中央に移動
  • rotate関数で回転

3D座標軸での移動

float i=0.0, z=0.0;

void setup() {
    size(200,200,P3D);
    framerate(30);
    stroke(128);
    fill(98);
    rectMode(CENTER); 
}
void draw() {
    background(32);
    z = 80*sin(i);
    translate(width/2,height/2,z);
    rect(0,0,width/2,height/2);
    i += 0.1;
}

3D座標軸での回転

float z=0.0, i = 0.0;

void setup() {
    size(200,200,P3D);
    framerate(30);
    stroke(128);
    fill(98);
    rectMode(CENTER);
}

void draw() {
    background(32);
    float z = sin(i)*80.0;
    translate(width/2,height/2,z);
    rotateX(i);
    rotateY(i*1.5);
    rect(0,0,width/2,height/2);
    i += 0.1;
}

3D図形の描画

float xspeed,yspeed,zspeed;
float x,y,z,r;
float theta;
void setup() {
    size(200,200,P3D);
    framerate(30);
    xspeed = 3.0; yspeed = 1.0; zspeed = 3.0;
    x = width/2.0; y = height/2.0; z = 0.0;
    r = 100.0;
    theta = 0.0;
    stroke(255,255,255,50);
    fill(64,64,255,50);
    lights(); 
    translate(x,y,z);
}
void draw() {
    background(32);
    translate(x,y,z);
    rotateX(theta);
    rotateY(theta*1.5);
    box(r);
    x = x + xspeed;
    y = y + yspeed;
    z = z + zspeed;
    theta += 0.01;
    if ((x > width) || (x < 0)) {
        xspeed = xspeed * -1.0;
    }
    if ((y > height) || (y < 0)) {
        yspeed = yspeed * -1.0;
    }
    if ((z > 10) || (z < -100)) {
        zspeed = zspeed * -1.0;
    }
}
]]> General http://yoppa.jpn.org/presen.php?itemid=186 Sun, 30 Oct 2005 18:01:05 +0900 <![CDATA[第３回：Processing入門（２）：アニメーションを作る]]> http://yoppa.jpn.org/presen.php?itemid=178 アニメーションを作る

前回のProcessing入門では、Processingを用いて簡単な図形を表示する方法について学びました。今日はさらに発展させて、これらの図形をアニメーションさせる方法について学びます。

直線を動かす(1)

int x = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  x=x+1;
}

アニメーションをProcessingで作成するには、setup()関数と、loop()関数を連携させます。

  • setup()：プログラムが開始されたとき一度だけ実行される機能です。loop()関数が実行され、スクリーンにイメージが描かれる前に、例えば、スクリーンの大きさや、背景色、ロードするイメージなど、初期の環境の属性を決定するために使われます。setup()内に宣言された変数はloop()の中ではアクセスできません。
  • draw()：プログラムが終了するか、noLoop()関数が呼ばれるまでは、プログラムを実行し続ける。redraw()関数が呼ばれると、(止まっていた)描画を1回行う。また、loop()関数が呼ばれると、繰り返し実行を再開する。
  • framerate()：アニメーションの再生スピードを設定する。

直線を生成する際に用いられている、"height"という変数は、画面のy方向の大きさ(pixel)が予め代入された予約語です。画面の幅を得たい場合には、"width"を指定します。

直線を動かす(2)

先程の例では、移動する直線が画面の端を越えて、永久に右方向への移動を実行を繰り返していました。このプログラムを線が画面からはみ出したら、また原点に戻って実行をするように改良してみましょう。

int x = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  x=x+1;
  if(x > width){
    x = 0;
  }
}

if文で条件分岐させて、もし、x座標の位置が画面の幅"width"よりも大きくなったら(つまり線が画面の右からはみ出したら)、x座標を0に初期化(つまり左端へ移動)しています。

直線を動かす(3)

さらにプログラムを拡張して、縦横二つの線が同時に上下左右に動くようにしてみます。

int x = 0, y = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  line(0, y, width, y);
  x=x+2;
  y=y+3;
  if(x > width){
    x = 0;
  }
  if(y > height){
    y = 0;
  }
}

アニメーションのスタート、ストップ

アニメーションの停止・再開は、noLoop()関数、loop()関数を用いて、コントロールすることができる。

  • noLoop()：draw()で設定された、再生中のアニメーションを停止する
  • loop()：noLoop()で停止中のアニメーションをを再開する
int x = 0, y = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
  noLoop();
}
void draw( ){
  background(51);
  line(x, 0, x, height);
  line(0, y, width, y);
  x=x+2;
  y=y+3;
  if(x > width){
    x = 0;
  }
  if(y > height){
    y = 0;
  }
}
void mousePressed(){
  loop();
}
void mouseReleased() {
  noLoop();
}

インタラクション(1)：キーボードによるインタラクション

キーボードの入力に応じて、線の位置が変化するようにしてみます。

int x, y;

void setup( ){
    size(200,200);
    stroke(128);
    framerate(30);
    x = width/2;
    y = height/2;
}
void draw( ){
    background(51);
    line(x, 0, x, height);
    line(0, y, width, y);
    if(keyPressed) { 
      if(keyCode == RIGHT){
        x += 1;
      }else if(keyCode == LEFT){
        x -= 1;
      }else if(keyCode == DOWN){
        y += 1;
      }else if(keyCode == UP){
        y -= 1;
      }
    }
}

キーボード上の矢印キー(→、↑、←、↓)を押すと、線の交差位置が上下左右に動きます。

"if(keyPressed)"関数は、キーが押されているときに実行されます。この例では、キーが押されると、その押されたキーの種類を判定して、線の座標を変化させています。

インタラクション(2)：マウスによるインタラクション

次に、マウスによる簡単なインタラクションを試してみます。マウスポインタに線の交差が重なるように、2つの直線が移動します。

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(mouseX, 0, mouseX, height);
  line(0, mouseY, width, mouseY);
}

マウスの位置を検出するには、"mouseX"と"mouseY"という2つの予約語を使います。それぞれマウスポインタのX軸座標とY軸の座標が格納されています。

]]> General http://yoppa.jpn.org/presen.php?itemid=178 Sun, 23 Oct 2005 20:24:42 +0900 <![CDATA[第２回：Processing入門]]> http://yoppa.jpn.org/presen.php?itemid=169 今日の講義では、MITのBenFryとCaseyReasによってつくられた電子メディアを素材とし、視覚デザインを行うためのプログラミング言語と開発環境である、Processingを学びます。

Processingとは何か

Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to commercial software tools in the same domain.

意訳：Processingは、イメージやアニメーションそしてサウンドのプログラミングをしたいと思っている人々のためのオープンソースのプログラミンング言語であり開発環境です。アーティスト、デザイナー、建築家、研究者、そして趣味として使う人が、プロトタイピングや制作のために使うものです。ビジュアルな文脈でコンピュータプログラミングの基礎を教えるため、そしてソフトウェアのスケッチブックとして、またはプロフェッショナルのための制作ツールとして作られています。Processingは、アーティスト達やデザイナー達によって、おなじ分野の商業ソフトウェアへの代替手段として開発されています。

(Processing.orgトップページより)

Processingの特徴

  • JavaやC++でプログラミングするよりも遥かに容易に、スケッチするようにインタラクティブなビジュアル・プログラミングを構築できる
  • スレッド、ダブルバッファリングなど、初級者にとってハードルとなる技術的な詳細を外し、アイデアの実現に専念できる
  • 独自のシンタックスで書かれたプログラムをJavaコードに解析する。コードは実行可能なJavaアプッレットとして書き出すことが可能
  • PostScript、OpenGLの機能セットを利用した、カスタム2D/3Dレンダリングエンジンを使用
  • 既存のJavaライブラリを統合することで容易に拡張が可能
  • 無料で利用できる
  • Windows、MacOSX、Linuxで実行可能

Processingをインストールする

processing.jpのサイトを参考にして、WindowsにProcessingをインストールしてみましょう。

WindowsにProcessingをインストール(Processing.jp)

プロセッシングを使ってみる

インターフェイスの使いかた

fig1105_01.gif

Processing環境は、プログラムを表示させる統合されたテキストエディターと、ディスプレーウィンドウから構成されている。実行 "run"ボタンが押されると、プログラムはコンパイルされ、グラフィックウィンドウが立ち上がる。メインの環境ウインドウから、実行、停止、セーブ、開く、そしてファイルのエキスポートが可能である。

  • 実行(play)ボタン：DirectorやFlashと同様にプログラムを実行する際に使用。
  • 停止(stop)ボタン：はDirectorやFlashと同様にプログラムを停止する際に使用。
  • 新規作成(new)ボタン：新しいファイルのことをProcessingではスケッチと呼ぶ。 (他にもアプレット、プログラム、インタラクティブ素材と呼ばれることもある) 一方DirectorやFlashではこれをムービー(movies)と呼ぶ。
  • 読込み(Opens)ボタン：スケッチを読込む際ポップメニューが横に表示されるため、そこから保存された作品を選択 する。また、あらかじめ登録されている例を読込み表示させ、プログラム や動作を勉強することも可能である。
  • 保存(Saves)ボタン：インターフェイス上に表示しているスケッチに名前をつけて保存する際に使用。 (別名で保存したい場合はファイルメニューより''save As''を選択)
  • 出力(Exports)ボタン：表示されているスケッチをJAVAアプレットとして出力する。 またその際にJAVAアプレットを表示するために必要な最低限のHTMLタグを書き出す。

File > Open > Example　メニューからサンプルのプログラムを選び、実行してみる。

Processingプログラミング入門(1)：プログラミングの文法

サンプル1：コメント

To view this content, you need to install Java from java.com

以下のサンプルはコメントアウトの方法を示しています。

// コメント
    
// 二重のスラッシュは、コメントを意味します
// それ以降の1行が、すべてコメントと見なされます
// スラッシュの間にはスペースを入れてはいけません
// もし複数行に渡るコメントを書きたい場合には
// 次のような書式のほうがよいでしょう
    
/* 
スラッシュとアスタリスクで始まり
アスタリスクとスラッシュで終るのが
複数行にわたるコメントです
*/ 
    
// コメントアウトされていないテキストは全て、コンパイルされます。
// 例えば、以下の行は、コメントアウトされていないので、
// プログラムが実行されます。

size(200, 200);

サンプル2：関数

To view this content, you need to install Java from java.com

関数を使用することで、画面上に色や演算する数字を指定した、基本図形を書き出すことができます。関数の括弧()の間にある、数字やそのほかのデータは、関数に影響するパラメータです。沢山のパラメータを持つ関数もあれば、パラメータをもたない関数もあります。

// 関数
    
// size関数は2つのパラメータを持ちます
//1つ目は生成するウィンドウの幅、2つ目は幅です
size(200, 200); 
    
// background関数は1つのパラメータを持ちます
//0(黒)から255(白)までの範囲で、グレースケールの明度を指定します
background(102);

サンプル3：命令文

To view this content, you need to install Java from java.com

プログラミングを作文に例えるなら、命令文(Statements)は、文に相当するものです。命令文は単純な命令を表現したもので、文章における句読点と同様に、命令の終端記号としてセミコロン(;)で終了します。文章において色々な文が存在するように、命令文もさまざまな種類があります。変数の宣言や、変数への値の割り当て、関数の実行、オブジェクトの生成など多岐にわたります。プログラムに際しては、全ての命令文がセミコロン(;)で終るよう気をつけること。

Processingのプログラムは、大文字と小文字を区別します。例えば、size関数を"Size"と記述したばあい、プログラムはエラーを返します。

また、Processingのプログラミング言語は、半角スペースはなにも無いものとして無視します。ただし全角スペースは、エラーの原因となるので注意しましょう。

// 命令文

// Size関数を実行
size(200, 200);

// 新たに、変数"x"を定義
int x;
// 変数"x"に、値"102"を代入
x = 102;

// background関数を実行
background(x);

サンプル4：テキストエリア

ディスプレイに図形を表示するだけでなく、テキストエリアにテキストを記述することが可能です。これは、プログラミングする際に、データをモニタリングしてバグを発見する際に重要となる機能です。またプログラムにエラーがあるときには、このテキストエリアにエラーが表示されます。

// テキストエリア
size(200, 200);
background(51);

// print関数は改行せずにテキストを書きだす
print("One");
print("Two");

// println関数は末尾で改行する
println("Three");
println("Four");
println("Five");

Processingプログラミング入門(2)：静的な2D図形を描画してみる

サンプル1：(x,y)座標上に点を配置

To view this content, you need to install Java from java.com 
//キャンバスの大きさ設定
size(200,100);
//背景色設定(R,G,B)
background(0,0,0);

//描画色設定(R,G,B)
stroke(255,0,0);
//先程指定した描画色で、座標に点を描く
point(50,100);
    
//２つ目の点
stroke(0,255,0);
point(100,100);

//３つ目の点
stroke(0,0,255);
point(150,100);

サンプル2：直線を引く

To view this content, you need to install Java from java.com 
//キャンバスの大きさ設定
size(200,200);
//背景色設定(R,G,B)
background(0,0,0);

//一つ目の線の色(R,G,B)
stroke(255,255,255);

//一つ目の線の座標
//line(x1, y1, x2, y2); 
//始点：(x1, y1)、 終点：(x2, y2)
line(0,0,60,60);
    
//二つ目の線
stroke(255,255,0);
line(40,50,190,200);

サンプル3：プリミティブな図形の生成

To view this content, you need to install Java from java.com 
size(200,200);
background(128);

//描画する図形の塗り潰す色を設定
fill(#CC6600);

//描画する図形の線の色を設定
stroke(#FFFFFF);  

//長方形の描画
// rect(x, y, width,  height);
rect(40,40,140,140);
    
//楕円の描画
// ellipse(x, y,  width, height);
ellipse(80,80,80,120);

//三角形の描画
// triangle(x1, y1,  x2, y2, x3,  y3);
triangle(12,180, 120,15, 160,60);

サンプル3：プリミティブな図形の生成(2)

To view this content, you need to install Java from java.com 
size(200,200);
background(128);

//塗り潰しなし
noFill();

//描画する図形の線の色を設定
stroke(#FFFFFF);  

//長方形の描画
// rect(x, y, width,  height);
rect(40,40,140,140);
   
//楕円の描画
// ellipse(x, y,  width, height);
ellipse(80,80,80,120);

//三角形の描画
// triangle(x1, y1,  x2, y2, x3,  y3);
triangle(12,180, 120,15, 160,60);

Processingプログラミング入門(3)：ランダムと繰り返し

ランダムにたくさん線を引く

To view this content, you need to install Java from java.com 
int i, w, h;
w = 400;
h = 400;

size(w,h);
background(64);

//0〜2000まで、2000回命令をくりかえす
for(i=0; i<2000; i++){
    
    //ランダムに色を生成
    stroke(random(255),random(255),random(255));

    //画面内でランダムな始点と終点を線で繋ぐ
    line(random(w),random(h),random(w),random(h));
}

ランダムにたくさん線を引く(2)：アルファチャンネルを付加

To view this content, you need to install Java from java.com 
int i, w, h;
color cl;
w = 400;
h = 400;
    
size(400,400);
background(0);

for(i=0; i<4000; i++){
    cl = color(random(255),random(255),random(255),25);
    stroke(cl);
    line(random(w),random(h),random(w),random(h));
}

ランダムに円を配置

To view this content, you need to install Java from java.com 
int i, w, h, r;
color cl;

w = 400;
h = 400;

size(w,h);
background(0);
noStroke(); 

for(i=0; i<400; i++){
    cl = color(random(255),random(255),random(255),12);
    fill(cl);
    r = int(random(120)); 
    ellipse(random(h), random(w), r, r);
}

一定間隔に線を引く

To view this content, you need to install Java from java.com 
int i, w, h, step, c;
color cl;

w = 400;
h = 400;
step = 4;
    
size(w,h);
background(0);

for(i=0; i<w/step; i++){
    cl = color(255/(w/step)*i, 64, 255-255/(w/step)*i, 50);
    stroke(cl);
    line(0,i*step,i*step,h);
    line(w,i*step,i*step,0);
}
]]> General http://yoppa.jpn.org/presen.php?itemid=169 Sun, 16 Oct 2005 18:00:43 +0900 <![CDATA[第１回：ガイダンス]]> http://yoppa.jpn.org/presen.php?itemid=157 第１回の講義は、この授業について説明します。授業内容を聞いて履修するのか否かを決めてください。

自己紹介

田所　淳（たどころ　あつし）

1972年千葉県生まれ。昨年度より、千葉商科大学商経学部非常勤講師。本年度より政策情報学部非常勤講師、政策情報学研究科客員講師。

普段の仕事、Webデザイナー、プログラマー。（たまにミュージシャン?）。

e-mail:tado@cuc.ac.jp

Web関係の最近の主な仕事

履修にあたっての注意

成績について

以下のように、出席と履修態度、中間課題成績、最終課題成績の3つの要素を総合的に評価します。きちんと出席して、課題を両方とも提出すれば、落第することは、まず無いと思います。

  • 出席、履修態度:30%
  • 中間課題:30%
  • 最終課題:40%

教科書

ありません。

参考となる図書、URL、DVDなどは授業のなかで適宜紹介します。

この講義のねらい

この講義の科目名は、コミュニケーション研究I（プレゼンテーション法）です。

この講義タイトルの通り、パワーポイントに代表されるような、コンピュータを用いたスライド方式のプレゼンテーションの方法を学ぶのかというと、そうではありません。もちろんこうしたプレゼンテーションの技術も大事なことですが、この講義ではより高度な表現を目指します。

講義の前半は、MacroMedia Flashを用いて、インタラクティブなデザインを基礎から学んでいきたいと思います。まず、簡単なアニメーションの製作方法をとおして、時間軸のなかで、いかに効果的な表現をするかを学びます。次に、スクリプトをもちいて、独自のインターフェイスを製作する方法まで発展させる予定です。

講義の後半では、Javaをベースにしたインタラクティブな画像を生成するプログラム環境である、Processingをとおして、アルゴリズムを視覚化し、インタラクティブなアニメーションとして表現する方法を学んでいきたいと思います。

参考資料

従来のWWWの枠をはみ出して、Webならではの新しい美学を探究しているサイトをいくつか紹介します。

  • dextro:オーストリアのグラフィックアーティストdextroによるサイト。マウスインタラクションでジェネラティブ(生成的)に形態が変化していく。
  • 中村勇吾：日本を代表する、Webサイトクリエイター
  • Levitated:Jared Tarbellらによる、すばらしくきれいなFlashの実験。ソースのダウンロード可能。
  • Complexification | Gallery of Computation:同じくJared Tarbellによる、ジェネラティブなグラフィック表現の実験。
  • pitaru:ドローイングによる楽器や、手書きアニメ風のFlashなど。
  • ジョン前田:インタラクティブなグラフィックデザインのパイオニアの一人。

blogについて

この講義では、Weblogを活用して情報が双方向にやりとりされるよう、実験してみたいと思います。 Weblogとは「日記」のように日々更新されるWebサイトやそのシステムのことです。(参考：IT用語辞典)。 このシステムを使うことで、ページごとにコメントを書き込んだり、トラックパッド(リンク先からリンク元で「リンクしたよ」というのを伝える仕組み)を貼ったりすることが可能になります。いま読んでいるページもblogで作成されています。

わからない点があれば、授業中に積極的に質問してほしいのですが、聞きづらい質問や、家に帰ってから疑問に思ったことなどは、それぞれのページに自由にコメントしてください。可能なかぎり返答していきたいと考えています。

]]> General http://yoppa.jpn.org/presen.php?itemid=157 Sun, 2 Oct 2005 18:25:20 +0900 <![CDATA[この講義について]]> http://yoppa.jpn.org/presen.php?itemid=156 講義概要
  • 千葉商科大学政策情報学研究科
  • 秋学期
  • 授業科目：コミュニケーション特殊研究 I（プレゼンテーション法）
  • 担当者名：田所 淳

講義内容

本講義は、情報伝達の有効かつ説得的なプレゼンテーション手法の活用と、メッセージ内容の表現法によって、いかに対象者の感心をつかむことをできるか、を実践的かつ実験的に研究する。

一般的に、プレゼンテーション手法といって思い浮かぶものは、PCのプレゼンテーション・ツールを利用した文章の箇条書き（及びそれを補足する図）をスライド方式で切り替えていくものであろう。もちろん、こうした伝統的なプレゼンテーション方法が有効な場合もある。しかしながら、より複雑な事象、抽象的な概念、動的な情報を扱おうとするとき、より高次の表現スキルが求められる。

本講義では、コンピュータを「素材」として用い、「アルゴリズム」や「インターフェイス」といった概念をキーワードに、デジタル技術による新しい表現方法を実践的に学ぶことを目指す。具体的に用いるソフトウェアとしては、Macromedia FlashとJavaを用いたインタラクティブデザインの開発環境であるProcessingを予定している。一方的に講義を受けるだけでなく、実際に課題を制作し互いの作品を論評し合うことで、実践的な知識、技術の習得を目指す。

講義ノート

評価方法

課題提出内容、履修態度などを総合的に評価する。

教科書

なし。

参考文献

講義の中で随時紹介する。

]]> about http://yoppa.jpn.org/presen.php?itemid=156 Sun, 2 Oct 2005 18:21:16 +0900