0

在浏览器中进行测试时，我的 javascript 没有向我抛出任何错误，并且我有 /* @pjs */ 指令。

我正在尝试渲染一片花，每朵花 13 帧，加载到 PI 图像数组中。

我的路径很好，我想我在 processing.js 工作流程中遗漏了一些东西，尽管我在http://processingjs.org等在线资源中找不到它——这一切都可以在我的计算机上进行处理。

几天来我一直在摆弄同样的问题:(

这是我的处理文件::

/* @pjs preload="/static/other/processing/Garden_of_Life_images_array_part_display/tulip_01.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_02.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_03.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_04.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_05.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_06.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_07.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_08.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_09.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_10.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_11.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_12.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_13.png"; */

//3-1, 2017

//building on last build:
//partial display of the life cycle determined in draw function
//see below, three options

//full-screen mode and clearer settings-portion of the code for display added:

////SETTINGS////

int w = 480; //canvas (surface)
int h = 360;

int distance = 36; //density: greater -> further apart
boolean useDistance = true; //set to false for chessboard-style tiling

//::useDistance enabled:://
int wideCount = 6; //disregarded if useDistance = false, but set to fit images to screen
int highCount = 5;

////----////

int w2 = 240; //image (tulip)
int h2 = 180;

int frames = 4; //animation speed that work with images
int framesCount = 13; //sum frames

String imageFilePrefix = "/static/other/processing/Garden_of_Life_images_array_part_display/tulip_";
String imageFileSuffix = ".png";

Animation[] animations;

void setup() { 

  size(940, 480);

  background(0);
  frameRate(frames);

  //determining amount of flowers

  if (!useDistance) {
      int wideCount = width / w2;
      int highCount = height / h2;

    }

  int count = wideCount * highCount;    

  animations = new Animation[count];

  //positioning

  int index = 0;
  for (int y = 0; y < highCount; y++) {
    for (int x = 0; x < wideCount; x++) {
      if (useDistance) {
        //x and y offsets left at zero
        animations[index++] = new Animation(imageFilePrefix, framesCount, imageFileSuffix, x * distance, y * distance, 0, 0, 0);
      }
      else {
        animations[index++] = new Animation(imageFilePrefix, framesCount, imageFileSuffix, x * w2, y * h2, 0, 0, 0); 
      }  
  }
  }

}

void draw() { 
  background(0);

  //drawing each flower

  for (Animation anim : animations) {
    //anim.display();
    //anim.display_grow();
    anim.display_live();
    //anim.display_die();
  }
}

和我的动画课::

/* @pjs preload="/static/other/processing/Garden_of_Life_images_array_part_display/tulip_01.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_02.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_03.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_04.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_05.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_06.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_07.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_08.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_09.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_10.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_11.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_12.png,/static/other/processing/Garden_of_Life_images_array_part_display/tulip_13.png"; */

//3-1, 2017

// Class for animating a sequence of .pngs, GoL images array/part display

class Animation {
  PImage[] images;
  int imageCount;

  //animation specifics
  int imageStartGrow = 0; //identify offset for partial display
  int imageCountGrow = 3; //duration of partial display
  int imageStartLive = 3;
  int imageCountLive = 6;
  int imageStartDie = 10;
  int imageCountDie = 3;

  int frame;

  int xOffset;
  int yOffset;
  float x, y;
  int unit;

  Animation(String imagePrefix, int count, String imageSuffix, 
  int xOffsetTemp, int yOffsetTemp, int xTemp, int yTemp, int tempUnit) {
    imageCount = count;
    images = new PImage[imageCount];

    for (int i = 0; i < imageCount; i++) {
      String filename = imagePrefix + String.format("%02d", i + 1) + imageSuffix;
      images[i] = loadImage(filename);
    }

    xOffset = xOffsetTemp;
    yOffset = yOffsetTemp;
    x = xTemp;
    y = yTemp;
    unit = tempUnit;
  }

  void display() {
    frame = (frame+1) % imageCount;
    image(images[frame], xOffset - x, yOffset - y);
  }

  void display_grow() {
    frame = (frame+1) % imageCountGrow;
    image(images[imageStartGrow + frame], xOffset, yOffset);
  }

  void display_live() {
    frame =  (frame+1) % imageCountLive;
    image(images[imageStartLive + frame], xOffset, yOffset); 
  }

  void display_die() {
    frame =  (frame+1) % imageCountDie;
    image(images[frame + imageStartDie], xOffset, yOffset);
  }
}

最后，在我的页面上::

<canvas data-processing-sources="/static/other/processing/Garden_of_Life_images_array_part_display/Garden_of_Life_images_array_part_display.pde"></canvas>

当然，我也在加载 processing.js 脚本

<script type="text/javascript" src="/static/js/main/processing-v1.4.8.js">

作为一个附带问题，我可以将我的 .pde 文件单独保存在同一目录中，还是需要合并它们？

我都尝试过，但都没有成功：加载时页面上的输出是一个空白的黑色字段，画布应该出现在该字段中。如果我尝试加载没有图像的处理文件，它们会完美加载吗？

建议？（请！ ;））

4

0 回答 0