Animating the loadImage function?

p5.js Coding Questions
1

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.

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

1 Like
2

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?

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. :smile:

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

2 Likes
3

Thanks Sven, I will have a try!

4

Sketch here

It worked better by putting

into a variable

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

1 Like