JavaScript, p5.js
けむり： マウス飛行機で煙を横切ってください。
↑ この画像 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>