# Animating the loadImage function?

**URL:** <https://discourse.processing.org/t/animating-the-loadimage-function/20629>\
**Category:** Coding Questions\
**Created:** [May 8, 2020, 1:46pm UTC](https://discourse.processing.org/t/animating-the-loadimage-function/20629 "2020-05-08T13:46:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 8, 2020, 1:46pm UTC](https://discourse.processing.org/t/animating-the-loadimage-function/20629/1 "2020-05-08T13:46:50Z")

</div>

Here is my code for a 3d spinning cube and using texture to lay images from an array, json file, to project on to the cube.

The image update currently is at the sketch frame rate and I want to control the update speed but my brain is fried.

- see live sketch here  
[p5 sketch](https://editor.p5js.org/cuvner/full/etwcAuwU0)

```auto
let img;
let roomFloor;
let wallImage;
var memeImg;
var memez;
var montage = [];
var montageImg = [];
// var images = [
// 'https://i.imgflip.com/cv1y0.jpg',
// 'https://i.imgflip.com/46rh.jpg',
// 'https://i.imgflip.com/2puag9.jpg'
// ];
let slideShow
var images = [];

function preload() {
  font1 = loadFont('itc-avant-garde-gothic-std-bold-589572c7e9955.otf');
  roomFloor = loadImage('2.png');
  wallImage = loadImage('background.gif');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);

  let urls = 'https://api.imgflip.com/get_memes';
  loadJSON(urls, arrayUrl);

  function arrayUrl(meme) {
    var imageUrl = meme.data.memes
    for (var j = 0; j < imageUrl.length; j++) {
      // print(imageUrl[j].url);
    }

    //----------url array ----------------
    for (var k = 0; k < imageUrl.length; k++) {
      images[k] = imageUrl[k].url;
      print(images[k]);
    }
    // print(images[0]);

  }

  img = loadImage(random(images));

}

function draw() {
  background(200);
  noStroke();

  push();

  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  //plane(100,100);
  texture(img)
  box(150);
  pop();

  push();
  fill(255, 255);
  translate(0, 200);
  rotateX(HALF_PI);
  texture(roomFloor);

  plane(2000, 500);
  pop();

  push();
  fill(255, 255);
  translate(0, -25, -300);
  texture(wallImage);
  tint(255, 126);
  plane(800, 500);
  pop();

  if (frameCount % 10) {
    img = loadImage(random(images));
  }

}

```

Any help much appreciated  
ps also see p5 sketch link

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 8, 2020, 10:07pm UTC](https://discourse.processing.org/t/animating-the-loadimage-function/20629/2 "2020-05-08T22:07:20Z")

</div>

So let us pretend for a while that we are executing the code and `frameCount` equals to `42`. Then we encounter the following `if` statement. Should we jump inside that statement and load a random image?

```auto
if (frameCount % 10) {
  img = loadImage(random(images));
}

```

`42 % 10` equals `2`, which is truthy, so yes, a random image is loaded. When the next frame is rendered, `frameCount` equals to `43` and, once again, a random image is loaded. The only time a fresh image is _not_ loaded is when `frameCount` is `0`, `10`, `20`, and so on. 53 new images are shown every second! That’s probably to fast. 😄

So if you want to control the update speed, you should play around with and try another condition for that if statement.

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 9, 2020, 8:59am UTC](https://discourse.processing.org/t/animating-the-loadimage-function/20629/3 "2020-05-09T08:59:37Z")

</div>

Thanks Sven, I will have a try!

---

<div class="post-metadata">

**Author:** ![cuvner](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@cuvner](https://discourse.processing.org/u/cuvner)\
**Post date:** [May 9, 2020, 9:23am UTC](https://discourse.processing.org/t/animating-the-loadimage-function/20629/4 "2020-05-09T09:23:17Z")

</div>

[Sketch here](https://editor.p5js.org/cuvner/full/etwcAuwU0)

It worked better by putting

> [@cuvner](#):
>
> ```auto
> if (frameCount % 10) {
> img = loadImage(random(images));
> }
> 
> ```

into a variable

> slideShow = frameCount;  
> if (slideShow%42 == 0) {  
> img = loadImage(random(images));  
> }