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();
  }
}

score 4 · Accepted Answer · answered Sep 30 '21 at 08:02

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>

Thank you very much! Though this is almost what I wanted to achieve, I would prefer if the images to be in 2D rather than texture wrapped around a cube. How do I go about implementing it? Is there a thickness property for the ```box``` ? — Ahmed Meeran, Sep 30 '21 at 10:14
In that case, you wouldn't even need to use texture, just use `image(this.img, 0, 0);` — Luke Garrigan, Sep 30 '21 at 10:15

P5 image gallery animation

1 Answers1