# Displaying Random Images on a Certain XY

**URL:** <https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922>\
**Category:** Processing\
**Tags:** homework\
**Created:** [June 13, 2018, 3:12pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922 "2018-06-13T15:12:01Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 13, 2018, 3:12pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/1 "2018-06-13T15:12:02Z")

</div>

Hi mankind, I need help. I am trying to make something like a slideshow.

I need to put an image on a certain xy coordinate  
when i click to mouse image will randomly change, it will be hundreds of images,  
and it will be some other image onto this randomly changing images, and they also will randomly change

Is there anybody in there?

---

<div class="post-metadata">

**Author:** ![nicolaskellum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolaskellum/32/15860_2.png) [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)\
**Post date:** [June 13, 2018, 6:15pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/2 "2018-06-13T18:15:36Z")

</div>

Hey janberkjk!

Be sure to post your code so we can take a closer look. Are you trying to add some interaction with the mouse? What exactly are you trying to do?

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 14, 2018, 5:00pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/3 "2018-06-14T17:00:22Z")

</div>

Hi Nic,

I am sorry but i just start to learn and whatever i try i could’t get anything yet to show you. ı am still trying if i can find something close to what i want to write i will share, thank you for reply

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 14, 2018, 6:23pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/4 "2018-06-14T18:23:13Z")

</div>

ı did something like this but it gives me float numbers =(

```auto
PImage foto;
int fotoname;
 
void setup(){
  size(1080,680);  
  fotoname = 1;
  
}

void draw(){

  image(loadImage (random(fotoname) + ".jpg"), 500, 330);
  fotoname=fotoname+1;
  
}

```

---

<div class="post-metadata">

**Author:** ![nicolaskellum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolaskellum/32/15860_2.png) [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)\
**Post date:** [June 14, 2018, 11:52pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/5 "2018-06-14T23:52:24Z")

</div>

To fix this, try `int(random(fotoname))`.

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 15, 2018, 3:20pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/6 "2018-06-15T15:20:38Z")

</div>

Hello Again Nic, thank you very much. it is almost done. But i try to make bg image names between 6 and 9. but with this code, 1, 2, 3, 4, and 5.jpg are also displays as bgfoto, can you see why?

```auto
PImage foto;
PImage bg;
int fotoname;
int bgfoto;
 
void setup(){
  size(1080,680);  
  bgfoto = int(random(6,9));
  fotoname = (5);
  
  
}

void draw(){
  image(loadImage (int(random(bgfoto)) + ".jpg"), 0, 0, 1080, 680);
  image(loadImage (int(random(fotoname)) + ".jpg"), 200, 230,180,180);
  bgfoto=bgfoto;
  fotoname=fotoname;
  
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 20, 2018, 4:38pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/7 "2018-06-20T16:38:05Z")

</div>

> [@janberkjk](#):
>
> bgfoto = int(random(6,9));

We run this, and for example bgfoto now equals “7”

Now what happens when we put the seven in here?

```auto
image(loadImage (int(random(7)) + ".jpg"), 0, 0, 1080, 680);

```

Because you used random again, we now get a number 0-6.

Don’t use random a second time!

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 20, 2018, 5:48pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/8 "2018-06-20T17:48:43Z")

</div>

Thank you very much, now i can see the reason =) I changed the code a litlle bit and i created another topic about frame rates of this pictures.  
Here is the code

```auto
void setup(){
  size(1080,680); 
  frameRate(1);
 
}

void draw(){
  println(frameRate);
  image(loadImage (7 + int( random( 3 ) ) + ".jpg"), 0, 0, 1080, 680);
  image(loadImage (int(random(5)) + ".jpg"), 200, 230,180,180);   
}

```

it is working very good but i cant apply different framerates for those photos.

What i want to see  
first picture gruop will change in eigth seconds  
second picture gruop will change very quicky like 6 in only one second.

We I couldnt understand under the other topic can you help me about it? Thanks again

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 20, 2018, 7:07pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/9 "2018-06-20T19:07:59Z")

</div>

Please format the code in your posts: highlight + \</\> button.

Quick forum advice:

- If you want help on a related topic, give a link to that topic.
- If you have several related questions about one piece of code, keep everything in one topic.

frameRate is not for controlling the speed of individual elements – it controls the speed of the screen redraw.

Control the timing of element display by checking `frameCount` or `millis()`

- [https://processing.org/reference/frameCount.html](https://processing.org/reference/frameCount.html)
- [https://processing.org/reference/millis\_.html](https://processing.org/reference/millis_.html)

For example:

```auto
void setup() {
  frameRate(4);
  noStroke();
}
void draw() {
  background(0);
  if (frameCount%16==0) {
    fill(255);
    rect(0, 0, width/4, height);
  }
  if (frameCount%12==0) {
    fill(255, 0, 0);
    rect(width/4, 0, width/4, height);
  }
  if (frameCount%8==0) {
    fill(0, 255, 0);
    rect(2 * width/4, 0, width/4, height);
  }
  if (frameCount%4==0) {
    fill(0, 0, 255);
    rect(3 * width/4, 0, width/4, height);
  }
}

```

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 21, 2018, 11:13am UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/10 "2018-06-21T11:13:40Z")

</div>

Wow dudu its perfect =) I finally figured it out. This framecount option is great. I do not understand forum rules i am sorry about it i actualy never understood =) i just have one question about this code and i am not sure if i ask here or open another topic. question is why at the beggining there is a gray bg. why image is not shown at the beggining? shoul i open another topic for it?

```auto
void setup(){
  size(1080,680); 
  frameRate(20);
  noStroke();
 
}

void draw(){
  if (frameCount%16==0) {
  image(loadImage (7 + int( random( 3 ) ) + ".jpg"), 0, 0, 1080, 680);
  }
  if (frameCount%1==0) {
  image(loadImage (int(random(5)) + ".jpg"), 200, 230,180,180);  
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 21, 2018, 3:10pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/11 "2018-06-21T15:10:41Z")

</div>

Please format the code in your posts: edit your post and highlight the code + \</\> button.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 21, 2018, 3:13pm UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/12 "2018-06-21T15:13:45Z")

</div>

> [@janberkjk](#):
>
> why at the beggining there is a gray bg. why image is not shown at the beggining? shoul i open another topic for it?

Don’t open a new topic - keep related questions about the same code in the same thread.

This is because setup runs on `frameCount == 0`. Draw runs for the first time on `frameCount == 1`.

If you want something to happen on the very first draw frame, then repeat, use `frameCount%n==1`, where n is the number of frames in the cycle.

---

<div class="post-metadata">

**Author:** ![janberkjk](https://avatars.discourse-cdn.com/v4/letter/j/e480ec/32.png) [@janberkjk](https://discourse.processing.org/u/janberkjk)\
**Post date:** [June 22, 2018, 11:35am UTC](https://discourse.processing.org/t/displaying-random-images-on-a-certain-xy/922/13 "2018-06-22T11:35:30Z")

</div>

Hi, Jeremy, i could not understand about highligting code issue, sorry. Your explaining metod of reasons is very good about codes, i think you should write a book. Thank you for your help so far.