Блог

Я пытаюсь загрузить набор изображений, затем для каждого изображения по отдельности создать анимацию, а затем экспортировать эту анимацию. Анимация — это просто вращающийся куб с изображением на одной стороне. На данный момент я могу загружать изображения в пакетном режиме, но затем я получаю и ошибка: "Cannot read properties of undefined (reading 'gifProperties')" которая, похоже, связана с texture() командой

На данный момент я сделал следующее: чтобы загрузить файлы, я не могу создать цикл, кажется, поскольку у них разные имена, я не могу найти способ взять все изображения, содержащиеся в файле, без указания имени файла каждого изображения. таким образом, я сделал следующее:

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

Невидимые переменные, приведенные выше, просто предназначены для заполнения некоторых сторон куба невидимыми текстурами.

Затем мне нужно преобразовать данные файла в изображение, для этого я вызвал функцию FileSimple в моей настройке — createFileInput :

 function FileSimple(file){

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

    plate = createImg(file.data, '' )

}else{

    img = null;

} }
 

Затем я нашел в другом вопросе о переполнении стека этот ответ для анимации вращающегося куба с разными текстурами на разных сторонах: (Извините, я больше не могу найти канал)

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

здесь у нас, похоже, проблема с действием текстуры.

Наконец, я хотел бы отобразить анимацию, поэтому я запустил функцию рисования как таковую:

 function draw(){
 background(255);

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

для части экспорта проекта я подумал об использовании этого руководства : https://stubborncode.com/posts/how-to-export-images-and-animations-from-p5-js /

большое вам спасибо за любую помощь, которую вы можете оказать

Проблема с вашим вызовом texture() заключается в том, что его параметр не должен быть нулевым или неопределенным. Вы можете решить эту проблему, установив по умолчанию пустую текстуру, если plate она еще не определена:

 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>