Image Explosion: Processing Homework

In class we were given the task to create a sketch where images can be fed in and then made to “explode” by converting the pixels to particles and applying vectors to them, which creates a simulation of an explosion. This sketch uses a combination of techniques I have learnt before, but now it was time to put them together to create a whole program.

The first thing to do was to create a particle class that encapsulates all of the behavior that we want the pixels to have. It needed some vectors to control motion but also a color variable so that the particles can take colours from the original image and recreate it.

In the main sketch after loading the image, we need to call a function that converts the image to particles. It reads through pixels on the x then y axis and for each of these creates a particle with the colour of the pixel. The particle is then added to an array.

The last part of the sketch is calling the update function if the mouse is clicked. This is written in the particle class (where the velocity is added to the location) but it is only called in the main function if the mouse is pressed.

//Particle Class

class Particle{
  PVector location;
  PVector velocity;
  color colour;
  Particle(float x, float y, color c){
    location = new PVector (x, y);
    velocity = new PVector (random(-5, 5),random(1, 10));
    this.colour = c;
  void update(){
  void draw(){
    rect(location.x, location.y, pixelSize*2, pixelSize*2);
//Main Sketch

PImage cat;
ArrayList particles = new ArrayList();
int pixelSize = 3;

void setup(){
cat = loadImage("cat.jpeg");
size(cat.width*pixelSize, cat.height*pixelSize);

void draw(){
    for (int i = 0; i < particles.size(); i ++){
   Particle a =(Particle)particles.get(i);
void convertImgToParticles(PImage cat){
   // iterate through x and y axis of image 
   for( int ix = 0; ix < cat.width; ix++){
    for( int iy = 0; iy < cat.height; iy++){
        //read pixel colour 
        color c = cat.pixels[ix + (iy*cat.width)];
        //create and new agent with coordinates of the pixel value we have just read
        Particle a = new Particle(ix*pixelSize, iy*pixelSize, c);
        // add our new agent to our ArrayList of agents
        particles.add( a );


Image when mouse is unclicked


Image when mouse is clicked, (particles move towards the bottom of the screen.)

Leave a Comment