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



我通过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);
  }

它基本上只是看起来不完整,缺少通过处理文件构建的任何类型的交互。

我参考了其他几项调查,我和我的教授似乎都找不到解决方案。

如有任何帮助,我们将不胜感激!

草图加载良好。。。问题似乎是很多变量变成了float,而你期望它们是int。它在处理桌面中工作,因为所有东西都有一个静态类型。JS似乎正在打破这一局面。

我尝试在int()中封装一些变量,这给出了更好的结果,但不是您想要的:http://studio.sketchpad.cc/8kRSE1eElg

我建议您仔细阅读代码并记录所有值,以确保它们不是floats,然后修复所需的内容。

最新更新