# Add images to particle system

**URL:** <https://discourse.processing.org/t/add-images-to-particle-system/5511>\
**Category:** Coding Questions\
**Created:** [November 13, 2018, 9:45pm UTC](https://discourse.processing.org/t/add-images-to-particle-system/5511 "2018-11-13T21:45:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JimyiHendrix](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@JimyiHendrix](https://discourse.processing.org/u/JimyiHendrix)\
**Post date:** [November 13, 2018, 9:45pm UTC](https://discourse.processing.org/t/add-images-to-particle-system/5511/1 "2018-11-13T21:45:17Z")

</div>

Hello everyone. I would like tome convert those particles into an image. I mean every single particle in one image that i have from a picture, any. i leave here the code till i tried it. THANKS for your time!!

//This is a paddle i have for the main code  
ParticleSystem ps;

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

ps = new ParticleSystem();  
}

void draw() {  
background(255, 255);

ps.addParticle();  
ps.run();  
}

//This is the second paddle named Particles  
class Particle {  
PVector location, velocity, acceleration;  
float lifespan;  
float radio;

PImage pocoyo;

Particle() {  
location = new PVector(width/2, 20);  
velocity = new PVector(0, 0);  
acceleration = new PVector(random(-0.01, 0.01), random(0.01, 0.1));

```
pocoyo = loadImage("pocoyo.jpg");

lifespan = 255;

radio = random(12);

```

}

boolean isDead() {  
if (lifespan \<= 0) {  
return true;  
} else {  
return false;  
}  
}

void falling() {  
location.add(velocity);  
velocity.add(acceleration);

```
if (location.y >= width/2) {
  lifespan = lifespan - 10;
}

```

}

void display() {  
image(pocoyo, 0, 0, 20, 20);  
fill(150, lifespan);  
stroke(0);  
strokeWeight(2);  
ellipse(location.x, location.y, radio, radio);

}  
}

//This is the Third and the last paddle named ParticleSystem  
class ParticleSystem{  
ArrayList particles;

ParticleSystem(){  
particles = new ArrayList();

}

void addParticle(){  
particles.add(new Particle());  
}

void run(){  
for(int i = 0; i \< particles.size(); i++){  
Particle p = particles.get(i);  
p.display();  
p.falling();

```
  if(p.isDead()){
    particles.remove(i);
  }
  
  
}

```

}

}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 13, 2018, 9:58pm UTC](https://discourse.processing.org/t/add-images-to-particle-system/5511/2 "2018-11-13T21:58:23Z")

</div>

Hey, please format your code by pressing `Ctrl+T` in the Processing IDE code editor and use the `<\>` button in the message editor.

What is wrong with the code you posted below?

---

<div class="post-metadata">

**Author:** ![JimyiHendrix](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@JimyiHendrix](https://discourse.processing.org/u/JimyiHendrix)\
**Post date:** [November 13, 2018, 10:41pm UTC](https://discourse.processing.org/t/add-images-to-particle-system/5511/3 "2018-11-13T22:41:40Z")

</div>

I wanna replace those particles by images on my code. I don’t have that knowledge yet, i’m trying out in different ways but i didn’t get it yet. I am asking if somebody could help me with it, pleas. Thanks

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 13, 2018, 10:55pm UTC](https://discourse.processing.org/t/add-images-to-particle-system/5511/4 "2018-11-13T22:55:17Z")

</div>

I think it’s because you have to make your image a global variable to all your Particles (and call `image(my_image,0,0)` (inside of the display function for example). Here, you are just calling `loadImage(...)` and then you don’t store your image in a variable.