JavaScript, p5.js

けむり: マウス飛行機で煙を横切ってください。

このホームページでは何故か動かないので IBM Bluemix で動かしました。

 

http://smoke.mybluemix.net/

 

↑ この画像 particle_texture.pngを変えると煙の色が変わります。

プログラムは https://p5js.org/examples/examples/Simulate_SmokeParticles.php を一部だけ変更。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script language="javascript" type="text/javascript">
var particle_texture = null, ps = null;
function preload() {
   particle_texture = loadImage("particle_texture.png");
}
function setup() {
   createCanvas(640,360);
  ps = new ParticleSystem(0,createVector(width / 2, height - 160),particle_texture);
  }
function draw() {
    background(0);
    fill(120,75,50); ellipse(width / 2, 250, 40, 100);
    fill(150);
    ellipse(mouseX, mouseY-10, 5, 30);
    ellipse(mouseX, mouseY, 100, 10); ellipse(mouseX, mouseY, 20, 20);
    var dx = map(mouseX,0,width,-0.2,0.2);
    var wind = createVector(dx,0);
    ps.applyForce(wind);
    ps.run();
    for (var i = 0; i < 2; i++) {
        ps.addParticle();
    }
 }
var ParticleSystem = function(num,v,img_) {
    this.particles = [];
    this.origin = v.copy(); // we make sure to copy the vector value in case we accidentally mutate the original by accident
    this.img = img_
    for(var i = 0; i < num; ++i){
       this.particles.push(new Particle(this.origin,this.img));
    }
};
ParticleSystem.prototype.run = function() {
    var len = this.particles.length;
    for (var i = len - 1; i >= 0; i--) {
        var particle = this.particles[i];
        particle.run();
        if (particle.isDead()) {
            this.particles.splice(i,1);
        }
    }
}
ParticleSystem.prototype.applyForce = function(dir) {
    var len = this.particles.length;
    for(var i = 0; i < len; ++i){
        this.particles[i].applyForce(dir);
    }
}
ParticleSystem.prototype.addParticle = function() {
    this.particles.push(new Particle(this.origin,this.img));
}
var Particle = function (pos, img_) {
    this.loc = pos.copy();
    var vx = randomGaussian() * 0.3;
    var vy = randomGaussian() * 0.3 - 2.0;
    this.vel = createVector(vx,vy);
    this.acc = createVector();
    this.lifespan = 100.0;
    this.texture = img_;
}
Particle.prototype.run = function() {
    this.update();
    this.render();
}
Particle.prototype.render = function() {
    imageMode(CENTER);
    tint(255,this.lifespan);
    image(this.texture,this.loc.x,this.loc.y);
}
Particle.prototype.applyForce = function(f) {
    this.acc.add(f);
}
Particle.prototype.isDead = function () {
    if (this.lifespan <= 0.0) {
        return true;
    } else {
        return false;
    }
}
Particle.prototype.update = function() {
    this.vel.add(this.acc);
    this.loc.add(this.vel);
    this.lifespan -= 2.5;
    this.acc.mult(0);
}
</script>