互动媒体技术——《代码本色》习作五：粒子系统

最新推荐文章于 2022-12-05 16:05:43 发布

不会跳舞的程序媛

最新推荐文章于 2022-12-05 16:05:43 发布

阅读量549

点赞数

分类专栏：互动媒体技术

本文链接：https://blog.csdn.net/Program_dancing/article/details/103223978

版权

互动媒体技术专栏收录该内容

19 篇文章 4 订阅

订阅专栏

1.概念介绍

2.参考案例

3.个人作品

一、概念介绍

简介：粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术，而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。
原理：很多细小的粒子从发射器中以一定的初速度和加速度进行向外发射。达到一定的生命周期时，会自己消失。而在整个粒子系统中，还有很多新的粒子会不断地产生。

二、参考案例

1.案例一：受力作用的粒子系统

简介
应用运动遵循牛顿第二定律原则F=M*A，同时将力的累加算法作用在粒子上，实现更好的模拟框架
实现步骤
1.建立单个粒子类：初始化粒子速度，加速度，绘制粒子，更新位置
2.建立粒子系统类：初始化粒子系统，添加力，绘制粒子系统。
3.实现添加力的函数（思想是将力作用在粒子系统上，系统再将力作用在每个粒子上）
代码展示

import java.util.Iterator;
//粒子系统
ParticleSystem ps;
//排斥对象
//Repeller repeller;
void setup() {
  size(400,400);
  smooth();
  ps=new ParticleSystem(new PVector(width/2,50));
}
void draw(){
  background(0);
  PVector gravity =new PVector(0,0.1);
  ps.applyForce(gravity);
  ps.addParticles();
  ps.run();
}
//*******************************粒子系统类******************************
class ParticleSystem {
  ArrayList<Particle>particles;
  PVector origin;//粒子发射的起点
  //构造函数
  ParticleSystem(PVector location){
    origin=location.get();
    particles=new ArrayList<Particle>();
  }
  //添加粒子
  void addParticles(){
    particles.add(new Particle(origin));
  }
  //增加力:这里是通过把力作用在粒子系统上，再通过粒子系统把力作用在所有的粒子上实现的
  void applyForce(PVector f){
    for(Particle p:particles){
       p.applyForce(f);
    }
  }
  //绘制粒子系统
  //注意：再这里不能使用改进型的for循环，因为要在遍历过程中删除元素
  void run(){
    //迭代器
    Iterator<Particle> it =particles.iterator();
    while(it.hasNext()){
      Particle p=(Particle)it.next();
      p.run();
      if(p.isDead()){
        it.remove();      
      }
    }
  }
}
//************************************粒子类*****************************
class Particle {
  PVector location;//位置
  PVector velocity;//速度
  PVector acceleration;//加速度
  float lifespan;//生命周期
  float mass=1;//改变加速度
  //构造函数
  Particle(PVector L) {
    acceleration =new PVector(0, 0);//初始加速度从0开始
    velocity=new PVector(random(-1, 1), random(-2, 0));
    location=L.get();
    lifespan=255.0;
  }
  void run() {
    update();
    display();
  }
  //添加力
  void applyForce(PVector force) {
    PVector f =force.get();//先取出，否则会对内部进行修改
    f.div(mass);
    acceleration.add(f);
  }
  //更新粒子的位置
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
    lifespan-=2.0;
  }
  //绘制粒子
  void display() {
    stroke(255, lifespan);
    fill(255, lifespan);
    ellipse(location.x, location.y, 8, 8);
  }
  boolean isDead() {
    if (lifespan< 0.0){
      return true;
    }else{
      return false;
    }
  }
}

效果展示

2.案例二：不同粒子的粒子系统

简介
在同一个发射器中，发射出不同的粒子，有各种形状，不同大小，不同颜色。
思路
用多态实现粒子系统。使得新的粒子继承原始粒子，重新display（绘制粒子）的函数，最后通过父类引用指向子类对象进行函数的调用。力的作用和使用到的公式同上一个案例
拓展
原始案例中没有对每一个粒子的大小形状做出改变。在这里可以使用random函数随机生成粒子的大小和形状。同时将一个粒子系统拓展为多个粒子系统。粒子系统的位置也随机指定。同时加入鼠标的交互，点击鼠标时，改变粒子系统的位置。
代码展示

import java.util.Iterator;
//粒子系统
ParticleSystem[] ps=new ParticleSystem[5];
void setup() {
  size(800, 400);
  smooth();
  for (int i=0; i<5; i++) {
    ps[i]=new ParticleSystem(new PVector(random(100, width), random(0, 200)));
  }
}
void draw() {
  background(0);
  PVector gravity =new PVector(0, 0.1);
  for (int i=0; i<5; i++) {
    ps[i].applyForce(gravity);
    ps[i].addParticles();
    ps[i].run();
  }
}

void mouseClicked(){
   for (int i=0; i<5; i++) {
    ps[i]=new ParticleSystem(new PVector(random(100, width), random(0, 200)));
  }
}
//************************************粒子类*****************************
class Particle {
  PVector location;//位置
  PVector velocity;//速度
  PVector acceleration;//加速度
  float lifespan;//生命周期
  float mass=1;//改变加速度
  //构造函数
  Particle(PVector L) {
    acceleration =new PVector(0, 0);//初始加速度从0开始
    velocity=new PVector(random(-1, 1), random(-2, 0));
    location=L.get();
    lifespan=255.0;
  }
  void run() {
    update();
    display();
  }
  //添加力
  void applyForce(PVector force) {
    PVector f =force.get();//先取出，否则会对内部进行修改
    f.div(mass);
    acceleration.add(f);
  }
  //更新粒子的位置
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
    lifespan-=2.0;
  }
  //绘制粒子
  void display() {
    stroke(random(125, 255), random(215, 255), random(0, 255), lifespan);
    fill(random(0, 255), random(0, 255), random(0, 255), lifespan);
    ellipse(location.x, location.y, random(0.5, 15), random(0.5, 15));
  }
  boolean isDead() {
    if (lifespan< 0.0) {
      return true;
    } else {
      return false;
    }
  }
}
//创建粒子类的子类
class Confetti extends Particle {
  Confetti(PVector L) {
    super(L);
  }
  //覆盖display方法
  void display() {
    float theta=map(location.x, 0, width, 0, TWO_PI*2);
    rectMode(CENTER);
    fill(random(0, 255), random(0, 255), random(0, 255), lifespan);
    stroke(random(0, 255), random(0, 255), random(0, 255), lifespan);
    rect(location.x, location.y, random(0.5, 15), random(0.5, 15));
  }
}
//*******************************粒子系统类******************************
class ParticleSystem {
  ArrayList<Particle>particles;
  PVector origin;//粒子发射的起点
  //构造函数
  ParticleSystem(PVector location) {
    origin=location.get();
    particles=new ArrayList<Particle>();
  }
  //添加粒子
  void addParticles() {
    float r=random(1);
    if (r<0.5) {
      particles.add(new Particle(origin));
    } else {
      particles.add(new Confetti(origin));
    }
  }
  //增加力:这里是通过把力作用在粒子系统上，再通过粒子系统把力作用在所有的粒子上实现的
  void applyForce(PVector f) {
    for (Particle p : particles) {
      p.applyForce(f);
    }
  }
  //绘制粒子系统
  //注意：再这里不能使用改进型的for循环，因为要在遍历过程中删除元素
  void run() {
    //迭代器
    Iterator<Particle> it =particles.iterator();
    while (it.hasNext()) {
      Particle p=it.next();
      p.run();
      if (p.isDead()) {
        it.remove();
      }
    }
  }
}

效果展示

三、个人作品

作品一：飞舞的泡泡

简介
该作品用利用图像纹理来模拟泡泡在空中的飘动，同时也模拟火焰的效果。可以在两种效果之间进行切换
步骤
1.导入图片：使用Pimage
2.为泡泡的漂浮设计规则：泡泡受到重力，浮力，空气阻力。但是整体有一个向上升的趋势。因此浮力大于空气阻力加重力。而在这里为了简化，可以把三个力合成为一个力，通过添加到粒子系统上进而添加给粒子系统中的每一个粒子。同时，泡泡也会收到风力的作用，而这里为了实现交互的话，将风力的方向与鼠标的位置关联在一起，可以实现鼠标所在之处，为泡泡所漂浮的方向。
重力：F=m*g
浮力：F浮=ρgV
阻力：f=umg

3.为火焰设计规则：火焰的话在泡泡的基础上减少一个空气阻力
类的设计
代码展示

//图像纹理
PImage img;
import java.util.Iterator;
//粒子系统
ParticleSystem ps;
boolean flag=false;
void setup() {
  size(800, 400);
  smooth();
  ps=new ParticleSystem(new PVector(width/2, height));
  img=loadImage("pao2.png");
}
void draw() {
  background(0);
  float dx=map(mouseX, 0, width, -0.2, 0.2);
  PVector wind=new PVector(dx, 0);
  PVector buoyancy=new PVector(0, random(-0.2, 0.2));
  if(!flag)ps.applyForce(buoyancy);
  ps.applyForce(wind);
  ps.run();
  ps.addParticles();
}
void mouseClicked() {
  if (!flag) {
    flag=true;
    img=loadImage("fire5.png");
  } else {
    img=loadImage("pao2.png");
    flag=false;
  }
}
//*******************************粒子系统类******************************
class ParticleSystem {
  ArrayList<Particle>particles;
  PVector origin;//粒子发射的起点
  //构造函数
  ParticleSystem(PVector location) {
    origin=location.get();
    particles=new ArrayList<Particle>();
  }
  //添加粒子
  void addParticles() {
    particles.add(new Particle(origin));
  }
  //增加力:这里是通过把力作用在粒子系统上，再通过粒子系统把力作用在所有的粒子上实现的
  void applyForce(PVector f) {
    for (Particle p : particles) {
      p.applyForce(f);
    }
  }
  //绘制粒子系统
  //注意：再这里不能使用改进型的for循环，因为要在遍历过程中删除元素
  void run() {
    //迭代器
    Iterator<Particle> it =particles.iterator();
    while (it.hasNext()) {
      Particle p=(Particle)it.next();
      p.run();
      if (p.isDead()) {
        it.remove();
      }
    }
  }
}
//************************************粒子类*****************************
class Particle {
  PVector location;//位置
  PVector velocity;//速度
  PVector acceleration;//加速度
  float lifespan;//生命周期
  float mass=1;//改变加速度
  //构造函数
  Particle(PVector L) {
    acceleration =new PVector(0, 0);//初始加速度从0开始
    velocity=new PVector(random(-1, 1), random(-8, 0));
    location=L.get();
    lifespan=255.0;
  }
  void run() {
    update();
    display();
  }
  //添加力
  void applyForce(PVector force) {
    PVector f =force.get();//先取出，否则会对内部进行修改
    f.div(mass);
    acceleration.add(f);
  }
  //更新粒子的位置
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
    lifespan-=2.0;
  }
  //绘制粒子
  void display() {
    //stroke(255, lifespan);
    //fill(255, lifespan);
    //ellipse(location.x, location.y, 8, 8);
    render();
  }
  void render() {
    imageMode(CENTER);
    tint(255, lifespan);
    image(img, location.x, location.y);
  }
  boolean isDead() {
    if (lifespan< 0.0) {
      return true;
    } else {
      return false;
    }
  }
}

效果展示

作品二：破碎的人像

简介
鼠标互动可以切换图片，点击鼠标后所有的小方格将会破碎，并因重力作用而向下坠落。单个粒子是由rect构成，rect的参数由粒子系统进行传递，传递的是rgb的值，单个粒子的大小可以根据实际进行调整：如果希望看起来像马赛克效果，可以增加rect的大小，这里我将rect的大小设置为了1
效果展示
代码展示（核心）

ParticleSystem ps;
PImage photo;
int index=1;//当前的图片序号
String pic[]={"heben.jpg","heben1.jpg","heben2.jpg","heben3.jpg"};
void setup() { 
  size(200, 200);
  photo = loadImage("heben.jpg");
  photo.loadPixels();
  ps = new ParticleSystem(0, 0, 1, photo);
}

void draw() {
  background(0);   
  ps.display();
  ps.update();
} 
void mouseClicked() {
  ps.shatter();
}  
void mouseWheel(){
  if(index==4){
    index=0;
  }
  photo = loadImage(pic[index]);
  photo.loadPixels();  
  ps = new ParticleSystem(0, 0, 1, photo);
  index++;
  
}

不会跳舞的程序媛

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
互动媒体技术——《代码本色》习作五：粒子系统

1.概念介绍2.参考案例3.个人作品一、概念介绍简介：粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术，而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。原理：很多细小的粒子从发射器中以一定的初速度和加速度进行向外发射。达到一定的...
复制链接

扫一扫