読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

スクリーンをこすってみよう

Processing 研究

ゼミでちょっとした発表をしました。
前にいるのが、蜜葉で、まんなかにたってもらってるのが@cohmiです。

プレゼンしたアプリはこんなの。

スクリーンには真っ黒の画面がうつってるだけなんですが、
ここを特殊な棒でこすると、後ろからモナリザが出てきます。

モナリザは恥ずかしがりなので、こすられたところから順にまた黒くなって消えていきます。

で、種明かし。

お気づきでしょうが、この前の赤外線LEDを使っています。
http://d.hatena.ne.jp/c-mitsuba/20100603#1275553681

@cohmiにwiiリモコンを動かないように必死にもってもらっていますww

で、このアプリがどーできてるかっていうと、processingでできていて、
背面に画像を表示し、その上に真っ黒なレイヤー。
でもって、その真っ黒なレイヤーのマスクとして、円を書いているだけ。
円は過去50フレームのマウスカーソルの位置に描画しています。
出てくる画像は、1分ごとに変わりますw
あと、円にブラーをかけたかったのだけども、かけたらすっごく重たくなったので//しています。

ちなみにp5の使用上。
キャンバスの解像度<イメージファイルの解像度
だとエラーが出るみたいです。


以下ソースコード

                                              • -
PGraphics pgMask;
PImage img;


int ellipseNum = 60;
int frameKey = 0;
int frameNum = 0;
int[] mousePointX = new int[ellipseNum]; 
int[] mousePointY = new int[ellipseNum];
int nowMinute=0;
int oldMinute=0;
boolean imgKey = false;
String imgPass[] = {"test1.jpg","test2.jpg","test3.jpg"};

float[] ellipseSize = new float[ellipseNum];

void setup() 
{

  size(1280, 800); 
  noStroke();
  noCursor();
  smooth();
  colorMode(RGB, 255, 255, 255, 100);
  img = loadImage("test1.jpg");  
  pgMask = createGraphics(screen.width, screen.height,P3D);
}

void draw() 
{   
  background(0);

  if(nowMinute!=oldMinute){
    img = loadImage(imgPass[int(random(imgPass.length))]); 
    oldMinute = nowMinute;
  }
  
  
  mousePointX[frameKey] = mouseX;
  mousePointY[frameKey] = mouseY;
  ellipseSize[frameKey] = random(60,100);
  
  pgMask.beginDraw();
    pgMask.background(0);
    pgMask.fill(255, 20);
    pgMask.smooth();
    pgMask.noStroke();

    for(int i=0;i<ellipseNum;i++){
      pgMask.ellipse(mousePointX[i],mousePointY[i],ellipseSize[i],ellipseSize[i]);
    }  
  pgMask.endDraw();
  //pgMask.filter(BLUR,5);

  PImage pimgMask = pgMask.get();
  img.mask(pimgMask);
  image(img, 0, 0);
  
  frameKey++;
  frameNum++;
 
  if(frameKey > ellipseNum-1){
    frameKey = 0;
    frameNum = 0;
  }
  text(frameRate,10,10);
  nowMinute = minute();
}
                                                                        • -

これを応用すれば、壁に貼付けたものに反応したり、
カメラで映した画面をこすると、そこだけ時間が遅れてみえたりするのも可能かも。