Uploading images in p5 to create an animation and export it as video-CodePudding

I am trying to load a set of images, then for each image individually create an animation and then export this animation. The animation is just a rotating cube with the image on one side. At the moment i can upload the images in a batch but then i get and erro : "Cannot read properties of undefined (reading 'gifProperties')" which seems to be linked to the texture() command

I did the following for the moment: To upload the files i can't really make a loop it seems since they don't have all the same name, i can't find a way to take all the images contained in a file without specifying the filename of each image. thus I did the following:

let plate;
let invisible_sides;
let invisible_up_down;

function setup() {
    createCanvas(800, 800, WEBGL);
    textSize(18);
    text("Select the images", 20, 20);
    inputbtn = createFileInput(FileSimple,"true");
    inputbtn.position(30, 40);
    //then i need additional elements: 
    invisible_sides = createGraphics(400,400); 
    invisible_up_down= createGraphics(400,400);  
    BOX_WIDTH = 400;
    BOX_HEIGHT = 400;
    BOX_DEPTH = 400;
}

The invisible variables above are just made to fill in some sides of the cube with invisible textures.

Then I need to convert the file data to an image, to do so i called the FileSimple function in my setup -- createFileInput :

function FileSimple(file){

if (file.type == 'image'){

    plate = createImg(file.data, '' )

}else{

    img = null;

} }

Then i found on another Stack Overflow question this answer for a rotating cube animation with different textures on the different sides: (I am sorry i can't find the feed anymore)

 function drawFaceBox(boxWidth, boxHeight, boxDepth,
 front, top, right, bottom, left, back) {
   angleMode(DEGREES); 
   let w = boxWidth * SCALE_FACTOR;
   let h = boxHeight * SCALE_FACTOR;
   let d = boxDepth * SCALE_FACTOR;

   // Center the box.
   translate(-w / 2, -h / 2);

    texture(front);
    quad(0, 0, w, 0, w, h, 0, h);

    push();
    texture(left);
    translate(0, 0, -d);
    rotateY(-90);
    quad(0, 0, d, 0, d, h, 0, h);

    pop();
    push();
    texture(top);
    translate(0, 0, -d);
    rotateX(90);
    quad(0, 0, w, 0, w, d, 0, d);

    pop();
    push();
    texture(right);
    translate(w, 0, 0);
    rotateY(90);
    quad(0, 0, d, 0, d, h, 0, h);

    pop();
    push();
    texture(bottom);
    translate(0, h, 0);
    rotateX(-90);
    quad(0, 0, w, 0, w, d, 0, d);

    pop();
    push();
    texture(back);
    rotateY(180);
    translate(-w, 0, d);
    quad(0, 0, w, 0, w, h, 0, h);
  }

here we seem to have the problem about the texture action.

Finally i would like to display the animation thus I runned the draw function as such:

function draw(){
 background(255);

 drawFaceBox(BOX_WIDTH, BOX_HEIGHT, BOX_DEPTH,
 plate, invisible_up_down, invisible_sides, invisible_up_down, invisible_sides, 
 plate);   }

for the exporting part of the project, i thought about using this tutorial : https://stubborncode.com/posts/how-to-export-images-and-animations-from-p5-js/

thank you very much for any help you can give

CodePudding user response：

The issue with your call to texture() is that it's parameter must not be null or undefined. You can resolve this by defaulting to your blank texture when plate has not yet been defined:

const SCALE_FACTOR = 0.5;

let arial;
let plate;
let blank;

function preload() {
  arial = loadFont('https://www.paulwheeler.us/files/Arial.otf');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  textFont(arial);
  textSize(18);
  text("Select the images", 20, 20);
  inputbtn = createFileInput(FileSimple, "true");
  inputbtn.position(30, 40);
  //then i need additional elements:
  blank = createGraphics(400, 400);
  BOX_WIDTH = 400;
  BOX_HEIGHT = 400;
  BOX_DEPTH = 400;
}

function draw() {
  background(255);
  
  orbitControl(1, 1, 0.1);

  drawFaceBox(
    BOX_WIDTH,
    BOX_HEIGHT,
    BOX_DEPTH,
    // Don't pass null or undefined here because texture() will fail
    plate || blank,
    blank,
    blank,
    blank,
    blank,
    plate || blank
  );
}

function FileSimple(file) {
  if (file.type == "image") {
    plate = createImg(file.data, "");
  }
}

function drawFaceBox(
  boxWidth,
  boxHeight,
  boxDepth,
  front,
  top,
  right,
  bottom,
  left,
  back
) {
  angleMode(DEGREES);
  let w = boxWidth * SCALE_FACTOR;
  let h = boxHeight * SCALE_FACTOR;
  let d = boxDepth * SCALE_FACTOR;

  // Center the box.
  translate(-w / 2, -h / 2);

  texture(front);
  quad(0, 0, w, 0, w, h, 0, h);

  push();
  texture(left);
  translate(0, 0, -d);
  rotateY(-90);
  quad(0, 0, d, 0, d, h, 0, h);

  pop();
  push();
  texture(top);
  translate(0, 0, -d);
  rotateX(90);
  quad(0, 0, w, 0, w, d, 0, d);

  pop();
  push();
  texture(right);
  translate(w, 0, 0);
  rotateY(90);
  quad(0, 0, d, 0, d, h, 0, h);

  pop();
  push();
  texture(bottom);
  translate(0, h, 0);
  rotateX(-90);
  quad(0, 0, w, 0, w, d, 0, d);

  pop();
  push();
  texture(back);
  rotateY(180);
  translate(-w, 0, d);
  quad(0, 0, w, 0, w, h, 0, h);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>