Stuck on a simple class - Processing Forum

Loading...

Processing Forum

Programming Questions

apotdd

Stuck on a simple class

in Programming Questions • 1 year ago

Okay so this is what I want to do; I have some exported images that I want to display randomly. Clicking the mouse should "activate" a first random exported image, and then I just want it to expand until it is as big as the size of my screen. Then I want this Image to go away, and to be replaced by a new random image (that starts small again and then grows till it hits the size of the screen, and so on and on).

This may seem pretty easy but I don't think I have a clue of what I'm doing since I'm really a beginner at this.

So far...

ArrayList all;

void setup() {
size(700, 700);
all = new ArrayList();
}

void addClassInstance() {
export neimage = new export();
neimage.init();
all.add(neimage);
}

void draw() {

if (all.size()>20) {
    all.remove(0);
}

for (int i=0;i<all.size();i++) {
    export b = (export) all.get(i);
    b.draw();
}

}

void mouseClicked() {
addClassInstance();
}

And for the class:

class export {
PImage eimage;
float x, y;
float i = 0;
float w = 150;
float h = 150;

void init() {
    imageMode(CENTER);
    int number = int(random(1, 499));
    eimage = loadImage("export-"+number+".png");
    x = width/2;
    y = height/2;
}

void draw() {
    image(eimage, x, y, w + i, h + i);
    i ++;

    if(w + i > width + 100){
      w = 0;
      h = 0;
    }

}
}

So what this does (sort of): it adds a new random image when you click, but I don't know how to make it go away when it its width equals the windows width, since I'm pretty confused using the class and everything. Well, using Processing, generally.

The

    if(w + i > width + 100){
      w = 0;
      h = 0;
    }

, of course, is not working, the image resets to size 0, 0 but then just grows again.

1

Replies(20)

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

From your description, you don't need the array list, it just consumes memory needlessly (holding images that are no longer used).
I am not sure what you mean by "go away". To go where?

Ah, unless you want to iterate on the list, ie. display a growing next image when one reaches the critical size?
In this case, don't loop over the list in draw(), display only the nth image where n (or a better name, like currentImage) is a global int you increment each time the current image reaches the max size. Reset n to zero when reaching the size of the list.

apotdd

Re: Stuck on a simple class

1 year ago

I don't really know if I understand what you're trying to say. XD So, I have to remove the if-statement from the draw(), function, right? Then you say: "display only the nth image where n (or a better name, like currentImage) is a global int you increment each time the current image reaches the max size". What do you exactly mean by "nth"? The "neimage"? Or do I have to create a new global int? Sorry I must sound really stupid.

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

ArrayList<export> all;
int currentImage; // This variable!
void setup() {
size(700, 700);
all = new ArrayList<export>();
}
void addClassInstance() {
export neimage = new export();
neimage.init();
all.add(neimage);
}
void draw() {
if (all.size() > 20) {
all.remove(0);
}
export b = all.get(currentImage);
b.draw();
}
void mouseClicked() {
addClassInstance();
}
// In export
if(w + i > width + 100){ // Why +100?
w = 0;
h = 0;
currentImage++; // Next image
}

apotdd

Re: Stuck on a simple class

1 year ago

It says it cannot find a class of type named "export", even though my class is named export?

Oh, and I put the +100 there because I thought that looked better visually (so the image gets a little bit bigger than the screen). (:

apotdd

Re: Stuck on a simple class

1 year ago

Okay I just did something stupid wrong. But when I try to run it now it says " export b = all.get(currentImage);" and highlights "export b = all.get(currentImage);". I can't figure out what this means.

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

I don't think it says that, you should have a real error message...
Perhaps you forgot the <export> part after ArrayList.
Since you don't show your updated code, we can only guess...

apotdd

Re: Stuck on a simple class

1 year ago

I have the feeling this is totally incorrect

import processing.opengl.*;
ArrayList<export> all;
int currentImage;

void setup() {
size(700, 700, OPENGL);
all = new ArrayList<export>();
}

void addClassInstance() {
export neimage = new export();
neimage.init();
all.add(neimage);
}

void draw() {
if (all.size() > 20) {
all.remove(0);
}
export b = all.get(currentImage);
b.draw();
}

void mouseClicked() {
addClassInstance();
}
class export {
PImage eimage;
float x, y;
float i = 0;
float w = 150;
float h = 150;

void init() {
    imageMode(CENTER);
    int number = int(random(1, 499));
    eimage = loadImage("export-"+number+".png");
    x = width/2;
    y = height/2;
}

void draw() {
    image(eimage, x, y, w + i, h + i);
    i ++;

    if (w + i > width + 100) {
      w = 0;
      h = 0;
      currentImage++; // Next image
    }
}
}

The more I mess with it the more errors I get. Oh God what does it mean :( "IndexOutOfBoundsException Index 0, Size: 0."

tfguy44

tfguy44

Re: Stuck on a simple class

1 year ago

Sound's like you're trying to access the 0th element of an empty Array (or ArrayList).
When you post a question about an error, please indicate which line it occurs on too!

apotdd

Re: Stuck on a simple class

1 year ago

My bad! It highlights "xport b = all.get(currentImage);" again.

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

You can add addClassInstance() to setup(), to have at least an initial image to display.
After currentImage++; add: currentImage %=all.size(); to ensure it will be reset to 0 once the last loaded image is displayed.

apotdd

Re: Stuck on a simple class

1 year ago

The code runs fine now but the first image keeps growing. If I click the mouse it does work and loads a new image though because of the "addClassInstance();" I added to the mouseClicked. But after a few images suddenly something weird happens and a lot of the images load start flashing as if I'm having a seizure. When I try adding "addClassInstance();" to the draw function it does not work.

import processing.opengl.*;
ArrayList<export> all;
int currentImage;

void setup() {
size(600, 400, OPENGL);
all = new ArrayList<export>();
background(255);
addClassInstance();
}

void addClassInstance() {
export neimage = new export();
neimage.init();
all.add(neimage);
}

void draw() {
float x = 0;
while (x < width) {
    float y = 0;
    while (y < height) {
      fill(255);
      rect(x, y, 200, 200);
      y = y + 200;
    }
    x = x + 200;
}

if (all.size() > 20) {
    all.remove(0);
}

export b = all.get(currentImage);
b.draw();
}

void mouseClicked() {
addClassInstance();
}
class export {
PImage eimage;
float x, y;
float i = 0;
float w = 150;
float h = 150;

void init() {
    imageMode(CENTER);
    int number = int(random(1, 499));
    eimage = loadImage("export-"+number+".png");
    x = width/2;
    y = height/2;
}

void draw() {
    println(w + i);

    image(eimage, x, y, w + i*2, h + i*2);
    i = i + 2;

    if (w + i > width) {
      currentImage++; // Next image
      currentImage %=all.size();
    }
}
}

Oh yes, I tried adding a grid because I want the image to be displayed inside a certain rectangle of the grid but I don't know if that's possible. I'm just trying to get the other things to work first. :)

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

Why did you remove
w = 0;
h = 0;
?
When selected again, images must grow again, no?

apotdd

Re: Stuck on a simple class

1 year ago

When I removed it the result was the same, so I thought the line wasn't necessary anymore. I readded it but I still get this weird effect and the first image still keeps growing.

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

w and h must not be reset to 0, they don't actually change... That's i that must be reset to 0!

apotdd

Re: Stuck on a simple class

1 year ago

Wow thank you, seriously! I think it works (at least for now XD)

import processing.opengl.*;
ArrayList<export> all;
int currentImage;

void setup() {
size(600, 400, OPENGL);
all = new ArrayList<export>();
background(255);
addClassInstance();
}

void addClassInstance() {
export neimage = new export();
neimage.init();
all.add(neimage);
}

void draw() {
float x = 0;
while (x < width) {
    float y = 0;
    while (y < height) {
      fill(255);
      rect(x, y, 200, 200);
      y = y + 200;
    }
    x = x + 200;
}

if (all.size() > 20) {
    all.remove(0);
}

export b = all.get(currentImage);
b.draw();
}
class export {
PImage eimage;
float x, y;
float i = 0;
float w = 150;
float h = 150;

void init() {
    imageMode(CORNER);
    int number = int(random(1, 499));
    eimage = loadImage("export-"+number+".png");
    x = 0;
    y = 0;
}

void draw() {
    println(w + i);

    image(eimage, x, y, w + i, h + i);
    i = i + 1;

    if (h + i > 200) {
      x = 200;
      i = 0;
      addClassInstance();
      currentImage++; // Next image
      currentImage %=all.size();
    }
}
}

The only thing I'd still like to do is use the grid. I have 6 rectangles now (two rows, three columns) that are are 200 pixels wide and heigh. I'd like the first image to load into the first rectangle and when the height (or width, doesn't really matter that much in this case) gets bigger than 200, I want the next image to show up in the next rectangle of the grid. I changed the initial x and y to 0 so the first image appears where the first rectangle is, but I doubt this is the correct way to do this. To make the next image appear on the next rectangle of the grid, I tried something like this to achieve this but it doesn't work (and if it would work it would only work for the first row, right?).

if (h + i > 200) {
      x = x + 200;
      i = 0;
      addClassInstance();
      currentImage++; // Next image
      currentImage %=all.size();
    }

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

OK, it was harder to do than I thought, perhaps because I started in wrong directions. Anyway, here is the improved logic. You might want to improve the end, eg. to continue to draw new random image once the grid is filled.

ArrayList<Export> all;

final int CELL_NB_H = 3;
final int CELL_NB_V = 2;
final int CELL_NB_TOTAL = CELL_NB_H * CELL_NB_V;
float cellWidth, cellHeight;

void setup() {
  size(600, 400);
  cellWidth = width / CELL_NB_H;
  cellHeight = height / CELL_NB_V;
  all = new ArrayList<Export>();
  background(255);
  imageMode(CENTER);
  
  addClassInstance();
}

void addClassInstance() {
  if (all.size() == CELL_NB_TOTAL) {
    noLoop(); // Stop
    println("Done");
  }
  Export neimage = new Export(all.size());
  all.add(neimage);
}

void draw() {
  // Draw the grid
  float x = 0;
  while (x < width) {
    float y = 0;
    while (y < height) {
      fill(255);
      rect(x, y, cellWidth, cellHeight);
      y += cellHeight;
    }
    x += cellWidth;
  }
  for (Export b : all) {
    b.draw();
  }
  Export last = all.get(all.size() - 1);
  if (last.isMax()) {
    addClassInstance();
  }
}

class Export {
  PImage eimage;
  float x, y;
  int i = 0;
  float w = 15;
  float h = 15;

  // Constructor: no need for an init() function
  Export(int n) {
    int number = int(random(1, 499));
//    eimage = loadImage("export-"+number+".png");
    if (number > 200) // For test only!
      eimage = loadImage("H:/Temp/paysage_typique_causse.jpg");
    else
      eimage = loadImage("H:/Temp/800px-Flag_of_South_Korea.svg.png");
    x = cellWidth * (n % CELL_NB_H) + cellWidth / 2;
    y = cellHeight * (n / CELL_NB_H) + cellHeight / 2;
    println(x + " " + y);
  }

  void draw() {

    if (!isMax()) {
      image(eimage, x, y, w + i, h + i);
      i++;
    }
    else {
      image(eimage, x, y, cellWidth, cellHeight);
    }
  }
  
  boolean isMax() {
    return w + i > cellWidth;
  }
}

apotdd

Re: Stuck on a simple class

1 year ago

Wow, I must say that's pretty amazing! Thank you for adding the comments by the way, really useful.
I have a little question about the code: why is it that the images don't get "removed" after another image is loaded as in the other code? I need this in order to change the noLoop(); to draw a new random image. I tried to compare the code a little, thinking it might be the i that was reset on the other code, but of course that didn't work again.

PhiLho

PhiLho

Re: Stuck on a simple class

1 year ago

I hadn't time to finish my changes this morning. I switched from an array list to a simple array, since the number of cells is fixed. Note that you can change the parameters of the grid, the change will be applied in all the code: better than hard-coding cell size and all.
Here is my last version:

final int CELL_NB_H = 3;
final int CELL_NB_V = 2;
final int CELL_NB_TOTAL = CELL_NB_H * CELL_NB_V;
float cellWidth, cellHeight;

Export[] all = new Export[CELL_NB_TOTAL];
int currentImage, imageNb;

void setup() {
  size(600, 400);
  cellWidth = width / CELL_NB_H;
  cellHeight = height / CELL_NB_V;
  background(255);
  imageMode(CENTER);

  getImageList();
  addClassInstance();
}

PImage[] images;
void getImageList() {
  File imageDir = new File("G:/Images");
  String[] imageNames = imageDir.list(
    new FilenameFilter() {
      public boolean accept(File dir, String name) {
        return name.endsWith(".png") || name.endsWith(".jpg");
      }
    }
  );
  images = new PImage[imageNames.length];
  for (int i = 0; i < imageNames.length; i++) {
    images[i] = loadImage(imageDir + "/" + imageNames[i]);
  }
}

void addClassInstance() {
  Export neimage = new Export(imageNb);
  currentImage = imageNb;
  all[imageNb++] = neimage;
  imageNb %= CELL_NB_TOTAL;
}

void draw() {
  // Draw the grid
  float x = 0;
  while (x < width) {
    float y = 0;
    while (y < height) {
      fill(255);
      rect(x, y, cellWidth, cellHeight);
      y += cellHeight;
    }
    x += cellWidth;
  }
  for (Export b : all) {
    if (b != null) {
      b.draw();
    }
  }
  Export current = all[currentImage];
  if (current.isMax()) {
    addClassInstance();
  }
}

class Export {
  PImage eimage;
  float x, y;
  int i = 0;
  float w = 15;
  float h = 15;

  // Constructor: no need for an init() function
  Export(int n) {
    int number = int(random(images.length));
    eimage = images[number];
    x = cellWidth * (n % CELL_NB_H) + cellWidth / 2;
    y = cellHeight * (n / CELL_NB_H) + cellHeight / 2;
  }

  void draw() {

    if (!isMax()) {
      image(eimage, x, y, w + i, h + i);
      i++;
    }
    else {
      image(eimage, x, y, cellWidth, cellHeight);
    }
  }

  boolean isMax() {
    return w + i > cellWidth;
  }
}

Instead of hard-coding some images, I just get the list of images in one dir, and choose among them.
So, by changing just the dir path, everybody can run this code...

apotdd

Re: Stuck on a simple class

1 year ago

That is pretty amazing really! I was just wondering, what does FilenameFilter exactly do? Is it just saying that it accepts both .jpg and .png images?

PhiLho

PhiLho

Re: Re: Stuck on a simple class

1 year ago

Exactly. You can adapt it to restrict or extend the range of accepted formats. You can even use it to load only images of a given range, those starting with 'manga-', or those with 'pirate' in the name, to give only a few examples...

Top Reply