# Loading created image into array(list) for further use (movement)

**URL:** https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362
**Category:** Coding Questions
**Created:** [November 9, 2018, 1:49am UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362 "2018-11-09T01:49:39Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![LordCacops](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lordcacops/32/2280_2.png) [@LordCacops](https://discourse.processing.org/u/LordCacops)
#### Post date: [November 9, 2018, 1:49am UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362/1 "2018-11-09T01:49:39Z")

</div>

Howdy! This is my first post.

I created this program that generates grids with colored squares. The colors are randomized. Each is a new object that I create with mousePressed(). When they are created they are get placed in (mouseX,MouseY).

My problem is, that I want them to move, that is, as they are (I don’t want their colors to change every frame!). Instead, when they are created, they just get stuck where they were born. I am hoping to find a way to store them in an arrayList as completed after rendering so that then I can call them in Draw and have them move randomly about the screen by random increments along the X and Y axes.

```auto

int mouseCount = 0;
float x = 555;
float y = 555;
float xOffset = 0;
float yOffset = 0;
float xpos = 0;
float ypos = 0;
ArrayList<Animal> animals;

void setup() {
  size(894, 894);
  frameRate(60);

  
  animals = new ArrayList<Animal>();

}  

void draw() {

  //I DON'T KNOW WHAT TO WRITE HERE
  
}

//Add a new animal
void mousePressed() {

  animals.add(new Animal(mouseX, mouseY));

  Animal a = animals.get(mouseCount);   
  a.render();

  mouseCount ++;

}

class Animal {
  float x = 0;
  float y = 0;
  float xOffset = 0;
  float yOffset = 0;
  int[] genotype = new int[24];

  Animal(float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }

  void render() {

    //Randomizes all genes 
    for (int i = 0; i < this.genotype.length; i++) {
      this.genotype[i] = int(random(5));
    }

    for (int i = 0; i < this.genotype.length; i++) { 
      if (this.genotype[i] == 0) {
        fill(0, 0, 0, 0.0);
      } 
      if (this.genotype[i] == 1) {
        fill(255, 0, 0);
      } 
      if (this.genotype[i] == 2) {
        fill(0, 0, 255);
      } 
      if (this.genotype[i] == 3) {
        fill(255, 255, 255);
      } 
      if (this.genotype[i] == 4) {
        fill(255, 255, 0);
      }
      
      rect(x + xOffset, y + yOffset, 20, 20);
      xOffset +=20;

      if (i == 3 || i == 7 || i == 11 || i == 15 || i == 19) {
        xOffset -=80;
        yOffset +=20;
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2018, 3:14am UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362/2 "2018-11-09T03:14:19Z")

</div>

TOO LATE, already try to help:

good idea,

- so you should random the color at creation and not at draw
- use draw with background and loop over arraylist
- separate mouse button
- 
  - LEFT makes the new animal

- 
  - RIGHT you can start with your animal move code

- 
  - 
    - what will need a OVERRECT detection+indication

- 
  - 
    - and like mouse draged to set new this.x this.y for the animal  
so need that methode in the class for set.

check out and go on from

```auto
ArrayList<Animal> animals;

void setup() {
  size(500, 500);
  animals = new ArrayList<Animal>();
}  

void draw() {
  background(20, 160, 0);
  for (Animal a : animals) a.render();
}

void mousePressed() {
  if (mouseButton == LEFT) animals.add(new Animal(mouseX, mouseY));
  if (mouseButton == RIGHT) println("SELECT & MOVE?");
}

class Animal {
  float x = 0;
  float y = 0;
  // local vars
  float w;
  float xOffset = 0;
  float yOffset = 0;

  int[] genotype = new int[24];

  Animal(float tempX, float tempY) {
    this.x = tempX;
    this.y = tempY;
    //Randomizes all genes at creation, not at render!
    for (int i = 0; i < this.genotype.length; i++) {
      this.genotype[i] = int(random(5));
    }
    this.w = random(10,20);
  } // end animal def

  void render() {
    xOffset=0;
    yOffset=0;
    for (int i = 0; i < this.genotype.length; i++) { 
      if (this.genotype[i] == 0) fill(0, 0, 0, 0.0);
      if (this.genotype[i] == 1) fill(255, 0, 0);
      if (this.genotype[i] == 2) fill(0, 0, 255);
      if (this.genotype[i] == 3) fill(255, 255, 255);
      if (this.genotype[i] == 4) fill(255, 255, 0);

      rect(this.x + xOffset, this.y + yOffset, this.w, this.w);
      
      xOffset +=this.w;
      if (i == 3 || i == 7 || i == 11 || i == 15 || i == 19) {
        xOffset = 0; //-=4*this.w;
        yOffset +=this.w;
      } // end line of rects
    } // end rectangle
  } // end render
} // end animal class

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 9, 2018, 9:09am UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362/3 "2018-11-09T09:09:15Z")

</div>

Please don‘t delete Questions/ edit them to be unreadable. This question might help others and it is obsolete to have to reanswer questions that already where answered.

---

<div class="post-metadata">

### Author: ![LordCacops](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lordcacops/32/2280_2.png) [@LordCacops](https://discourse.processing.org/u/LordCacops)
#### Post date: [November 10, 2018, 1:53pm UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362/4 "2018-11-10T13:53:55Z")

</div>

I am very sorry. I just didn’t want to fill the forum with a post that I no longer needed to be answered. I will observe this in future posts.

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 10, 2018, 5:22pm UTC](https://discourse.processing.org/t/loading-created-image-into-array-list-for-further-use-movement/5362/5 "2018-11-10T17:22:51Z")

</div>

No problem, just remember, that Even if you don‘t Need an answer anymore, there might be someone who has a similar question.