# Can anybody help me to make this code have possibility to add multiple images?

**URL:** <https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770>\
**Category:** Coding Questions\
**Created:** [June 11, 2020, 11:49am UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770 "2020-06-11T11:49:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 11, 2020, 11:49am UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/1 "2020-06-11T11:49:29Z")

</div>

Hello everybody I am still new in processing so go easy on me,I have found this code and have been trying how to make so that I can add multiple images to this sketch and on mouswheel() it changes images.I would appreciate if anybody can help me

https://www.openprocessing.org/sketch/437870/embed/?

/\* @pjs preload=“star.png”; \*/

```
   ArrayList<Particle> particles = new ArrayList<Particle>();
    Attractor a;
     int pixelStep = 5;
      PImage img;       

void setup() {
  size(window.innerWidth, window.innerHeight); 
   background(0);

a = new Attractor();
img = loadImage("star.png");
img.loadPixels();

for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
  int loc = x + y * img.width;
  color pixelColor = img.pixels[loc];

  if (alpha(pixelColor) == 0) { 
    continue;
  }
  if (loc % 8 > 0) { 
    continue;
  }
  if (y % 8 != 0) {
    continue;
  }

  Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
  particles.add(pixel);
  pixel.display();
    }
 }
}

 void draw() {
 background(0);
 noStroke();

 for (Particle particle : particles) {
if (mousePressed) {
  PVector force = a.attract(particle);
  a.update();
  particle.applyForce(force);
} else {
  particle.arrive();
}
particle.update();
particle.display();
}
}
```

---

<div class="post-metadata">

**Author:** ![mgood7123](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mgood7123](https://discourse.processing.org/u/mgood7123)\
**Post date:** [June 11, 2020, 11:55am UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/2 "2020-06-11T11:55:07Z")

</div>

use  
```  
\<CODE\>  
```  
for code

```auto
    <CODE>

```

```auto
/* @pjs preload="star.png"; */

ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int pixelStep = 5;
PImage img;       

void setup() {
  size(window.innerWidth, window.innerHeight); 
  background(0);

  a = new Attractor();
  img = loadImage("star.png");
  img.loadPixels();

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      int loc = x + y * img.width;
      color pixelColor = img.pixels[loc];

      if (alpha(pixelColor) == 0) { 
        continue;
      }
      if (loc % 8 > 0) { 
        continue;
      }
      if (y % 8 != 0) {
        continue;
      }

      Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
      particles.add(pixel);
      pixel.display();
    }
  }
}

void draw() {
  background(0);
  noStroke();

  for (Particle particle : particles) {
    if (mousePressed) {
      PVector force = a.attract(particle);
      a.update();
      particle.applyForce(force);
    } else {
      particle.arrive();
    }
    particle.update();
    particle.display();
  }
}

```

---

<div class="post-metadata">

**Author:** ![mgood7123](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mgood7123](https://discourse.processing.org/u/mgood7123)\
**Post date:** [June 11, 2020, 12:00pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/3 "2020-06-11T12:00:19Z")

</div>

as for the multiple images, you can just use something like

```auto
PImage img, img1, img2;
void setup() {
    img1 = loadImage("star.png");
    img1.loadPixels();
    img2 = loadImage("nebula.png");
    img2.loadPixels();
    img = img1; // switch to img 1
    img = img2; // switch to img 2
}

```

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [June 11, 2020, 12:28pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/4 "2020-06-11T12:28:41Z")

</div>

For the mouse wheel

```auto
int imgPosition = 0;
PImage image1;
PImage image2;
PImage image3;

PImage[] images = new PImage[]{image1, image2, image3};

void draw(){
  background(0);
  fill(255);
  text(imgPosition, width/2, height/2);
}
void mouseWheel(MouseEvent e){
  int wheelDirection = e.getCount();
  imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}

```

---

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 11, 2020, 1:20pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/5 "2020-06-11T13:20:48Z")

</div>

```auto
/* @pjs preload="star.png"; */

ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;  

PImage[] images = new PImage[]{img1, img2, img3};

void setup() {
  size(1366,768); 
  background(0);

  a = new Attractor();
  img1 = loadImage("star.jpg");
    img1.loadPixels();
    img2 = loadImage("nebula.jpg");
    img2.loadPixels();
    img = img1; // switch to img 1
    img = img2; // switch to img 2

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      int loc = x + y * img.width;
      color pixelColor = img.pixels[loc];

      if (alpha(pixelColor) == 0) { 
        continue;
      }
      if (loc % 8 > 0) { 
        continue;
      }
      if (y % 8 != 0) {
        continue;
      }

      Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
      particles.add(pixel);
      pixel.display();
    }
  }
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  text(imgPosition, width/2, height/2);

  for (Particle particle : particles) {
    if (mousePressed) {
      PVector force = a.attract(particle);
      a.update();
      particle.applyForce(force);
    } else {
      particle.arrive();
    }
    particle.update();
    particle.display();
  }
}

void mouseWheel(MouseEvent e){
  int wheelDirection = e.getCount();
  imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}

```

I tried to apply your code but I just get one image and behind of that image numbers 1,2,3 when I use mouseWheel

---

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 11, 2020, 1:22pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/6 "2020-06-11T13:22:06Z")

</div>

Thank you ,but then how do I change from one image to the other one?

---

<div class="post-metadata">

**Author:** ![mgood7123](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mgood7123](https://discourse.processing.org/u/mgood7123)\
**Post date:** [June 11, 2020, 1:25pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/7 "2020-06-11T13:25:04Z")

</div>

well, for example, this is how i change from one cursor image to another cursor image

```auto
class XCursorDecoder {
  // ...
  class CursorData {
    PImage image = null;
    int width = 0;
    int height = 0;
    int xhot = 0;
    int yhot = 0;
  }

  CursorData getImage(Header header, int index) {
    int index_ = 0;
    for (TOC toc : header.toc) {
      TOC_chunk chunk = toc.chunk;
      if (chunk.isImage) {
        if (index == index_) {
          CursorData cd = new CursorData();
          cd.width = chunk.width;
          cd.xhot = chunk.xhot;
          cd.height = chunk.height;
          cd.yhot = chunk.yhot;
          cd.image = createImage(cd.width, cd.height, ARGB);
          cd.image.loadPixels();
          for (int i = 0; i < cd.image.pixels.length; i++) {
            cd.image.pixels[i] = ByteTools.readIntRetainPosition(chunk.pixels[i], 1, 0)[0];
          }
          cd.image.updatePixels();
          return cd;
        } else {
          index_++;
        }
      }
    }
    return null;
  }
  // ...
}

```

```auto
class CursorTools {
  
  XCursorDecoder x = new XCursorDecoder();
  XCursorDecoder.CursorData currentCursorData = null;

  void loadCursor(String cursor) {
    XCursorDecoder.CursorData data = x.loadAndDecode(cursor);
    if (data != null) {
      // change the current cursor from the old image to the new image
      currentCursorData = data;
      cursor(data.image, data.xhot, data.yhot);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 11, 2020, 1:28pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/8 "2020-06-11T13:28:57Z")

</div>

```auto
/* @pjs preload="star.png"; */

ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;  

PImage[] images = new PImage[]{img1, img2, img3};

void setup() {
  size(1366,768); 
  background(0);

  a = new Attractor();
  img1 = loadImage("star.jpg");
    img1.loadPixels();
    img2 = loadImage("nebula.jpg");
    img2.loadPixels();
    img = img1; // switch to img 1
    img = img2; // switch to img 2

  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      int loc = x + y * img.width;
      color pixelColor = img.pixels[loc];

      if (alpha(pixelColor) == 0) { 
        continue;
      }
      if (loc % 8 > 0) { 
        continue;
      }
      if (y % 8 != 0) {
        continue;
      }

      Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
      particles.add(pixel);
      pixel.display();
    }
  }
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  text(imgPosition, width/2, height/2);

  for (Particle particle : particles) {
    if (mousePressed) {
      PVector force = a.attract(particle);
      a.update();
      particle.applyForce(force);
    } else {
      particle.arrive();
    }
    particle.update();
    particle.display();
  }
}

void mouseWheel(MouseEvent e){
  int wheelDirection = e.getCount();
  imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}

```

I tried to apply your code but I just get one image and behind of that image numbers 1,2,3 when I use mouseWheel

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [June 11, 2020, 3:07pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/9 "2020-06-11T15:07:54Z")

</div>

That is not quite right.  
Right now, you are nowhere near to image changing thing.

You need to recreate the particles or modifying them, since they all are holding the image pixels. Particle creation is in the setup(), wrap it to a function as we call them from the mouse wheel event and from the setup(). The particles ArrayList should be empty before we adding new particles.

```auto
void switchImage(int position){
  particles.clear();
  img = images[imgPosition];
  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      int loc = x + y * img.width;
      color pixelColor = img.pixels[loc];

      if (alpha(pixelColor) == 0) { 
        continue;
      }
      if (loc % 8 > 0) { 
        continue;
      }
      if (y % 8 != 0) {
        continue;
      }

      Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
      particles.add(pixel);
      pixel.display();
    }
  }
}

```

Then call it from the mouseWheel()

```auto
void mouseWheel(MouseEvent e){
  int wheelDirection = e.getCount();
  imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
 switchImage(imgPosition);
}

```

You dont need to put this part on the draw. Thats for the demonstration only.

> [@Cassius](#):
>
> ```auto
> fill(255);
> text(imgPosition, width/2, height/2);
> 
> ```

---

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 11, 2020, 9:18pm UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/11 "2020-06-11T21:18:40Z")

</div>

I tried and I get “unexpected token:void” error

```auto
/* @pjs preload="star.png"; */

ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;  

PImage[] images = new PImage[]{img1, img2, img3};

void setup() {
 size(1366,768); 
 background(0);

 a = new Attractor();
   img1 = loadImage("star.jpg");
   img1.loadPixels();
   img2 = loadImage("nebula.jpg");
   img2.loadPixels();
   img = img1; // switch to img 1
   img = img2; // switch to img 2

 void switchImage(int position){
 particles.clear();
 img = images[imgPosition];
 for (int y = 0; y < img.height; y++) {
   for (int x = 0; x < img.width; x++) {
     int loc = x + y * img.width;
     color pixelColor = img.pixels[loc];

     if (alpha(pixelColor) == 0) { 
       continue;
     }
     if (loc % 8 > 0) { 
       continue;
     }
     if (y % 8 != 0) {
       continue;
     }

     Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
     particles.add(pixel);
     pixel.display();
   }
  }
 }
}

void draw() {
 background(0);
 noStroke();

 for (Particle particle : particles) {
   if (mousePressed) {
     PVector force = a.attract(particle);
     a.update();
     particle.applyForce(force);
   } else {
     particle.arrive();
   }
   particle.update();
   particle.display();
 }
}

void mouseWheel(MouseEvent e){
 int wheelDirection = e.getCount();
 imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
switchImage(imgPosition);
}

```

---

<div class="post-metadata">

**Author:** ![Cassius](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Cassius](https://discourse.processing.org/u/Cassius)\
**Post date:** [June 12, 2020, 10:33am UTC](https://discourse.processing.org/t/can-anybody-help-me-to-make-this-code-have-possibility-to-add-multiple-images/21770/12 "2020-06-12T10:33:54Z")

</div>

I solved it ,but in a different way.

```auto
// an arrayList of PixelizedImage to keep them at hand
ArrayList<PixelizedImage> images = new ArrayList<PixelizedImage>();
// the index of the image currently displayed
int currentDisplay = 0;
// variables needed by the surviving original code
Attractor a;
int pixelStep = 5;
PImage img;       

void setup() {
  // size of the window and attractor for the original code
  fullScreen(); 
  a = new Attractor();

  // initializing all the images and storing them in the 'images' ArrayList
  for (String s : new String[] {"hop2.jpg", "hop1.jpg"}) {
    images.add(new PixelizedImage(loadImage(s)));
  }
}
  class PixelizedImage {
  // Here's an arrayList for the Particles
  ArrayList<Particle> particles = new ArrayList<Particle>();

  // the constructor will transform the image in a particle Array, no need to have a special method
  public PixelizedImage(PImage img) {
    img.loadPixels();

    for (int y = 0; y < img.height; y++) {
      for (int x = 0; x < img.width; x++) {
        int loc = x + y * img.width;
        color pixelColor = img.pixels[loc];

        if (alpha(pixelColor) == 0) { 
          continue;
        }
        if (loc % 8 > 0) { 
          continue;
        }
        if (y % 8 != 0) {
          continue;
        }

        Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
        particles.add(pixel);
        pixel.display();
      }
    }
  }

  // Render() will draw the pixelized image
  
  public void Render() {
    for (Particle particle : particles) {
      if (mousePressed) {
        PVector force = a.attract(particle);
        a.update();
        particle.applyForce(force);
      } else {
        particle.arrive();
      }
      particle.update();
      particle.display();
    }
  }
}

void draw() {
  background(0);
  noStroke();

  // knowing the index of the current image, we fish it out of the ArrayList and draw it
  images.get(currentDisplay).Render();
}

void keyPressed() {
  // if the key actually being pressed makes a ' ' character:
  if (key == ' ') {
    currentDisplay++;
    if (currentDisplay >= images.size()) {
      currentDisplay = 0;
    }
  }
}

```