processing.js画布中引用的PDE / .PJS文件未正确加载

时间:2013-12-13 02:45:53

标签: processing

我在本地通过MAMP工作,处理PDE / PJS文件都不会加载以正确显示文件。

它应该是什么样的: http://www.flickr.com/photos/alexisbritt/11346935186/

它在浏览器中实际显示的内容:http://www.flickr.com/photos/alexisbritt/11346935176/

以下是代码:

<!DOCTYPE html>
<html>
<head>
    <script src="processing-1.4.1.min.js"></script>
</head>
<body> 
    <canvas data-processing-sources="britt_final/britt_final.pde"></canvas>
</body>
</html>

处理文件本身:     //样本三角测试

int cellh = 100;
int cellw = 100;
color colors[] = { #6FC6EB, #7BB9EA, #76A8E7, #A1A6EA, #8496E6, #9B91E7, #9680E4, #B78AE8,      #AF6DE4, #D05EE4 };
float[] verts = {0, 0, 0, 0, 0, 0};
int lastID = -1;

void setup() {
   size(1000, 500);
   noStroke();
   smooth();
   int ncells = 2*ceil(width/cellw)*ceil(height/cellh);
  for(int i = 0; i < ncells; i++) {
fill(assignColor(i));
verts = getVertices(i, verts);
triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]); 
  }
}

void draw() {
  if (mouseX == 0 && mouseY == 0) return;
  int newID = getCellID(mouseX, mouseY);
  if(newID != lastID) {
    identify(newID);
    if(lastID >= 0 && lastID != 64 && lastID != 34) {
      verts = getVertices(lastID, verts);
      fill(colors [int(random(0,10))]);
      triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]);     
}

    lastID = newID;
  }
}

float[] getVertices(int cellID) {
  return getVertices(cellID, null);
}

float[] getVertices(int cellID, float[] result) {
  int gridw = ceil(width/cellw);
  if(result == null) result = new float[6];
  int gridcell = cellID/2;
  int sense = (gridcell/gridw + gridcell%gridw) % 2;
  result[0] = (gridcell % gridw) * cellw;
  result[1] = (gridcell / gridw) * cellh;
  result[4] = result[0] + cellw;
  result[5] = result[1] + cellh;
  result[2] = result[4*((sense+cellID)%2)];
  result[3] = result[5-4*((sense+cellID)%2)];
  if(sense == 1) result[((1+cellID)%2)*4] = result[4*(cellID%2)];
  return result;
}

int getCellID(float x, float y) {
  int gridw = ceil(width/cellw);
  int base = int(x)/cellw + gridw * (int(y)/cellh);
  float localx = x % cellw;
  float localy = y % cellh;
  int sense = (int(x)/cellw + int(y)/cellh) % 2;
  float slope = float(cellh)/float(cellw);
   int offset = 0;
   if (  (sense == 0 && localy < slope * localx) 
         || (sense == 1 && localy > cellh - slope * localx) )
                 offset = 1;
       return 2*base + offset;
 }

color assignColor(int cellID) {
   int sense, rowsize = 2*ceil(width/cellw);
   sense = (cellID/rowsize) % 2;
   return colors[2*sense + (cellID%rowsize)%2];
 }

  void identify(int cellID) {
  fill(assignColor(cellID));
  verts = getVertices(cellID, verts);
  triangle(verts[0], verts[1], verts[2], verts[3], verts[4], verts[5]);  
  fill(0);

  }

它基本上只是显得破碎,并且缺少通过处理文件内置的任何类型的交互。

我引用了其他一些调查问卷,我或我的教授似乎都没有找到解决方案。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

草图加载正常...问题似乎是很多变量变成了float,而你期望它们是int。它适用于Processing desktop,因为所有东西都有静态类型。 JS似乎打破了这一点。

我尝试在int()中包含一些变量,这样可以提供更好的结果但不是您要找的内容:http://studio.sketchpad.cc/8kRSE1eElg

我建议您浏览代码并记录所有值,以确保它们不是floats,然后修复所需的任何内容。