在 p5 中上传图像以创建动画并将其导出为视频

Question

我正在尝试加载一组图像，然后为每个图像单独创建一个动画，然后导出该动画。动画只是一个旋转的立方体，一侧有图像。目前我可以批量上传图像，但随后我得到错误："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;

} }

然后我在另一个 Stack Overflow 问题上找到了这个关于在不同侧面具有不同纹理的旋转立方体动画的答案：（很抱歉，我找不到提要了）

 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/

非常感谢您提供的任何帮助

Answer 1

您调用 texture() 的问题是它的参数不能为 null 或未定义。当 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>

在 p5 中上传图像以创建动画并将其导出为视频

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

javascript

3d

video

animation

p5.js