atelier:mitsuba

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

コードかいたらバグだらけになったw

この前は絵画でしたが、お次はこんなアプリw

1200匹の蟻がうごめいています。

で、この蟻の中にマウスカーソルをもってくると・・・


マウスカーソルに向かってほとんどの蟻が集ってきますw

(Macのスクリーンキャプチャはマウスカーソルが映らないっぽい。)
(画面まんなかあたりにカーソルを置いています。)















「きめぇぇぇぇぇぇぇぇ」と言わせたらあたしの勝ちです(ぇ

で、何がしたいかというと、

絵画アプリは、「スクリーンをこする」っていうインタラクションでしたが、
今回は「置く」というインタラクションです。

どういうことかというと、仕組みは前と同じで赤外線LEDとWiiを使いますが、
赤外線LEDにはお菓子のイラストと磁石もしくは両面テープを付けておきます。

で、これをスクリーンに貼りつけます。
(本当は上からスクリーンを当てた方がそれっぽいんでしょうが。。。)

すると、バーチャルに描かれた蟻が、実世界のお菓子に反応して集ってくる、ということになります。

赤外線LEDをまだ買いにいけてないので、お菓子を作れていませんが、出来たら、また動画かなんかでアップしようと思います。

例の如く、ソースコード
コード的には、特に難しいことはしてないと思う。

int alength = 1200;
int frameSize = 100;

float[] x = new float[alength];
float[] y = new float[alength];
float[] randx = new float[alength];
float[] randy = new float[alength];
float[] spx = new float[alength];
float[] spy = new float[alength];
float[] speedRate = new float[alength];

int[] moveKey = new int[alength];

PImage ali;
PImage jimen;

void setup(){
  size(1280,700);

  colorMode(RGB,100);
  background(99);
//  noCursor();

  ali = loadImage("ali.png");
  jimen = loadImage("jimen.png");

  for(int i=0;i<alength;i++){
    x[i] = random(width);
    y[i] = random(height);
    spx[i] = spy[i] = 0;
    speedRate[i] = random(0.001,0.01);
    randx[i] = random(width);
    randy[i] = random(height);
    if(random(0,1)>0.1){
      moveKey[i] = 1;
    }else{
      moveKey[i]=0;
    }
  }
  frameRate(30);
}

void draw(){
  background(jimen);

  fill(0,20,0);
//  rect(width/2,height/2,width-100,height-100);
  
  for(int i=0;i<alength;i++){
  if((frameSize/2)<mouseY&&mouseY<height-(frameSize/2)&&(frameSize/2)<mouseX&&mouseX<width-(frameSize/2)&&moveKey[i]==1){
      spx[i] = (mouseX - x [i]+random(-50,50))*speedRate[i];
      spy[i] = (mouseY - y [i]+random(-50,50)) *speedRate[i];
    }else{
      if(0<x[i]-randx[i]&&x[i]-randx[i]<5&&0<y[i]-randy[i]&&y[i]-randy[i]<10){
        randx[i] = random(width);
        randy[i] = random(height);
      }else{
        spx[i] = (randx[i] - x[i]+random(-100,100)) *speedRate[i];
        spy[i] = (randy[i] - y[i]+random(-100,100)) *speedRate[i]; 
      }
    }
    x[i] += spx[i];
    y[i] += spy[i];
    drawBug(i);
  }
  
}

void drawBug(int i){
  pushMatrix();
  translate(x[i],y[i]);
  if((frameSize/2)<mouseY&&mouseY<height-(frameSize/2)&&(frameSize/2)<mouseX&&mouseX<width-(frameSize/2)&&moveKey[i]==1){
    rotate(atan2(mouseY - y[i],mouseX - x[i]));
  }else{
    rotate(atan2(randy[i] - y[i],randx[i] - x[i]));
  }
  noStroke();
  imageMode(CENTER);
  image(ali,0,0);
/*  fill(0,0,0);
  ellipse(-8,0,13,10);
  ellipse(0,0,10,8);
  fill(200,0,0);
  rect(6,0,5,5);
*/  
  popMatrix();
}

でも、全く同じ技術でいろんなインタラクションを表現するのって面白いなぁ。