# How to make appear image at random position

**URL:** <https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372>\
**Category:** Coding Questions\
**Created:** [October 2, 2019, 4:12pm UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372 "2019-10-02T16:12:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anael](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anael/32/6636_2.png) [@Anael](https://discourse.processing.org/u/Anael)\
**Post date:** [October 2, 2019, 4:12pm UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372/1 "2019-10-02T16:12:14Z")

</div>

Hello, I’m a graphic design student. For a poster project, i must create an image made of several fake ads appearing randomly on the screen like pop-up. The idea was to load about 10 images and make them appear randomly on the screen in a random order, to create different render each time we use the code. Does anyone know how to do that in Processing ? Thanks in advance for your help. Sorry if my english isn’t perfect.

---

<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:** [October 3, 2019, 2:33am UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372/2 "2019-10-03T02:33:04Z")

</div>

learn how to:  
-a- load one image ( loadImage from basic examples )  
-b- show it at a random location ( random from reference )  
-c- make a String array with all picture file names “filesarray”  
-d- load the pictures to a PImage array “imagearray”  
-e- make a random index number ( depending from the length of the array )  
but actually that is not what you need  
make a int list array “idx” with numbers 0 … (length of array-1)  
and shuffle it to get a random sequence for the pictures  
[https://processing.org/reference/IntList\_shuffle\_.html](https://processing.org/reference/IntList_shuffle_.html)  
-f- draw the pictures with

```auto
for ( int i = 0 ; i < imagearray.length; i++) image(imagearray[idx[i] ], posx, posy )

```

post your code  
with the `</> Preformatted text` button from the forum editor menu  
if you have questions

---

<div class="post-metadata">

**Author:** ![Anael](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anael/32/6636_2.png) [@Anael](https://discourse.processing.org/u/Anael)\
**Post date:** [October 7, 2019, 11:08am UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372/3 "2019-10-07T11:08:49Z")

</div>

I’m totally lost to be honest. I’m really, really new to Processing.

```auto
PImage img;
PImage img1;
PImage img2;

void setup(){  
  background(0);
  size (620, 877);
  img = loadImage("1.png");
  img1 = loadImage("2.png");
  img2 = loadImage("3.png");
  
  for(int i=0; i<500; i= i + 1){
    float r1 = random(-620, 620);
    float r2 = random(-877, 877);
  image(img,r1,r2);
  image(img1,r1,r2);
  image(img2,r1,r2);
}
}

```

I need to make them appear randomly, here, there is just the last image i called.

---

<div class="post-metadata">

**Author:** ![Anael](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anael/32/6636_2.png) [@Anael](https://discourse.processing.org/u/Anael)\
**Post date:** [October 7, 2019, 11:41am UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372/4 "2019-10-07T11:41:05Z")

</div>

Or something like that, with image nammed “1.png” , “2.png” and “3.png”

```auto
PImage img;
int r ;

void setup(){  
  background(0);
  size (620, 877);
}

void draw(){
  
  for(int i=0; i<500; i= i + 1){
    float r1 = random(-620, 620);
    float r2 = random(-877, 877);

r = random(1,3);
round(r);
img = loadImage( r + ".png");
image(img,r1,r2); 

}
}

```

---

<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:** [October 7, 2019, 12:06pm UTC](https://discourse.processing.org/t/how-to-make-appear-image-at-random-position/14372/5 "2019-10-07T12:06:55Z")

</div>

-a- please use the  
imgx = loadImage() in setup  
image(imgx,x,y) in draw

-b-  
better make a array for the filename and a array for the images  
so the loading is a ONELINE FOR loop in setup,  
the draw a ONELINE in draw

* * *

```auto
String[] myFileArray = {"moonwalk1.jpg", "moonwalk2.jpg"}; // picture names,, add more
PImage[] myImageArray;
int many;

void setup() {
  size(640, 360);
  many = myFileArray.length;
  myImageArray = new PImage[many];
  for (int i=0; i < many; i++ ) myImageArray[i]=loadImage(myFileArray[i]); // load all images// from sketchdir or data/
  frameRate(1);
}

void draw() {
  int idx = (int)random(many); // select a random index number
  float x = random(width/2); // and a random picture position
  float y = random(height/2);
  println("i "+idx+" "+myFileArray[idx]);
  image(myImageArray[idx],x,y); // and show it
}

```

to show many in a random sequence try

```auto
String[] myFileArray = {"moonwalk1.jpg", "moonwalk2.jpg" }; // picture names.. add more
PImage[] myImageArray;
int many;
IntList idx = new IntList();

void setup() {
  size(640, 360);
  many = myFileArray.length;
  myImageArray = new PImage[many];
  for (int i=0; i < many; i++ ) {
    myImageArray[i]=loadImage(myFileArray[i]); // load all images // from sketchdir or data/
    idx.append(i); // make a array intlist with numbers 0 .. many-1
  }
  noLoop();
  idx.shuffle(); // make the sequence random
}

void draw() {
  background(200,200,0);
  for (int i=0; i < many; i++ ) {
    int posx = (int)random(width/2);
    int posy = (int)random(height/2);
    int id = idx.get(i);
    image( myImageArray[id], posx, posy ); // and show it at random position
    println("i "+i+" idx "+id+" file "+myFileArray[id]+" x "+posx+" y "+posy);
  }
}

void keyPressed() {
  if ( key == 'r' ) {
    idx.shuffle();
    redraw();
  }
}

```