Programming Interactivity

『Programming Interactivity: A Designer's Guide to Processing, Arduino, and Openframeworks』とかいう本があるらしい。

ちょっとこれ本気で欲しいな...

買おうかな。それとも、日本語版が出るのを待つか。

ちなみに、内容は以下のような感じです。

京大行ってきた

朝5時に起きて、京都へ。

京大行ってきた。

なんか政経の宿題で出したやつが書類審査通過してしまったので、プレゼンしてきた。

テクノ愛'09というビジネスアイデアコンテストみたいなものです。

スライドとか、資料とか、なんとか間に合わせて、いざプレゼン。

で、僕のプレゼンは結構微妙になってしまった。圧倒的に練習量が足りんかったなぁと反省。結構焦ってしまって、うまくできなかった（笑）

時間が足りなかったし、最初の方少し早口になってしまったし。次もしプレゼンする機会があれば、もう少しちゃんと準備・練習して臨まないといけないなぁと痛感した。前も同じこと言ってたような気がするけど。

そんな僕に比べると、他の組は結構凄かった。みんな気合いが違うなと。これって結構マジなコンテストだったんだ、と知った（笑）

かなり練習してる感じだし、何より内容の厚みが違う。厚みっていうか、みんな実験したり、実際に作ったりしてて、内容にかける手間や時間というのが全然違う。グランプリのところなんかはもう実現可能な段階に達してるし。

ただ負け惜しみを一つ言えば、僕のスライドが一番カッコよくできてた思う（笑）

これだけは譲れない（笑）

プレゼン見てて思ったことだけど、質疑応答はめちゃくちゃ意地悪だった。高校生相手にエグい質問するなぁと。幸運なことに、僕の時はそこまでエグい質問されなかったんでラッキー（笑）

結果はもちろん「入賞」。グランプリ、準グランプリ、財団法人近畿地方発明センター賞、とあって、この「入賞」は悪く言えば残りもんです。

9/300に選ばれただけでもスゴイんだよ！と、そういう賞ですね。

そういうわけで、楯は全員に。表彰状も。

副賞は、図書券1万円分。

え！？いや、ちょっと待った！（笑）

てっきり1万円分一枚だと思ってたよ！まさか1,000円×10枚だとは思わなかったw

道理で封筒が分厚かったわけだ。

あ、あと、京大は11月祭とか言って学祭の最中でした〜

京大めっちゃ広くて人もいっぱい来てたけど、特にコレといって見たいのは無かった（笑）

なので学祭の方はあんまり見てない

まとめ：

懇親会とか結構楽しかったし、結果はともかく今日は良い経験になったと思う。

学生CGコンテストに入賞しました

第15回学生CGコンテスト静止画部門奨励賞に入賞しました！
嬉しい限りです。
前に、ノミネートされたよ！と書きましたが、それです。
今日まで口外するな、と言われていましたが、今日になったので口外します（笑）

審査講評によると僕の作品は、

鳥の持ついろいろな要素を大胆な構成で描いた作品。美しさだけではなく、「空想」というタイトルがもつ不思議な印象が感じられる。鳥類の持つ不気味さを感じられる作品になっている。

だそうです。

にしてもよく通ったな…良かった良かった。
来年からはちゃんと納得できる作品を作って、より上の賞を目指したいと思います。できたらインタラクティブ部門に挑戦してみたいなぁと。

ところで、静止画部門の最優秀賞は僕と同じ学年（高２）の人じゃないすか！
ホームページでは作品の画像が小さくてどんな絵なのかよく分かんないけど、凄い！やるなぁ・・・
負けてらんねぇぜ！！！（笑）

ベタなポスター

Photoshop召喚。なんかベタなテクニックばっか使った。面倒だったし。

でもそれなりにキレイにできたのでは？

これに決まるのかどうかは知らない。

学生CGコンテスト最終ノミネート作品発表！

本当は一昨日書こうと思ってたけどすっかり忘れてました。

8/30に書いた『空想』というエントリに載せた絵が、学生CGコンテスト静止画部門最終ノメネート作品に選ばれました。やったね！

ノミネートされたっていう事実は10月の中旬ころには分かっていたのですが、他の作品がどんなものかは今回の発表で初めて知りました。
小さいサムネイルしかないので詳しくは見れませんが、なかなか凄い作品もありそうです。

高校生は・・・パッと見たところ僕を入れて2人ですか。

自分ではあんまり納得がいってない作品なんですが、評価して頂いたことは嬉しい限りです。イチかバチかでも送ってみて良かったです（笑）

次からはちゃんと力を入れて納得できる作品を作りたいです。
インタラクティブ部門とか面白そうだし。早めに何か考えとこうかな。

「だまし絵展」見に行ってきました！

兵庫県立美術館にて開催されている「だまし絵 アンチンボルドからマグリット、ダリ、エッシャーへ」を見に行ってきました。

いやー、面白かった！
入場するとまず、上の画像のような野菜おじさんが迎えてくれます。（解説によるとモデルは神聖ローマ皇帝ルドルフ2世だそうです。）

はじめの方は「だまし絵」というよりは「リアル絵」という感じの絵が多かったのですが、進んでいくとどんどんと面白い「だまし絵」にいっぱい出会えました。最後のスペースではエッシャーやダリ、マグリットの絵があり、見たことのある絵が何点か飾られていました。やっぱり、いつ見てもエッシャーの絵は魅力的です。

このエキシビジョンで特に感動したというか興奮したというか、とにかく「え!?すげー!!!」と思ったのはやはりパトリック・ヒューズの『水の都』です。
逆遠近錯視を用いた作品（このドラゴンが有名ですが）で、出っ張っているところが向こうにあるように見え、動きながら見ると不思議な立体感を感じることができます。

以前テレビで見たことがあるのですが、やはり実物を見ると感動が違います。周りの観客の皆も体を左右に上下にクネクネ動かしてこの絵(?)の不思議を体験し驚いてました（ここが一番賑わってました）。

実に楽しかった！

素人がデザインする際に注意すべき7つのポイント

パソコンで気軽に簡単にデザインできるようになった今、チラシやポスター、パンフレット、プリントなどは自分で作るという人は少なくないと思います。

自分たちで作れば基本的にタダなので経費節約のために自分らで作るというのは大いに結構だと思います。いちいち全部プロに頼んでいたらいくらお金があっても足りないでしょうから。

しかし、そうやって作られたデザインのほとんどは、控えめに言って「クソダサい」です。
万人に美的センスがあるわけでも、デザイン知識やスキルがあるわけでもないのでこれもまたしょうがないことなのかも知れません。
でもそういうダサいデザインでさえ、少しの知識を適用するだけでだいぶマシにはなるのです。

以下の7つのポイントをしっかり理解しておけば少なくともダサくは見えなくなるでしょう。

1. デザインを甘く見てはいけない
2. 伝えたいことをはっきりさせる
3. 「解像度」を理解せずに画像を貼るな
4. 使うフォントはよく考えろ
5. 無駄な装飾は逆効果
6. 色の組み合わせはよく考えろ
7. 余白は無駄ではない

LeopardにTeXを入れる時の覚え書き

TeXを入れてみたけど、ことごとくエラーに遭遇したので解決法を覚え書きしとく。

以前、『LaTeX2e美文書作成入門』という本を買いました。
買っただけでそれ以来全然読んでさえいなかったのですが、今日宿題のレポートを書くのにTeXを使ってみようと思い、この本に付属のCDからTeX関連の色々なものを入れてみたわけです。

本に書いてある通りに設定していき、TeXShopのエディットエリアに

¥documentclass{jsarticle}
¥begin{document}
こんにちは, ¥TeX !
¥[ ¥int dx = x + C. ¥]
¥end{document}

とか打ってみて、「タイプセット」をクリック。
この時は綺麗な文章が簡単に出てくるんだろうと淡い期待を抱いていました。
でも、現実はそんなに甘くなかったんです。
以下、僕の淡い期待を見事に粉砕してくれた3つのエラー。

! LaTeX Error: File `jsarticle.cls' not found.


! LaTeX Error:This file needs format 'pLaTeX2e'
but this is 'LaTex2e'


** WARNING ** Could not locate a virtual/physical font for TFM "rml".
** WARNING ** >> This font is mapped to a physical font "HiraMinPro-W3".
** WARNING ** >> Please check if kpathsea library can find this font: HiraMinPro-W3
** ERROR ** Cannot proceed without .vf or "physical" font for PDF output...


続きで解決法を載せときます。

『詳解OpenCV』が届いた！

今朝、宅急便で届きました！

いやぁ、面白そうだなぁ

こいつを味方につけると心強そうです（笑）

あと、上の方に密かに"Software that Sees"って書いてあるのに気づいた。

色々遊んでみたいです（笑）

3D遊び

非常に簡単なプログラムです。
一応マウス位置のはデカくなるというインタラクション付きです。
ソースコードは以下。

int l=50;
int num;
Qube[] qube;

void setup(){
  size(800,500,OPENGL);
  //smooth();
  frameRate(30);
  colorMode(HSB,100);
  float x=l;
  float y=l;
  for(; x<width; x+=l){
    for(; y<height; y+=l) ;
  }
  num = int(x*y);
  
  qube = new Qube[num];
  for(int i=0; i<num; i++){
    qube[i] = new Qube(l,l,l); 
  }
}

void draw(){
  background(99);
  lights();
  directionalLight(99,0,99,0,0,-1);

  int count=0;
  for(float x=l; x<width; x+=l){
    for(float y=l; y<height; y+=l){
      pushMatrix();
      translate(x,y);
      rotateX(frameCount*PI/60 + x);
      rotateY(frameCount*PI/60 + y);
      float h = map(x,0,width,0,100);
      float s = map(y,0,height,0,100);
      float b = 99;
      fill(h,s,99,60);
      noStroke();
      qube[count].getDistance(x,y);
      qube[count].changeSize();
      qube[count].display();
      count++;
      popMatrix();
    }
  }
}

class Qube{
  int XL;
  int YL;
  int ZL;
  float xl;
  float yl;
  float zl;
  
  float range = 200;
  float distance=0;
  
  boolean isOver = false;
  
  Qube(){ }
  Qube(int XL, int YL, int ZL){
    this.XL = XL;
    this.YL = YL;
    this.ZL = ZL; 
  }
  
  void display(){
    box(xl,yl,zl);
  }
  
  void getDistance(float x,float y){
    distance=sqrt(sq(mouseX-x)+sq(mouseY-y));
    if(distance<range) isOver=true;
    else isOver=false; 
  }
  
  void changeSize(){
    if(isOver){
      float s=1;
      xl=XL+(range-distance)*s;
      yl=YL+(range-distance)*s;
      zl=ZL+(range-distance)*s;
    }else{
      xl=XL;
      yl=YL;
      zl=ZL;
    }
  }
}

『空想』

さっきの女の人に色々つけてみた。うん、まぁまぁかな。
でも何か、あんまり美人じゃない気もしてきたなぁ・・・

だいぶマシになってきた

耳とかはどうせ半分以上隠れるので適当ですが、だいぶマシになってきました。

Photoshopでリアル絵

作業中。
いやぁ、リアル絵はなかなか難しいですね。Photoshopで描くことに慣れてないぶん余計にそう感じます。てかそもそもリアル絵あんまり描かないからそれもキツい原因ですね。

パンフレットの表紙 (5)

最近はタイポグラフィの美しさというものを考えるようになりました。勉強してみます。

パンフレットの表紙 (4)

またまた作ってみた。今回のは雑誌の表紙みたいになった。
結構気に入ってる。

パンフレットの表紙 (3)

これは自分でも結構気に入ってます。
Photoshopの使い方も覚えてきた。後はこれが我が校のパンフレットの表紙になることを願うのみです。

ProcessingでGlow表現

Glow表現ってやっぱり華やかだし、それがあるだけでカッコよく見える。
今回はOpenGLを使ってGlow表現を試してみました。
参考にしたのはこのサイト。

• all manner of distractions >> Mini-tutorial: Additive Blending

スクリーンショットだと分かりにくいですが、星と煙（？）はガクガク揺れてます。

Z方向にバウンドする壁を設けていないので、時間が経つと↑こんな感じになります。

少しいじるとビジュアライザに応用できそう・・・

flight404は正方形を作ってそこにテクスチャとして画像を貼付けているようですが、僕は手抜きをしてProcessingにもとから付いてるimage()メソッドを使いました。

ソースコードは以下。何も考えずに書いていったので綺麗じゃないかもしれませんが・・・

（ここからzipファイルをダウンロードできます。こっちは画像が入ってます。）

/***********************************
 *
 * Opengl_glow.pde
 *
 ***********************************/

int STARS_NUM = 200;
int CORONA_NUM = 100;
float GRAVITY = 0.1;
float MAX_VELOCITY = 5;

Star[] stars = new Star[STARS_NUM];
Corona[] coronas = new Corona[CORONA_NUM];

void setup(){
  size(800,400,OPENGL);
  hint( ENABLE_OPENGL_4X_SMOOTH );
  background(0);

  PImage coronaImg=loadImage("corona.png");
  for(int i=0; i<CORONA_NUM; i++){
    float w=random(20,200);
    float h=w;
    Point pos = new Point(random(0+w,width-w), random(0+h,height-h));
    PVector vel = new PVector(random(-2,2), random(-2,2));
    coronas[i] = new Corona(coronaImg,pos,vel,w,h); 
  }

  PImage starImg = loadImage("star.png");
  for(int i=0; i<STARS_NUM; i++){
    float w=random(1,30);
    if(i%23==0) w=random(70,100);
    float h=w;
    Point pos = new Point(random(0+w,width-w), random(0+h,height-h));
    PVector vel = new PVector(random(-6,6), random(-6,6));
    stars[i]=new Star(starImg,pos,vel,w,h);
  }
}

void draw(){
  newFrame();
  glUtil();
  for(int i=0;i<CORONA_NUM; i++){
    coronas[i].move();
    coronas[i].bounce();
    coronas[i].display();
  }
  for(int i=0; i<STARS_NUM; i++){
    stars[i].move();
    stars[i].bounce();
    stars[i].display();
  }
}

void newFrame(){
  background(0,20);
}

/***********************************
 *
 * Point.pde
 *
 ***********************************/

class Point{
  float x;
  float y;
  float z;
  
  Point(){ }
  Point(float x,float y){
    this.x = x;
    this.y = y;
  }
  Point(float x,float y,float z){
    this(x,y);
    this.z = z;
  }
}

/***********************************
 *
 * Star.pde
 *
 ***********************************/

class Star{
  PImage starImg;
  
  Point pos = new Point();
  PVector vel = new PVector();
  
  float w;
  float h;
  
  Star(){ }
  Star(PImage starImg,Point pos,PVector vel,float w,float h){
    this.starImg=starImg;
    this.pos = pos;
    this.vel = vel;
    this.w = w;
    this.h = h;
  }
  
  void display(){
    pushMatrix();
    translate(0,0,pos.z);
    image(starImg,pos.x-w/2,pos.y-h/2,w,h);
    popMatrix();
  }
  
  void move(){
    pos.x+=random(-5,5);
    pos.y+=random(-5,5);
    pos.z+=random(-10,10);
  }
  
  void bounce(){
    if(pos.x+w/2>width || pos.x-w/2<0){
      vel.x*= -1;
      if(pos.x+w/2>width) pos.x=width-w/2;
      else pos.x=w/2;
    } 
    if(pos.y+h/2>height || pos.y-h/2<0){
      vel.y*= -1;
      if(pos.y+h/2>height) pos.y=height-h/2;
      else pos.y=h/2;
    }
  }
}

/***********************************
 *
 * Corona.pde
 *
 ***********************************/

class Corona extends Star{
  
  PImage coronaImg;

  Corona(){ }
  Corona(PImage coronaImg, Point pos, PVector vel, float w, float h){
    super(coronaImg, pos, vel, w, h);
  }
}

/***********************************
 *
 * Util.pde
 *
 ***********************************/

import processing.opengl.*;
import javax.media.opengl.*;


PGraphicsOpenGL pgl;
GL gl;

protected void glUtil() {
 pgl = (PGraphicsOpenGL) g;
 //gl = pgl.gl;
 //pgl.beginGL();
        gl=pgl.beginGL();
 gl.glDisable(GL.GL_DEPTH_TEST); // This fixes the overlap issue
 gl.glEnable(GL.GL_BLEND);// Turn on the blend mode
 gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE); // Define the blend mode
 pgl.endGL();
}

public void capture(char str) {
 if(keyPressed && key == str) {
  saveFrame("data/img-####.png");
  
 }
} 

public void vertex(PVector p) {
 vertex(p.x, p.y, p.z);
}
/** Utility for PVector class
@param c1 control 1 of PVector class
@param c2 control 2 of PVector class
@param p point of PVector class
*/
public void bezierVertex(PVector c1, PVector c2, PVector p) {
 bezierVertex(c1.x, c1.y, c1.z, c2.x, c2.y, c2.z, p.x, p.y, p.z);
}
public void curveVertex(PVector p) {
 curveVertex(p.x, p.y, p.z);
}

カオス

アルゴリズムの本に載ってたんでProcessingで作ってみた。ストレンジアトラクタとかいう類のものなんだけど、僕はこういう数学的なの結構好きだ。
フラクタルとか面白いよね。

ちなみにこれは

p_{n+1}=p_n+kp_n(1-p_n)

という漸化式でn->無限大 にしたとき係数kの値によって収束したり、しなかったりするものです。
収束しないときはこれまた係数kによって何個かの値を交互に取ったり、もはや規則性が見えなくなってカオス状態になってしまったりというものです。
画像は横軸を係数、縦軸にpをとったもの。
以下ソースコード。

int i;
float k,p,dk,kmin,kmax,pmin,pmax;

kmin=1.5;
kmax=3.0;
pmin=0.0;
pmax=1.5;

size(600,400);
colorMode(HSB,100);
background(10);
smooth();

dk=(kmax-kmin)/(width-1);

for(k=kmin;k<=kmax;k+=dk){
p=0.3;
for(i=1;i<=1000;i++) p+=k*p*(1-p);
for(i=1001;i<=1400;i++){
 if(p>=pmin&&p<=pmax){
   float Pk=map(k,kmin,kmax,0,width);
   float Pp=map(p,pmin,pmax,0,height);
   //stroke(99);
   //point(Pk,height-Pp);
   noStroke();
   float r=random(0.1,1.5);
   fill(random(0,20),99,99);
   ellipse(Pk,height-Pp,r,r);
 }
 p+=k*p*(1-p);
}
}

パンフレットの表紙 (2)

ウチの学校のパンフレットの表紙にこれは似合わない（笑）

てか学校なんてお堅いから、こういう系は絶対拒否るでしょうね。

Photoshopは楽しいですね

パンフレットの表紙

8/24までに学校のパンフレットの表紙デザインを考えてこないといけないので、どんなのがいいかなぁと一つ作ってみました。

CGクリエイター検定2級合格

実は、7月14日に僕は一人こっそりと三宮の神戸電子専門学校に行ってある試験を受けてました。
その試験というのは、CG-ARTS協会の「CGクリエイター検定ディジタル映像部門」、通称「CGクリエイター検定」2級です。

で、今日ネットで合否確認をした結果

合格してました \(^^)/
やったね！

予選通過

予選通過しました。

プレゼン大会

ある日、なんか学校のプレゼン大会に参加することになってしまった。
クラス対抗の大会で、1クラス3人のチームで競うっていうやつ。
んで、なんだかんだでテスト直後の少ない時間で急いでスライド作ったりしていざ本番。
普通はパワポなんだけど、僕のクラスのだけkeynoteでカッチョイイの作りました。

プレゼンするならkeynoteに限る←
結構自身あったんだけど。
結果は・・・3位（T_T）
う〜ん。スライドのできはすご〜く良かったみたいだけど。
やっぱ練習不足かな。何故か本番だけ時間オーバー（汗
20秒くらい大目に見てや（笑
時間内にできるかどうかは思った以上に高いウェートを占めてるみたいです。
でもそれで3位は不本意やな〜。
悪くても2位かなとか思ってた分、余計に。

んじゃ以下に僕が作ったスライド