Processing:パーティクルとテクスチャ - 元Webデザイナー兼コーダーの備忘録

「The Nature of Code」からパーティクルとテクスチャについて取り上げます。パーティクルを画像で描画します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

イメージの描画
パーティクルとテクスチャ
まとめ
参考書籍

イメージの描画

以下は、画像ファイルをProcessingに読み込み、表示する参考例です。表示した画像を保存することもできます。

//画像を保存する
PImage img;

void setup(){
  size(200, 200);
  background(0);
  
  //イメージの読み込み
  img = loadImage("../data/texture.png");
  
  imageMode(CENTER);
  //tint(255, 255);
  //イメージの描画
  image(img, width/2, height/2);
  
  //イメージの保存
  //save("save.png");  
}

パーティクルとテクスチャ

今までは、パーティクルを図形で描画していました。今回は、パーティクルを画像で描画します。

//ParticleSystemSmoke
ParticleSystem ps;

void setup(){
  size(200, 200);
  PImage img = loadImage("data/texture.png");
  ps = new ParticleSystem(0, new PVector(width/2, height-25), img);
}

void draw(){
  background(0);
  
  //風の力の計算
  float dx = map(mouseX, 0, width, -0.2, 0.2);
  PVector wind = new PVector(dx, 0);
  ps.applyForce(wind);
  ps.run();
  for(int i = 0; i < 2; i++){
    ps.addParticle();
  }
  
  //風力を表す矢印の描画
  drawVector(wind, new PVector(width/2, 50, 0), 500);
}

//矢印の描画
void drawVector(PVector v, PVector pos, float scayl){
  pushMatrix();
  float arrowsize = 4;
  translate(pos.x, pos.y);
  stroke(255);
  //rotate(v.heading2D());
  rotate(v.heading());
  float len = v.mag()*scayl;
  line(0, 0, len, 0);
  line(len, 0, len-arrowsize, +arrowsize/2);
  line(len, 0, len-arrowsize, -arrowsize/2);
  popMatrix();
}

import java.util.Iterator;

class ParticleSystem{
  ArrayList<Particle> particles;
  PVector origin;  //パーティクルの座標
  PImage img;
  
  //コンストラクタ
  ParticleSystem(int num, PVector location, PImage img_){
    origin = location.copy();
    particles = new ArrayList<Particle>();
    img = img_;
    for(int i = 0; i < num; i++){
      particles.add(new Particle(origin, img));
    }
  }
  
  //パーティクルの追加
  void addParticle(){    
    //パーティクルの生成・追加
    particles.add(new Particle(origin, img));
  }
  
  //力の適用
  void applyForce(PVector dir){
    for(Particle p : particles){
      p.applyForce(dir);
    }
  }
    
  //実行
  void run(){
    Iterator<Particle> it = particles.iterator();
    while(it.hasNext()){
      Particle p = it.next();
      p.run();
      if(p.isDead()){
        it.remove();
      }
    }
  }
}

//パーティクル
class Particle{
  PVector location;
  PVector velocity;
  PVector acceleration;
  float lifespan;
  PImage img;
  
  //コンストラクタ
  Particle(PVector l, PImage img_){
    acceleration = new PVector(0, 0);
    float vx = randomGaussian()*0.3;
    float vy = randomGaussian()*0.3-1.0;
    velocity = new PVector(vx, vy);
    location = l.copy();
    lifespan = 100.0;
    img = img_;
  }
  
  //実行
  void run(){
    update();
    render();
  }
  
  //力の適用
  void applyForce(PVector f){
    acceleration.add(f);
  }
  
  //座標の更新
  void update(){
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
    lifespan -= 2.5;
  }
  //図形の描画
  void render(){
    imageMode(CENTER);
    tint(255, lifespan);
    image(img, location.x, location.y);
    //stroke(0, lifespan);
    //strokeWeight(2);
    //fill(127, lifespan);
    //ellipse(location.x, location.y, 12, 12);
  }
  
  //パーティクルの生存確認
  boolean isDead(){
    if(lifespan < 0.0){
      return true;
    }else{
      return false;
    }
  }
}