memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

Processingで素朴な爆発表現のスケッチ

昨日のつづき。

カメラによる物体検知 - memorandums

上記でとりあえずドットの衝突検知ができるようになったので、タッチしたら音とアニメを流さないとな。。。ということでこれも自作(探したんだけどいいのがなくて)。

帰りの電車でサクッと作ったのが以下。Javaだとスクリプト言語と違って宣言順は気にしなくていいのでお気楽。

ArrayList<PG> pgl = new ArrayList<PG>();

void setup() {
  size(600, 600);
}

void draw() {
  background(0);
  for (int i = pgl.size() - 1; i >= 0; i--) {
    PG pg = pgl.get(i);
    if (pg.dead) {
      pgl.remove(i);
    } else {
      pg.draw();
    }
  }
}

void mousePressed() {
  pgl.add(new PG(mouseX, mouseY, 500, 3));
}

class PG {
  ArrayList<P> pl;
  int num;
  int r;
  boolean dead;
  
  public PG(float x, float y, int num, int r) {
    pl = new ArrayList<P>();
    this.num = num;
    this.r = r;
    for (int i = 0; i < num; i++) {
      float xx = x + random(-r, r);
      float yy = y + random(-r, r);
      pl.add(new P(xx, yy, r, atan2(yy-y, xx-x), random(0.3, 3))); //3は初速の上限
    }
  }

  void draw() {
    for (int i = pl.size() - 1; i >= 0; i--) {
      P p = pl.get(i);
      p.update();
      if (p.dead) {
        pl.remove(i);
        if (pl.size() == 0) dead = true;
      } else {
        p.draw();
      }
    }
  }

  class P {
    float x, y;
    float r;
    float th;
    float sp;
    boolean dead = false;
    
    public P(float x, float y, float r, float th, float sp) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.th = th; //0 - TWO_PI
      this.sp = sp;
    }
    
    void update() {
      if (dead) return;
      x += sp * cos(th);
      y += sp * sin(th);
      sp *= 0.99; //0.99を変えると減速速度が速くなる
      if (x < 0 || x > width) dead = true;
      if (y < 0 || y > height) dead = true;
      if (sp < 0.1) dead = true;
    }
    
    void draw() {
      noStroke();
      fill(255, sp * 255 * random(0, 1)); //randomは明滅するため
      //      ellipse(x, y, r, r);
      rect(x, y, r, r);
    }
  }
}

で、これでは絵に書いた餅なので(展示的にはこれでいいのですが)、せっかくなのでネットで試せるようにp5.jsに移植したコードが以下です。

たまにしかJSを書かないので忘れては書いて思い出すを何十回と繰り返してきた感じです。。。しかたがありません。

ちなみに上記のコードでは、クリックした位置付近に100個のピクセルをばらまいて、そこから放射状にキラキラ明滅しながら散っていくイメージで作っています。

Javaでは500個でもスムーズに動いたのですが、p5.jsでは100個が精一杯(いやコードに無駄があると思いますが最適化する時間はとれません、ごめんなさい)。Javaは適当に書いてもそれなりに動く。。。証明になったのではないかと思います。

ごめんなさい。console.logが入りっぱなしだった。JSが遅いってわけじゃなかった。Java同様に500個にしても問題なく動作しました。

とりあえずこれをベースに調整していきたいと思います。

では。