P5 image gallery animation

Question

I am trying to dynamically load a set of images and translate them in the Z direction at a constant speed while having randomised values for the X and Y

I am working with the following code and I am stuck on how to use the image texture property.

I get a blank black canvas on rendering the following code I worked with. Any help will be appreciated.

let imgs = [];
let imgs_arr = [];
let num = 15;

function preload() {
      for (let i = 0; i < num; i++) {
    imgs[i] = loadImage("https://picsum.photos/400/400/?image=" + i * 10);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  for (let i = 0; i < num; i++) {
    let x = random(-width / 2, width / 2);
    let y = random(-height / 2, height / 2);
    let z = random(-width*5, width/2);
        let texture = new Type(imgs[i], x, y, z)
    imgs_arr.push(texture);
  }
}

function draw() {
  background(0,0,0);
    orbitControl();
  for (let i = 0; i < num; i++) {
    imgs_arr[i].update();
    imgs_arr[i].display();
  }
}

class Type {
  constructor(_img, _x, _y, _z) {
    this.img = _img;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 10;
    if(this.z > width/2){
        this.z = -width*5;
    }
  }
    

  display() {
    push();
    translate(this.x, this.y, this.z);
        texture(this.img)
    pop();
  }
}

Answer 1

Just from reading the docs it looks as though you're missing a key component. Let's say you want to draw the image on a box, you'd need to add the following after your texture:

box(width / 2);

Here's the running example:

let imgs = [];
let imgs_arr = [];
let num = 15;

function preload() {
      for (let i = 0; i < num; i++) {
    imgs[i] = loadImage("https://picsum.photos/400/400/?image=" + i * 10);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  for (let i = 0; i < num; i++) {
    let x = random(-width / 2, width / 2);
    let y = random(-height / 2, height / 2);
    let z = random(-width*5, width/2);
        let texture = new Type(imgs[i], x, y, z)
    imgs_arr.push(texture);
  }
}

function draw() {
  background(0,0,0);
    orbitControl();
  for (let i = 0; i < num; i++) {
    imgs_arr[i].update();
    imgs_arr[i].display();
  }
}

class Type {
  constructor(_img, _x, _y, _z) {
    this.img = _img;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 10;
    if(this.z > width/2){
        this.z = -width*5;
    }
  }
    

  display() {
    push();
    translate(this.x, this.y, this.z);
    texture(this.img)
    box(width / 2);
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>