kansiho's memo

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

Processing 入門② マウスに反応させインタラクティブに図形を作る、フェードイン、文字の表示

マウスの位置に反応させるには

mouseX, mouseYの変数に自動的にその座標が割り当てられる. 簡単!

ホバーさせてる位置に図形を描いてみる。

void setup(){
  size(855,480);
  background(0,0,0);
  frameRate(10); // the less it is , the slower drawing become.
}

float x;

void draw(){

  stroke(200,255,255); //線
  x = random(-90,90); // 直径をランダムにするため
  ellipse(mouseX,mouseY,x,x);  //円を描く
  saveFrame("frames/######.png"); //動画にするために
}

 

でもこもこする円の線(円の直径がランダムに変わるからもこもこする)で、 ハート型を描いてみた!

クリックした時だけ描くには?

ファンクション mousePressed() を使う. このとき draw()もないと動かないのに注意。

void setup(){
  size(855,480);
  background(0,0,0);
  frameRate(10); // the less it is , the slower drawing become.
}
float x;

void draw() {

}

void mousePressed() {
  stroke(255);
  noFill();
  x = random(-90,90);
  ellipse(mouseX, mouseY, x, x);
}

フェードアウト

rectをwidth,height変数を使って画面の大きさと同じ長方形にして、fillで白色の半透明に設定すると、どんどんそれを重ね塗りしていくのでどんどん白色に近づいていき、なめらかにフェードアウトしているようにみえます。

void setup(){
  size(855,480);
  background(0,0,0);
  frameRate(10); // the less it is , the slower drawing become.
}

void draw(){
   fill(255, 30); 
   rect(0,0,width,height);
   saveFrame("frames/######");
}

文字を表示させる

textSizeでサイズ調整、text(“表示させる文字”, x座標, y座標)

void setup(){
  size(855,480);
  background(0,0,0);
  frameRate(30); // the less it is , the slower drawing become.
}

float text_size = 10;
float x;
float y;
void draw(){
  fill(255,0,0);    //文字の色
 textSize(text_size+=10);    //文字のサイズ(ピクセル数)
 text("YES",x+=60,y+=30 ); //表示する文字と位置
  
  saveFrame("frames/######");
}

参考

Processing基礎最速入門 - catch.jp-wiki